CSSについて調べたときに「-webkit-」や「-moz-」などを見かけたことがありませんか。この「-webkit-」などのことを「ベンダープレフィックス」といいます。
この記事ではCSS3を扱う上で理解しておくべき、ベンダープレフィックスについて紹介します。
ベンダープレフィックスとは
ベンダープレフィックスは、CSSのプロパティや値の前に記述する識別子です。ブラウザでサポートされていない独自の拡張機能を実装するとき、または草案段階の仕様を先行実装するときに使用されます。これをブラウザごとに記述することで、それが拡張機能であることを明示することができます。
-webkit-…Google ChromeやSafariなどのブラウザに対応
moz-…Firefoxなどのブラウザに対応
-o-…Operaなどのブラウザに対応
-ms-…Internet Explorerなどのブラウザに対応
上記のように、前後に「-」を付けてブラウザの種類を特定します。
Web制作においては、正しい表示のサイトを見てもらうためにこれらのブラウザに対応することが求められます。
ベンダープレフィックスを使用する際の注意点
ベンダープレフィックスを使用する際は、必ず最後にベンダープレフィックスがつかないプロパティも記述してください。
これは、CSSの機能が「草案」から「勧告候補」になり、ベンダープレフィックスを記述しないと利用できなかったプロパティが、わざわざ記述をしなくてもサポートされるようになる場合があるからです。そのときにベンダープレフィックスの記述しかされていないと、ブラウザが正しく動作しなくなってしまうことがあります。
ベンダープレフィックスがつかないプロパティを最後に記述することで、上の指定がブラウザに無視されたとしても、下の指定によって正しく表示することができます。
ベンダープレフィックスは記述するべきか
Google ChromeやFirefoxなどのブラウザでは、CSS3の各機能が徐々にサポートされるようになっています。よく使われるCSS3プロパティは、今ではベンダープレフィックスをつける必要のないものがほとんどです。
しかし、ブラウザのサポート状況によってプロパティの対応状況が異なるため、これは個別に確認していただくしかありません。サポート状況を確認しながら、ベンダープレフィックスをつけるべきか判断していきましょう。
