¿IE9 soporta gradientes lineales CSS?


Con Chrome/Safari y Firefox están las propiedades -webkit-gradient y -moz-linear-gradient. ¿Cómo puedo hacer este mismo tipo de cosas con IE9?

Author: Paul D. Waite, 2011-02-10

3 answers

Bueno, IE9 no está hecho todavía, pero hasta ahora parece que vas a tener que usar SVG. No soy consciente de cualquier-ms-gradiente o soporte de gradiente en IE9. La otra cosa que falta hasta ahora que me molesta es la sombra de texto.

Http://css3wizardry.com/2010/10/29/css-gradients-for-ie9 /

 6
Author: Chad Lundgren,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-10 19:35:02

La mejor solución entre navegadores es

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/ 
 62
Author: goksel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-16 00:16:54

La mejor solución cross-browser con respecto a IE 9+, que se ajusta a los estándares W3C (no da lugar a un error en CSS validator) es la siguiente:

background-color: #fff; /* Browsers without linear-gradient support */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */    
background-image:    -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */   
background-image:         linear-gradient(#fff 0%, #000 100%); /* W3C */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";

.gradient--test { 
    background-color: #fff; /* Browsers without linear-gradient support */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #000)); /* Chrome, Safari 4+ */
    background-image: -webkit-linear-gradient(#fff 0%, #000 100%); /* Chrome 10+, Safari 5.1+ */    
    background-image:    -moz-linear-gradient(#fff 0%, #000 100%); /* Fx 3.6+ */   
    background-image:         linear-gradient(#fff 0%, #000 100%); /* W3C */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#000000')";
}
.gradient--test {
  width: 61.8%;
  height: 200px;
 }
<div class=gradient--test></div>  

IE 9 introdujo el prefijo de proveedor -ms-filter notación, es decir, de acuerdo con los estándares, al mismo tiempo obsoleto los filtros propietarios.

Ni -o- prefijo de proveedor es necesario, ni -ms- (como IE 10 es el primer IE para soportar degradados y soporta la sintaxis de los estándares W3C) . Véase http://caniuse.com/#feat=css-gradients
Prefiera valores de color hexadecimal en minúsculas para un mejor gzip, y establezca claramente background-color y background-image en lugar de background, porque podría resultar en errores de representación en navegadores sin soporte de gradiente lineal. Copiado en gran parte de mi respuesta a esta pregunta.

 1
Author: Volker E.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-14 05:00:53