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

スタイルシートを見ていると、「-wiebkit-」、「-moz-」、「-ms-」などの文字を見かけることがあります。 これがベンダープレフィックスで、接頭辞ともいいます。

ブラウザベンダーが独自に拡張したプロパティや、 草案段階にあるプロパティを試験的に実装する場合に、 「-wiebkit-」、「-moz-」、「-ms-」などのベンダープレフィックスをプロパティの前に付けます。

つまりベンダープレフィックスとは、 ブラウザ独自のプロパティや、 草案段階のプロパティの前に付ける 「-wiebkit-」、「-moz-」、「-ms-」などの「識別子」のことです。

ベンダープレフィックスとブラウザの関係

ベンダープレフィックスとブラウザの関係は以下のようになっています。

ベンダープレフィックスブラウザ
-ms-Internet Explorer
-moz-Firefox
-webkit-Chrome, Safari, Android, Opera(新しいバージョン)
-o-Opera(古いバージョン)

具体的には次のようにベンダープレフィックスを記述します。


-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transfrom: scale(1.2);
transform: scale(1.2);

ベンダープレフィックスを必要とするプロパティを記述する場合でも、 仕様通りの記述(ベンダープレフィックスのない記述)を併記します。 (上の例の場合は「transform: scale(1.2);」を併記します)

ベンダープレフィックスは、W3Cで策定される仕様が「草案」から「勧告候補」になったときに外すことが 望ましいとされています。W3C で策定される仕様の流れは通常次のようになります。

「編集者草案」 ⇒ 「草案」 ⇒「 最終草案」 ⇒ 「勧告候補」 ⇒ 「勧告案」 ⇒ 「勧告」

HTML・CSS入門