IE10の仕様変更対応 CSSグラデーション

‘最近IE10がアップデートされてこれまで使っていたCSSのグラデーションが使えなくなった。

もともとIEのフィルタ機能を拡張するという特殊な仕様だったのを、推奨の形に改めた形である。

元々は、
以下のようにfilterをグラデーションに指定するが、
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#7C191E, endcolorstr=#561D21); /*IE6 IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#7C191E, endcolorstr=#561D21)”; /* IE8 */

今回は、background-imageをグラデーションに指定するという、 当たり前な方式になった。
background-image: linear-gradient(to bottom left, #7C191E 0%, #561D21 100%); /* IE9 IE10 */

色の指定の後のパーセントはその色の位置を表しています。
background-image: linear-gradient(to bottom left, #7C191E 0%, #FFFFFF 50%,#561D21 100%); /* IE9 IE10 */
とすると、3色のグラデーションが指定できます。


サイバーネット神戸の最新情報をお届けします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です