web-dev-qa-db-fra.com

IE9 prend-il en charge les dégradés linéaires CSS?

Avec Chrome/Safari et Firefox, il y a -webkit-gradient et -moz-linear-gradient Propriétés. Comment puis-je faire ce même genre de chose avec IE9?

css3internet-explorer-9
26
James Alexander

Eh bien, IE9 n'est pas encore terminé, mais jusqu'à présent, il semble que vous devrez utiliser SVG. Je ne connais aucun support -ms-gradient ou gradient dans IE9. L'autre chose qui manque jusqu'à présent et qui m'ennuie, c'est l'ombre du texte.

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

6
Chad Lundgren

La meilleure solution multi-navigateur est

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
goksel

La meilleure solution multi-navigateur concernant IE 9+, conforme à normes W3C (n'entraîne pas d'erreur dans validateur CSS =) est le suivant:

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 a introduit le préfixe du fournisseur -ms-filter la notation, c'est-à-dire conforme aux normes, a en même temps déconseillé les filtres propriétaires.

Ni -o- le préfixe du fournisseur est nécessaire, ni -ms- (comme IE 10 est le premier IE pour prendre en charge les gradients et il prend en charge la syntaxe des normes W3C) . Voir http://caniuse.com/#feat=css-gradients
Préférez les valeurs hexadécimales en couleur pour un meilleur gzipping, et indiquez clairement background-color et background-image au lieu de background, car cela pourrait entraîner des erreurs de rendu dans les navigateurs sans prise en charge du dégradé linéaire. En grande partie copié de ma réponse à cette question .

1
Volker E.