🖥

ベンダープレフィックスについて調べてみた

2022/07/10に公開

CSS

はじめに

普段cssをそれほど触らないこともあり、cssのベンダープレフィックス（-webkit- とか -moz-)についてよくわかっていなかったので調べてみました。

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

ブラウザーベンダー (提供元) は、時に試験的または非標準な CSS プロパティおよび JavaScript API に接頭辞を追加することがあります。これにより、開発者は標準化プロセスの中で、理論上は、ウェブ開発者のコードを壊すことなく新しいアイデアを試すことができます。

引用:https://developer.mozilla.org/ja/docs/Glossary/Vendor_Prefix

要するにブラウザで標準化されていない非標準のCSSプロパティを使用する場合に、プレフィックスを追加することで利用できるようになるということです。
ベンダープレフィックスはブラウザによって形式が異なっており、主なプレフィックスと対応ブラウザは以下になります。

※詳しくは後述。

ベンダープレフィックス	ブラウザ	備考
-webkit-	Chrome, Safari, Opera(バージョン15以降), MicrosoftEdge(Chromium採用以降), ほぼすべての iOS ブラウザー (Firefox for iOS を含む)	-
-moz-	Firefox	-
-o-	Opera(バージョン15以前)	Operaはバージョン15(2013年2月13日リリース)からChromiumベースに作り直し、レンダリングエンジンもwebkitに変更。よって現在はあまり使われない。
-ms-	InternetExplorer , MicrosoftEdge(Chromium採用前)	InternetExplorerは2022年6月15日にサポート終了。, MicrosoftEdgeは2020年1月15日にChromiumを採用。よって現在はあまり使われない。

ベンダープレフィックスの使用例

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

ベンダープレフィックスとレンダリングエンジンの関係

ベンダープレフィックスがブラウザごとに違うのはレンダリングエンジンと関係があります。
レンダリングの仕組みについてはWebブラウザのレンダリングの仕組みを理解するの記事が参考になりました。

ベンダープレフィックスとレンダリングエンジンの歴史について、調べた範囲で軽く触れていきます。

各ブラウザとレンダリングエンジンの歴史

以前はそれぞれのブラウザで異なるレンダリングエンジンを採用していた様です。
主要ブラウザがそれぞれ別のレンダリングエンジンを採用していたがために、ベンダープレフィックスも多くありました。

以前のレンダリングエンジンとブラウザ

ブラウザ	レンダリングエンジン	ベンダープレフィックス
Chrome	Webkit	-webkit-
Safari	Webkit	-webkit-
Opera	Presto	-o-
Firefox	Gecko	-moz-
InternetExplorer	Trident	-ms-
MicrosoftEdge	EdgeHTML	-ms-

Chromiumの導入

Chromiumを採用するブラウザが増えたことで、徐々にレンダリングエンジンも統一されていきました。
ChromiumはChromeのブラウザを作成するベースにもなっているため、レンダリングエンジンにはWebkitが使用されていました。

まずは2013年2月13日にOperaがChromiumベースに乗り換え、2020年1月15日にMicrosoftEdgeがChromium版をリリースしました。
これにより主要ブラウザで使用されるレンダリングエンジンからPrestoとEdgeHTMLが消えることになりました。

2022年6月15日にはInternetExplorerのサポートが終了しました。
これによりベンダープレフィックスから -o-,-ms- が使用されることはほぼなくなります。

後にChromiumはレンダリングエンジンをWebkitからBlinkに乗り換えます。
BlinkはWebkitからフォークされたレンダリングエンジンなのでベンダープレフィックスは -webkit- が使用できます。

この様な背景から、現在の主要なブラウザとレンダリングエンジンは以下の様になっています。

現在のレンダリングエンジンとブラウザ

ブラウザ	レンダリングエンジン	ベンダープレフィックス
Chrome	Blink	-webkit-
Safari	Webkit	-webkit-
Opera	Blink	-webkit-
Firefox	Gecko	-moz-
InternetExplorer	Trident	-ms-
MicrosoftEdge	Blink	-webkit-

これからの開発においては -webkit- と -moz- のみ意識することになりそうです。

ベンダープレフィックスの必要性の調査

ベンダープレフィックスをつける前に、-webkit- と -moz- が必要なプロパティかどうかを調査する必要があります。

MDNで確認

基本的にはMDNでプロパティを調べると、ブラウザの互換性の欄に「どのブラウザでサポートされているか」や「どのベンダープレフィックスが必要か」まで記載されています。

Can I Use... で確認

他にもCan I Use ...を利用するのも便利です。(会社の人に教えてもらいました)
確認したいプロパティ名を入力するだけて各ブラウザのサポート状況やベンダープレフィックスが必要かを表示してくれます。
バージョンごとにまとめられた表があるので、こちらの方がUI的に確認しやすいです。

おわりに

ベンダープレフィックスについて調べることでブラウザの歴史やレンダリングエンジン採用の歴史について少し理解が深まった気がします。
一方でそもそもベンダープレフィックスが必要な状況に違和感も感じました。

ブラウザーベンダーは、実験的な機能にベンダー接頭辞をつけることをやめるようになってきています。ウェブ開発者は、実験的な機能であるにもかかわらず、実運用のウェブサイトで使用し続けてきました。これはブラウザーベンダーが互換性を維持して、新しい機能を導入することを困難にしてしまいました。これはシェアの小さなブラウザーにとっても有害で、有名なウェブサイトを読み込むために他のブラウザーの接頭辞を追加せざるを得ない結果になりました。