初心者なら絶対に知っておきたいベンダープレフィックスのこと

CSSのプロパティの前に「-webkit-」や「-ms-」などを付いているのを見かけたことがあると思います。プロパティの前に付いたこの記号のようなものがベンダープレフィックスというもので、CSS3が使用され始めた2018年頃のCSSファイルにはたくさんのベンダープレフィックスが付いていました。

2023年5月現在ではこういったベンダープレフィックスを付けることは少なくなってきたためウェブスクールでも説明を省くことが多くなってきましたが、改めて知識として知っておくことも大切です。

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

ベンダープレフィックスとは、ベンダー(＝販売業者)とプレフィックス(＝接頭辞)を合わせた言葉で、GoogleやMozilla、Microsoftなどブラウザを開発している会社(ベンダー)が独自に採用したCSSの機能を有効にするための特別な識別子のことです。

…と、説明すると難解ですが、簡単に言えばCSSのプロパティの先頭に付ける暗号のようなものです。

例えば下記のようなコードがあったとします。

div {
position:sticky;
}

このposition:sticky;というプロパティをMozillaというベンダーが初めて採用したとして、他の会社はまだ開発途中だったとします。

こういうとき、MozillaのFirefoxにposition:sticky;を使うには、下記のようなベンダープレフィックスを付けたコードを使います。

div {
-moz-position:sticky;
}

こうしておくことで、position:sticky;はMozillaのFirefoxでアクセスされたときのみに有効になるというわけですね。

CSSのプロパティはブラウザの開発状況で利用できるか否かが分かれるため、新たなプロパティを使うにはこのベンダープレフィックスが必須となっています。

Can I use…では、ブラウザのバージョンによってどんなプロパティが利用できるか調べることができます。

例えば上記のposition:sticky;ですが、Google Chromeではバージョン113で完全に利用できるようになっていて、2023年5月現在では全世界で96.89%のブラウザで利用ができると分かります。

ベンダープレフィックスには下記の種類があります。

ベンダープレフィックス	ブラウザ
-webkit-	Google Chrome、Apple Safari
-moz-	Mozilla Firefox
-ms-	Microsoft Internet Explorer、Microsoft Edge
-o-	Opera

かつてのインターネットを席巻していたMicrosoft Internet Explorerは2023年2月14日に廃止されたので実質はEdgeのみになっているほか、Operaも開発環境が変わったため古いバージョンのみになっています。

CSSのプロパティがブラウザごとで挙動が異なる場合は、まず使用しているプロパティが利用しているブラウザに対応しているかをCan I use…で調べて、ベンダープレフィックスが必要な場合には適宜使用するようにしておきましょう。