非常にググりにくい -moz-
や -webkit-
などがつくCSSの要素についてざっくりまとめる
Vendor Prefix(ベンダープレフィックス)とは
MDNには以下のような記載がある
ブラウザーベンダー (提供元) は、時に試験的または非標準な CSS プロパティおよび JavaScript API に接頭辞を追加することがあります。これにより、開発者は標準化プロセスの中で、理論上は、ウェブ開発者のコードを壊すことなく新しいアイデアを試すことができます。 -Vendor Prefix (ベンダー接頭辞) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
このようにブラウザベンダー(ChromeやFirefoxなど)がブラウザ特有な記述を追加する際にわかりやすくつけるようなprefix
Vendor Prefixの代表的なもの
prefix | 対応するもの |
---|---|
-webkit- |
WebKit ベースのブラウザのだいたい(Chrome/Safari) |
-moz- |
Firefox |
-o- |
WebKit 導入前の古い Opera |
-ms- |
Internet Explorer と Microsoft Edge |
カバーをするための方法
ベンダープレフィックスを使うこと自体がよろしくないという風潮はあるようではある(関連リンク参照)ので、減少する傾向にはありそうですが、まだ各ブラウザ間で使われている現状はある。
ただ、AutoPrefixerというプラグインがあり、こちらは対応したいブラウザを明示すればprefixが必要な場合に適宜当てたものを出力してくれる。