javascript - seguridad - que tipo de archivos no puedo adjuntar en un correo

Detectar soporte para adjuntos de fondo: ¿arreglado?

Question

¿Hay una manera de detectar el soporte del navegador para el archivo adjunto de fondo: fijo?

Edición: aunque esta función es ampliamente compatible con los navegadores de escritorio, es poco compatible con dispositivos portátiles, por lo que me gustaría poder detectarla.

Answer 1

Creo que tengo la solución para todos los dispositivos. Es posible detectar soporte para clip , así que hice eso e hice un cambio en el DOM para cuando se admite el clip . Si no lo es, recurre background-attachment: fixed;

Consulte el código en https://codepen.io/AartdenBraber/pen/gGmdWK

Answer 2

Cuando use {background-attach: fix}, los dispositivos móviles actuales no mostrarán la imagen de fondo en absoluto. Para asegurarse de que la imagen se muestre en todos los dispositivos móviles, debe probar la compatibilidad y, si no es compatible, establecer la propiedad de adjuntos de fondo en "inicial" (es decir, estado predeterminado) o "desplazamiento" (que es el estado predeterminado) .

Las malas noticias:

Actualmente es imposible realizar una prueba directa y específica para el soporte de fondos fijos porque los navegadores móviles informarán incorrectamente que sí lo admiten. Para ver este error por ti mismo, carga esta prueba en un navegador móvil:

http://codepen.io/mattthew/pen/PwEqJa

function supportsCSS(value) {
    try {
        var style = document.body.style;
        if (!("backgroundAttachment" in style)) return false;
        var oldValue = style.backgroundAttachment;
        style.backgroundAttachment = "fixed";
        var isSupported = (style.backgroundAttachment === value);
        style.backgroundAttachment = oldValue;
        return isSupported;
    }
    catch (e) {
        return false;
    }
}

var el = document.getElementById(''result'');
var txt = ''<b>This device &amp; broswer supports:</b><br>'';
txt += ''{ background-attachment:fixed; } : '' + supportsCSS(''fixed'') + ''<br>'';
txt +=  { background-attachment:foo; } : '' + supportsCSS(''foo'');

el.innerHTML = txt;

basado en el código originalmente escrito por: @chao

Las opciones limitadas:

Es posible probar indirectamente la compatibilidad con varios métodos.

Opción 1: Eliminar fondo fijo en pantallas pequeñas

Esta opción utiliza una consulta de medios CSS para apuntar pantallas más pequeñas para sobrescribir el estilo en dispositivos con anchos de pantalla de 1024px o más pequeños (es probable que los dispositivos representen fondos fijos como invisibles). Las ventajas de esta opción son: es muy ligero y solo requiere un poco de CSS:

#some_element {
     background-attachment: fixed;
}

@media all and (max-device-width: 1024px) {
     /* 
     overwrite property for devices with 
     screen width of 1024px or smaller  
     */
     #some_element {
          background-attachment: scroll;
     }
}

Desafortunadamente, hay una pequeña cantidad de marcas de tabletas con anchos de pantalla de 1280px y 1366px, que se superponen con las pantallas de escritorio más pequeñas (ordene esta lista por Altura de CSS). La jugada más segura es usar un fondo de desplazamiento para esta área de superposición para garantizar la visualización de la imagen de fondo. Si quieres jugar seguro, usa max-device-width: 1366px. Sin embargo, el número de personas que usan estas tabletas gigantes es mucho menor que el número de personas con computadoras portátiles de pantalla pequeña.

Opción 2: prueba de eventos táctiles y eventos del mouse

Esta opción usa JS para probar si el navegador es compatible con la API de eventos táctiles y, por lo tanto, es más probable que no esté en un dispositivo de pantalla táctil (un dispositivo es más probable que no genere fondos fijos como invisibles). Esta es la opción de peso pesado. Requiere Modernizr y jQuery:

if(Modernizr.touch) {
  // this browser claims to support touch, so remove fixed background
  $(''#some_element'').css(''background-attachment'',''scroll'');
}

Desafortunadamente, esta opción también tiene un área gris. Algunos navegadores dan un falso positivo y otros dan un falso negativo. Podría probar un evento de mouse, como:

$(''body'').mousemove(function(event){
  // this device (touch or not) has a mouse, so revert to fixed background
  $(''#some_element'').css(''background-attachment'',''fixed'');
  $(''body'').unbind(''mousemove'');
});

Sin embargo, es posible que se haya conectado un mouse a una computadora portátil con pantalla táctil que no admita fondos fijos, por lo que el código aumenta el riesgo.

Answer 3

El soporte para cualquier valor de propiedad CSS se puede detectar a través de los siguientes pasos:

1. crear un elemento temporal (por ejemplo, DIV );
2. establezca el valor de su propiedad de style DOM ( element.style.backgroundAttachment en su caso) en valor para verificar ( fixed en su caso);
3. comparar el valor del style real con la cadena especificada.

Algo así en tu caso:

var elem = document.createElement(''div'');
elem.style.backgroundAttachment = ''fixed'';
var isSupported = ''fixed'' === elem.style.backgroundAttachment;

Answer 4

Puede mirar document.body.style y asegurarse de que

• hay una propiedad allí llamada "backgroundAttachment", y
• puede configurarlo en "fijo" y conserva su valor cuando lo hace.

Chrome, FF, Opera y Safari ignoran todos los intentos de establecer la propiedad en un valor no válido. IE9 lanza una excepción cuando lo intentas. Entonces, si cualquiera de los dos sucede, ese valor definitivamente no es compatible. (Si el navegador simplemente establece el valor a ciegas y lo retiene, es posible que aún no funcione. Pero en ese momento, realmente no puede el navegador decirle mucho de todos modos).

function supportsFixedBackground() {
    try {
        var style = document.body.style;
        if (!("backgroundAttachment" in style)) return false;
        var oldValue = style.backgroundAttachment;
        style.backgroundAttachment = "fixed";
        var isSupported = (style.backgroundAttachment === "fixed");
        style.backgroundAttachment = oldValue;
        return isSupported;
    }
    catch (e) {
        return false;
    }
}

Ya no me molesto con IE6, y no tengo otro navegador a la mano que no admita fondos fijos, por lo que no puedo probar la configuración "fijo".

Answer 5

http://www.w3schools.com/cssref/pr_background-attachment.asp

Hay fotos de los principales iconos del navegador un poco más abajo en la página. Las imágenes no están en gris para ninguno de los iconos. Se dice que es compatible con todos los navegadores.

Answer 6

fixed es compatible con todos los navegadores de escritorio, excepto IE6 y versiones anteriores.

Es compatible con la mayoría de los navegadores móviles, pero es posible que vea algunas discrepancias debido al manejo de las vistas.

Source