ブラウザの先行・拡張機能を実装する機能「ベンダープレフィックス」

CSS

ベンダープレフィックスとは

HTMLやCSSなどは機能を追加する予定のものを草案として発表することがあります。 後々正式に勧告される可能性が高いので、ブラウザはこれらの機能を正式勧告に先行して実装することがあります。 またブラウザ側が独自の機能を実装することもあります。

こういった機能をCSSで実装する場合、機能の前に接頭辞を記述します。これをベンダープレフィックスといいます。

ベンダープレフィックスの指定例

ベンダープレフィックスを指定する際には、属性の前にブラウザの接頭辞を付けて機能を記述します。 対象を回転させるrotateプロパティにChromeとSafariのベンダープレフィックスを記述する場合、以下のようになります。

ブラウザの接頭辞

ブラウザ名接頭辞
GoogleChrome-webkit-
Safari
InternetExploler-ms-
FireFox-moz
Opera-o-
rorate {
  -webkit-transform: rotate(90deg); /*ChromeとSafari*/
}

またベンダープレフィックスは草案が勧告候補となったら外すことが推奨されています。 つまりベンダープレフィックスで機能を記述していても、実際に実装されると機能しなくなってしまうということです。 なのでベンダープレフィックスを付けたプロパティと、外したプロパティを併記することが推奨されています。

実際に記述する場合は以下のようになります。

rorate {
  -webkit-transform: rotate(90deg); /*ChromeとSafari*/
  -ms-transform: rotate(90deg);     /*IE*/
  -moz-transform: rotate(90deg);    /*Firefox*/
  -o-transform: rotate(90deg);      /*Opera*/
  transform: rotate(90deg);         /*BPが外れた時のための記述*/
}

ベンダープレフィックスはブラウザに機能が正式に実装されれば役目を終えます。 その時には記述を削除しましょう。

rorate {
  transform: rotate(90deg);         /*ブラウザに機能が正式に実装されればこの一行で済む*/
}
eyecatch

セレクタとプロパティの基本

eyecatch

CSSのスタイルの優先順位

CSSの記事

eyecatch

要素セレクタで条件下の要素のスタイルを変える方法

eyecatch

ブロックレベル要素とインライン要素

eyecatch

CSSとは

eyecatch

CSSでアニメーションを設定する

eyecatch

ボックスモデルとマージン・パディング

eyecatch

CSSのスタイルの優先順位

CSSの記事一覧HOME