HTML5:そろそろスッキリさせたい!CSS3 linear-gradient のベンダープレフィックス

CSS でグラデーションを描画する際に使用する linear-gradinet ですが、だいたいこのようなことになっているかと思います。(※IE6,7,8には対応していません)

.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 );
}

とりあえずこれらを、おまじないのように書いていればいいだろうと何年も放置したままだったので、一旦情報を整理して切り捨てるべき部分と、残していく部分の境界を決めたいと思います。

CSS3 linear-gradient のベンダープレフィックスについて

2つの-webkitプレフィックス

冒頭のサンプルコードを見て分かるように、グラデーション描画のための webkitベンダープレフィックス には -webkit-gradient() と -webkit-linear-gradient() の2つが存在します。
-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 のソースコードは以下のようになります。これでいきましょう!

.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);
}

まとめ

今更ですが、Chrome のバージョンを見るだけでも Google のブラウザに対する力の入れ具合が尋常ではないことが分かります。トップシェアを取るのにもそれなりの理由があるということですね。
Firefox も頑張って欲しいですが、こうなってくると難しいですね。かつての Netscape を思い出します。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents