トップページ  > CSSの基本  > CSSのバージョン

★ベンダープレフィックス

広告

■ベンダープレフィックス

先頭に付ける-moz-や-webkit-など

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。

例えば、border-imageプロパティで画像ボーダーを機能させるには、 FirefoxやGoogle Chromeなどのそれぞれのブラウザ向けのベンダープレフィックスを付ける必要があります。

-moz-border-image: url("bg_dot.png") 15 round;     // Firefox向け
-webkit-border-image: url("bg_dot.png") 15 round;   // Google Chrome、Safari向け

拡張機能であることを明示するための識別子

ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。

将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。 ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子(vendor identifier)でブラウザの種類を特定します。

主要ブラウザのベンダープレフィックス
-moz-  …… Firefox
-webkit- …… Google Chrome、Safari
-o-    …… Opera
-ms-   …… Internet Explorer

ベンダープレフィックス無しの指定も併記する

CSS3が勧告されるまでには、まだ時間が掛かることが予想されますが、 今後審議を重ねる中で仕様変更・一部機能の廃止・新機能の追加が行われる可能性があります。 ベンダープレフィックスは草案段階の機能を実装する際に付けることが推奨されているので、 これらの機能を利用する際には当面ベンダープレフィックスを付ける必要があるでしょう。

ただし、ベンダープレフィックスは、 草案(Working Draft)が勧告候補(Candidate Recommendation)になったときには外すことが推奨されています。 すでにGoogle ChromeやFirefoxなどのブラウザでは、CSS3の機能の一部がベンダープレフィックス無しで動作するようになっています。 また、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあります。

ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、 今後の仕様策定の進展やブラウザのバージョンアップに備えて、 ベンダープレフィックス無しの指定を併記しておくほうが良いでしょう。

border-image: url("bg_dot.png") 15 round;         //ベンダープレフィックス無し(標準)も併記する
-moz-border-image: url("bg_dot.png") 15 round;     // Firefox向け
-webkit-border-image: url("bg_dot.png") 15 round;   // Google Chrome、Safari向け
<前へ 記事一覧へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ