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

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

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

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

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

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

ブラウザの接頭辞

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);         /*ブラウザに機能が正式に実装されればこの一行で済む*/
}