言葉としての意味
- ベンダー (Vendor): これは、特定の製品やサービスを提供する会社や団体を指します。ウェブブラウジングの文脈では、ブラウザを開発・提供する企業や組織（例: Google for Chrome, Mozilla for Firefox, Apple for Safariなど）を指します。
- プレフィックス (Prefix): 接頭辞のことで、何かの前に追加される短いフレーズや文字列を指します。
ベンダープレフィックスとは
ベンダープレフィックス（Vendor Prefixes）は、試験的・非標準なCSSプロパティに対して付けられます。
これにより、ブラウザベンダーは新しい機能を提供しつつ、まだ正式な仕様が固まっていない段階での変更や調整に柔軟に対応できます。
ベンダープレフィックスの種類
- -webkit-：Chrome、Safari、ほぼ全てのiOSブラウザ
- -moz-：Firefox
- -ms-：Internet Explorer、Microsoft Edge
- -o-：古いOpera
プレフィックスの確認方法
Can I Useで確認。
記述例
.example {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}いちいち Can I Useで確認するべきか？
そもそも以前に比べて、ベンダープレフィックスは不要になってきている。
ただし、必要なものもあるので、以下のように対応する。
- CSSで開発している場合はVSCodeのAutoprefixerを使う
ただし、プレフィックス付与時にコマンドを入力する必要がある。
- Sassを使用している場合（おすすめ）
Live Sass Compiler を使っていれば、Can I Use に基づいて付与される。
Live Sass Compilerを使ったSassからCSSへの変換の動画はこちら
- webpackなどを使用している場合（おすすめ）
autoprefixer などのパッケージをインストールすることで、Can I Use に基づいて付与される。
それでもベンダープレフィックスが付与されない場合
Sassのミックスインを活用する
@mixin transform($value) {
-webkit-transform: $value;
-moz-transform: $value;
-ms-transform: $value;
-o-transform: $value;
transform: $value;
}
.example {
@include transform(rotate(30deg));
}Sassのmixinについての動画
https://factory-programming-mv.com/video/ydmiVIph9Vc/
Autoprefixer CSS online で確認
https://autoprefixer.github.io/
