CSS3 ベンダープレフィックス
｜
目次
今回は今更ながらベンダープレフィックスについて書いてみます。
CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスなるものを付ける必要があるのです。
スポンサードリンク
拡張機能であることを示す識別子
ベンダープレフィックスとは、ブラウザ側が独自の拡張機能を実装したり、採用予定の機能を先行実装する場合に、 それが拡張機能であることをわかるようにする識別子のことです。時間が経過して仕様が変更される場合に備え、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。
| ベンダープレフィックス | ブラウザ |
|---|---|
| -ms- | Internet Explorer |
| -webkit- | Google Chrome、Safari |
| -moz- | Firefox |
| -o- | Opera |
使いたいCSSプロパティがどのブラウザでサポートされているか
どのベンダープレフィックス をつければいいのかを知るには下記サイトが便利です。http://caniuse.com/
赤が未対応 緑が対応 緑だけど右上に黄色の小さなマークがあるものは対応可能だけど何らかの方法が必要なものを表します。
ベンダープレフィックス無しの指定も併記しておくといい
ベンダープレフィックスは、 草案（Working Draft）が勧告候補（Candidate Recommendation）になったときには外すことが推奨されています。また、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなってしまうこともありますので注意が必要です。
ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する場合、 今後の仕様策定の進展やブラウザのバージョンアップに備えて、 ベンダープレフィックス無しの指定を一緒に書いておくといいと思います。
CSSは上から読まれていき、同列の詳細度の場合は、最後に書かれたプロパティがその結果となります。
上記に書いたようにベンダープレフィックスは、拡張機能や仕様を先行実装した機能であり、勧告候補になればベンダープレフィックスを外すことが推奨されています。サポートされたプロパティの方が優先するプロパティです。
ですから、サポートされたプロパティを最後に書いてください。
例
div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
最近の傾向
角丸を表現するborder-radiusプロパティはIE 9を含む全ての主要ブラウザで、ベンダープレフィックス無しで使えるようになりましたが、 変形に使う「transform」プロパティやボックスレイアウトの為の「flexbox」プロパティなど、一部のブラウザでは、まだまだベンダープレフィックスが必要のようです。ですから、これらのプロパティを使用する場合で、旧ブラウザにどうしても対応しないといけない場合にはベンダープレフィックスが必要です。
が、
ここまで書いといてアレですが、知識として知っておくとか、本当にクライアントが「どうしても必要」とか言わない限りは「こういう仕様です」でそのまま対応するほうがいいと思います。
もしくは自動でベンダープレフィックスを付けてくれるAutoprefixerを使うという手もあります。
スポンサードリンク
コメントを書き込む