CSS: Gradientes simples en Internet Explorer <= 8

Question

Como estoy seguro de que todos ustedes saben, Internet Explorer puede manejar degradados simples. Aquí hay un fragmento de Twitter Bootstrap, por ejemplo:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); 

Sin embargo, he visto algunas personas usan dos reglas CSS (una para IE 8 < y uno para IE 8), así:

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f'); /* For Internet Explorer 5.5 - 7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f')"; /* For Internet Explorer 8 */ 

Mi pregunta es, ¿es realmente necesaria la segunda regla? Twitter Bootstrap es bastante minucioso, pero no usa ninguna regla de "filtro dems". De acuerdo con this page, el atributo -ms-filter es una extensión de CSS y se puede usar como sinónimo de filter en el modo de estándares IE8.

Answer 1

Mi sugerencia:

Uso CSS3Pie - http://css3pie.com/

Esta es una biblioteca JavaScript para IE6, IE7 e IE8 que los parches en apoyo a varias características de CSS3, incluyendo gradientes.

Sí, puede utilizar los horribles estilos específicos de IE filter si lo desea, pero CSS3Pie le permite usar estilos CSS estándar para estas funciones. Más fácil.

Para responder realmente su pregunta directa:

Sí, generalmente se requiere el estilo -ms-filter. IE8 siempre nos lo usará en lugar de filter, que se usa principalmente para IE6 e IE7. En algunos casos, filter funcionará en IE8, pero no en todos, por lo que es mejor usar -ms-filter para garantizar la compatibilidad con IE8.

[EDITADO] ¿Por qué lo cambiaron? Porque cuando lanzaron IE8, Microsoft hizo un gran esfuerzo por tratar de ser "compatible con los estándares".

Para que un navegador sea estándar, debe usar un prefijo de proveedor para cualquier propiedad CSS compatible que no sea un estándar W3C finalizado. Entonces, al agregar el prefijo -ms-, Microsoft intentaba (tardíamente) deshacer la contaminación del espacio de nombres CSS global.

Además, se agregaron las comillas, porque la antigua sintaxis filter sin las comillas era CSS no válido (principalmente debido a los dos puntos después de progid) y causaba problemas con algunos navegadores. (Tuve una instancia hace un tiempo con Firefox 3.6 donde se descartaban todos los estilos siguiendo un estilo filter que rotaba un elemento; tardaba años en resolverse lo que estaba sucediendo).

El hecho de que Microsoft conservó la compatibilidad con la sintaxis original filter, fue en gran medida una cuestión de pragmatismo. MS no podía darse el lujo de romper todos los sitios usando la sintaxis anterior. Pero hubo una fuerte implicación de Microsoft de que los desarrolladores deberían usar ambos porque soltarían soporte para el viejo estilo filter en versiones posteriores de IE. Resultó que retiraron el soporte para filter y -ms-filer de un solo golpe, pero las implicaciones dadas en el lanzamiento de IE8 fueron suficientes para que se convirtiera en una práctica recomendada para proporcionar ambas sintaxis en su hoja de estilo.

En el momento en que se lanzó IE8, XHTML era el nuevo sabor del mes, y el código de escritura que se validó perfectamente fue uno de los primeros en la lista para muchos desarrolladores. Esta fue probablemente una fuerte fuerza impulsora en el cambio de sintaxis para incluir las comillas. Debido a los dos puntos, es imposible escribir CSS que valide el uso del antiguo estilo filter. El uso de los nuevos estilos -ms-filter permitió a las personas escribir CSS válidos. A medida que las buenas ideas van, esta realmente no funcionó porque, por supuesto, la gente tenía que seguir usando la sintaxis antigua de todos modos, pero la intención era buena.

Vale la pena señalar que otros estilos propietarios recibieron el mismo tratamiento. Por ejemplo, puede usar -ms-behavior en IE8 en lugar del antiguo estilo behavior. Nadie lo usa. ¿Por qué? Realmente no lo sé

Otro hecho que vale la pena saber es que el W3C está en el proceso de estandarizar un CSS property called filter. Hará un trabajo completamente diferente al estilo Microsoft filter, y funcionará de manera completamente diferente. Si/cuando está estandarizado y los navegadores comienzan a soportarlo, habrá un choque explícito entre las dos sintaxis.

Answer 2

Parece que ha respondido a su propia pregunta. Sí, son necesarios. Microsoft tratando de alinearse más con los estándares significa que algunas versiones de IE tienen sus propias reglas de sintaxis ligeramente diferentes para la propiedad del filtro.

En IE7 solo filter: seguido de progid:DXIma... etc. funcionará. Pero para IE8 + existe la alternativa de IE7 que puede usarse en modo de compatibilidad, y la propiedad de prefijo -ms- más adecuada para el filtro, que denota una propiedad css específica del proveedor, y su valor dentro de los qoutes.

Answer 3

¿Qué daño le haría dejarlo?

Si el navegador no entiende la línea de CSS, simplemente la ignorará.

Esas dos líneas de CSS son casi idénticas. Me atrevería a suponer que Microsoft decidió cambiar la sintaxis de CSS propietario de IE8 en adelante utilizando el prefijo - (guión) que otros navegadores han estado utilizando para yonks.

Técnicamente, el CSS no es compatible con W3C de ninguna manera, por lo que otra línea de CSS propietario no puede hacer daño.

¡No vale la pena tratar de entender IE en el mejor de los casos!