web-dev-qa-db-ja.com

IE9はCSS線形グラデーションをサポートしていますか？

Chrome/SafariとFirefoxには-webkit-gradientおよび-moz-linear-gradient プロパティ。 IE9でこれと同じようなことができますか？

css3internet-explorer-9
26
James Alexander

IE9はまだ完成していませんが、これまでのところ、SVGを使用する必要があるようです。 IE9での-ms-gradientまたはgradientのサポートについては知りません。今のところ私が悩んでいるもう一つの欠けているものは、テキストの影です。

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

6
Chad Lundgren

最適なクロスブラウザソリューションは

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

IE 9+に関する最良のクロスブラウザソリューションは、 W3C規格 （ CSSバリデーター ）でエラーになりません）以下：

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は、ベンダープレフィックス-ms-filter表記を導入しました。これは標準に準拠していると同時に、独自のフィルターを非推奨にしました。

-o-ベンダープレフィックスも-ms-も必要ありません（IE 10はグラデーションをサポートする最初のIEであり、 W3C標準構文をサポートしています）。 http://caniuse.com/#feat=css-gradients を参照してください
gzipを改善するために小文字の16進数のカラー値を優先し、backgroundではなくbackground-colorおよびbackground-imageを明確に指定します。 。大規模にコピー この質問に対する私の回答から 。

1
Volker E.