CSS入門 | CSS3モジュール | ベンダープレフィックス(Vendor Prefix)

ベンダープレフィックス(Vendor Prefix)

世界的によく使われているWebブラウザには、Internet Explorer、Chrome、Firefox、Safari、Operaなどがある。

ベンダープレフィックスとは、主要なWebブラウザの提供元が新しい実験的な機能を提供するときに、そのことを旧バージョンのWebブラウザへ知らせるために使う接頭辞である。つまり、まだCSS勧告に含まれていない機能、またはCSS勧告には含まれているがまだ完全に標準化されていない機能を使いたい場合に、ベンダープレフィックスを使用する。これにより、その機能が含まれていない古いWebブラウザでも、その機能を利用できるようになる。

主要Webブラウザのベンダープレフィックス

主要なWebブラウザで使用されているベンダープレフィックスは次のとおりである。

ChromeとSafariは同じWebKit系ブラウザなので、同じベンダープレフィックスを使用する。

<style>
    .button {
        background: red;          <!-- gradientプロパティをサポートしないすべてのブラウザ向けのコード -->
        background: -webkit-linear-gradient(red, yellow); <!-- ChromeとSafari 4.0以降向けのコード -->
        background: -moz-linear-gradient(red, yellow);    <!-- Firefox 3.6以降向けのコード -->
        background: -ms-linear-gradient(red, yellow);     <!-- Internet Explorer 10.0以降向けのコード -->
        background: -o-linear-gradient(red, yellow);      <!-- Opera 10.0以降向けのコード -->
        background: linear-gradient(red, yellow);         <!-- CSS標準構文のコード -->
    }
</style>

上の例で最初に出てくるbackgroundプロパティは、gradientプロパティをサポートしていないすべてのブラウザのためのものである。また、最後に出てくるbackgroundプロパティはCSS標準構文で書かれたコードである。CSS標準構文のコードは、ベンダープレフィックスで書かれたコードがすべて出た後に記述してこそ、ベンダープレフィックスを含むコードが正常に動作する。

このようなベンダープレフィックスは、実験的な機能がCSS標準勧告に含まれるか、完全に標準化された状態になれば、使う必要がなくなる。