コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

CSSにおけるVendor Prefixとはどういうもので、何があるのかざっくりまとめる

非常にググりにくい -moz--webkit- などがつくCSSの要素についてざっくりまとめる

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

MDNには以下のような記載がある

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

このようにブラウザベンダー(ChromeFirefoxなど)がブラウザ特有な記述を追加する際にわかりやすくつけるようなprefix

Vendor Prefixの代表的なもの

prefix 対応するもの
-webkit- WebKit ベースのブラウザのだいたい(Chrome/Safari)
-moz- Firefox
-o- WebKit 導入前の古い Opera
-ms- Internet ExplorerMicrosoft Edge

カバーをするための方法

ベンダープレフィックスを使うこと自体がよろしくないという風潮はあるようではある(関連リンク参照)ので、減少する傾向にはありそうですが、まだ各ブラウザ間で使われている現状はある。

ただ、AutoPrefixerというプラグインがあり、こちらは対応したいブラウザを明示すればprefixが必要な場合に適宜当てたものを出力してくれる。

関連リンク