CSS でグラデーションを描画する際に使用する linear-gradinet ですが、だいたいこのようなことになっているかと思います。（※IE6,7,8には対応していません）
[code]
.gradient-sample {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #ffffff 0%,#000000 100%);
background: -o-linear-gradient(top, #ffffff 0%,#000000 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#000000 100%);
background: linear-gradient(to bottom, #ffffff 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff’, endColorstr=’#000000′,GradientType=0 );
}
[/code]
とりあえずこれらを、おまじないのように書いていればいいだろうと何年も放置したままだったので、一旦情報を整理して切り捨てるべき部分と、残していく部分の境界を決めたいと思います。
CSS3 linear-gradient のベンダープレフィックスについて
2つの-webkitプレフィックス
冒頭のサンプルコードを見て分かるように、グラデーション描画のための webkitベンダープレフィックス には -webkit-gradient() と -webkit-linear-gradient() の２つが存在します。
-webkit-gradient() のほうが古く、-webkit-linear-gradient() が新しいwebkitベンダープレフィックスとなります。
最終的にこれらのベンダープレフィックスは linear-gradient に統一されると思うのですが、
次にこれらのプレフィックスが各ブラウザの、どのバージョンに対応しているかをみてみます。
ブラウザごとの linear-gradient とベンダープレフィックスのサポート状況
- IE
- IE10からサポート
- Chrome
-
Chrome3-9：-webkit-gradient()で先行実装
Chrome10-25：-webkit-linear-gradient()で先行実装
Chrome26以降：linear-gradient をサポート - Firefox
- Firefox3.6-15：-moz-のベンダー識別子で先行実装
Firefox16(2012.10リリース)以降：linear-gradient をサポート - Safari
- safari4.0-5.0：-webkit-gradient()で先行実装
safari5.1から6.0：-webkit-linear-gradient()で先行実装
safari6.1, Safari7.0以降：linear-gradient をサポート - Opera
- Opera11.1-12.0：-o-のベンダー識別子で先行実装
Opera12.1, Opera15以降(2013.7リリース)：linear-gradient をサポート - iOS
- iOS3.2-4.3：-webkit-gradient()で先行実装
iOS5.0-6.1：-webkit-linear-gradient()で先行実装
iOS7.0以降：linear-gradient をサポート - Android
- Android2.1-3.0：-webkit-gradient()で先行実装
Android4.0以降：-webkit-linear-gradient()で先行実装
linear-gradient のサポートは未だなし
切り分けるポイント
- -moz-linear-gradient
- Firefox は早い段階で linear-gradient を実装していること、最近のシェア比率の低さから -moz-linear-gradient は必要なし。
- -webkit-gradient
- Safari4.0-5.0、Chrome4.0-9.0、iOS4.0.4-5.0、Android 2.1-3.0等に対応するなら必要。バージョンのシェアが低いため切り捨てても問題ないが Android のことを考慮し保留。
- -webkit-linear-gradient
- iOS はともかく Android のことを考えると linear-gradient がサポートされるまでは -webkit-linear-gradient に関しては保留。
- -o-linear-gradient
- Opera に関しても Firefox 同様の考えから -o-linear-gradient は必要なし。
- -ms-linear-gradient
- また、-ms-linear-gradient は対応するブラウザが現在存在しないこと、IE10以降で linear-gradient がサポートされたことから削除。
- filter:
- filter: に関しては IE6-9 でグラデーション実現のために使用するものですが、filterを適用されたボックスは overflow:hidden となるため、子要素をはみ出すことができない、3色以上のグラデーションが効かない等の問題があるため、切り捨てます。さらばIE。
結論
以上のことから、CSS のソースコードは以下のようになります。これでいきましょう！
[code]
.gradient-sample {
background : -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
background : -webkit-linear-gradient(top, #fff, #000);
background : linear-gradient(to bottom, #fff, #000);
}
[/code]
まとめ
今更ですが、Chrome のバージョンを見るだけでも Google のブラウザに対する力の入れ具合が尋常ではないことが分かります。トップシェアを取るのにもそれなりの理由があるということですね。
Firefox も頑張って欲しいですが、こうなってくると難しいですね。かつての Netscape を思い出します。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
