css3 - tipos - ¿Es IE9 compatible con gradientes lineales de CSS?

gradiente lineal en css

Question

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

Answer 1

Bueno, IE9 aún no está hecho, pero hasta ahora parece que vas a tener que usar SVG. No estoy al tanto de ningún soporte de gradiente o -ms en IE9. La otra cosa que falta hasta ahora y que me molesta es la sombra de texto.

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

Answer 2

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*/ 

Answer 3

La mejor solución entre navegadores para IE 9+, que cumple con los estándares W3C (no da como resultado un error en el validador CSS ) 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, que está de acuerdo con los estándares, al mismo tiempo, desaprobó los filtros propietarios.

Ni -o- prefijo de proveedor es necesario, ni -ms- (ya que IE 10 es el primer IE en admitir gradientes y admite la sintaxis de los estándares W3C) . Ver http://caniuse.com/#feat=css-gradients
Prefiera los valores de color hexadecimal en minúsculas para una mejor compresión gz, y especifique claramente el background-color background-image de background lugar de background , ya que podría dar lugar a errores de representación en buscadores sin soporte de gradiente lineal. Copiado en gran parte de mi respuesta para esta pregunta .