¿Admite la propiedad 'tamaño de fondo' en los navegadores más antiguos?

Question

¿Hay alguna manera de usar la propiedad CSS3 'Background-Size' y luego usar algo como Modernizr para garantizar que sea compatible con navegadores antiguos (en particular, quiero usar la opción 'background-size: cover')?

Eché un vistazo a cssFx, que se menciona en el sitio web de Modernizr, pero parece que solo agrega prefijos de proveedor para los navegadores que necesitan usar una propiedad, en lugar de permitir navegadores como IE8 para admitir la propiedad de tamaño de fondo .

También se miró CSS3Pie, pero parece que actualmente no admite la propiedad de fondo.

[11/10/2011 - Por navegadores antiguos que estoy pensando sobre todo de Internet Explorer 7/8, pero lo ideal es que me gustaría cubrir FF3.6, etc.]

Answer 1

Creo que es probable que desee utilizar Modernizr para verificar si la propiedad es compatible o no con el navegador actual. Si no, intente descubrir una pantalla alternativa de su sitio/aplicación que aún se vea bien sin la necesidad de la propiedad de fondo.

Por supuesto, también puede probar otro enfoque que no involucre esta propiedad en absoluto como un div subyacente con una imagen (que puede tamaño) y el contenido que se superpone a este div. Buena suerte.

Answer 2

Tiene razón de que background-size no es compatible con una serie de navegadores anteriores.

La solución típica para esto es simularlo usando un elemento adicional <div> o incluso un elemento <img> ubicado detrás del elemento que desea que tenga el fondo.

Esto se puede lograr simplemente mediante el uso de marcado adicional, pero esta solución tiene la desventaja de que significa que la utilizará para todos los navegadores, en lugar de la propiedad background-size. En otras palabras, significa degradar deliberadamente tu código por el bien de los navegadores antiguos, lo cual no es ideal.

Si desea utilizar la propiedad CSS para navegadores compatibles, puede usar un poco de Javascript para generar el marcado anterior, pero solo si es necesario. Esto significa que los navegadores modernos pueden usar felizmente background-size, y solo los navegadores más antiguos usarán el respaldo.

Hay una serie de soluciones de Javascript disponibles en la web (un google rápido presentó lo siguiente: http://css-tricks.com/766-how-to-resizeable-background-image/ entre otros), pero lo más importante es que necesita saber cómo activarlo en función del navegador.

Aquí es donde entra Modernizr. La descripción que ha dado de Modernizr en la pregunta no es del todo precisa. Lo que hace es producir un conjunto de clases CSS en su marcado HTML y variables coincidentes en su Javascript que representan todas las características del navegador. Estos son indicadores booleanos que indican si el navegador actual es compatible.

De modo que con Modernizr puede verificar en Javascript si el navegador admite background-size o no, y solo ejecutar la función javascript alternativa si no lo admite.

if(!Modernizr.backgroundsize) { 
    //do stuff here to simulate the background-size property for older browsers. 
} 

Espero que ayude.

Answer 3

Primero que nada, hay una solución fácil para Firefox 3.6.Hay un prefijo de proveedor:

-moz-background-size 

Con respecto al utilizar una solución de preguntas de los medios: Se podría utilizar Modernizr para apuntar otra imagen para cuando los usuarios están viendo los navegadores más antiguos, esto significaría otra petición del navegador. Sin embargo, es de suponer que va a cargar imágenes más pequeñas para cada consulta donde el tamaño de la pantalla se hace más pequeño. Debido a que Modernizr creará una situación en la que se ignorarán estas solicitudes en los navegadores más nuevos, reducirá las solicitudes de servidor para la mayoría de las personas que utilizan los navegadores más nuevos.

Por curiosidad, probé la solución anterior y funcionó. Apliqué las siguientes clases de modernizr como: .no-backgroundsize para soporte de fondo no es decir y cargado en una nueva imagen. Para todos los demás navegadores agregué la clase .backgroundsize e incluí la mención de prefijo en la parte superior para FF. Esto podría repetirse para cada consulta de medios con una nueva imagen para .no-background. Esta es una forma de resolver el problema.

-I edité esta publicación después de que probé 12/15/12.

Answer 4

Se puede ver el apoyo para el fondo de tamaño y sus propiedades en: http://www.standardista.com/css3/css3-background-properties

Este CSS es compatible con IE9 +, Firefox 3.6+, Safari, Chrome:

background-size: cover; 
-moz-background-size: cover; 

Para Internet Explorer 7/8 de apoyo, caniuse.com listas este polyfill: https://github.com/louisremi/background-size-polyfill

Answer 5

Otra opción sería Background Size Polyfill:

.selector { 
    background-size: cover; 
    /* The url is relative to the document, not to the css file! */ 
    /* Prefer absolute urls to avoid confusion. */ 
    -ms-behavior: url(/backgroundsize.min.htc); 
} 

Answer 6

mejor muestra para apoyar mejor:

background-image: url(bg-image.png); 

     -webkit-background-size: 100% 100%;   /* Safari 3.0 - Old Chrome - Old Android */ 
     -moz-background-size: 100% 100%;   /* Gecko 1.9.2 (Firefox 3.6) */ 
      -o-background-size: 100% 100%;   /* Opera 9.5 */ 
       background-size: 100% 100%;   /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ 

no añada por esto, porque hizo un problema en las nuevas versiones de Firefox:

-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) 

Fuente: mozilla.org