こんにちは。
CSSでよく見かける「-webkit-transform: rotate(-45deg);」「display: -ms-flexbox;」等「-」で色々付いているものをベンダープレフィックスと呼びます。（多分違います）
真面目に書くと、FireFoxやSafariなどブラウザの種類が様々な昨今。CSSプロパティの中には特定のブラウザでは対応していないものもあります。
それぞれのブラウザでCSSを正しく適用するために付ける接頭辞をベンダープレフィックスと呼びます。
そんなベンダープレフィックスについて色々綴っていきます。
今回は自分で調べた情報をまとめただけなので、確証が持てない所が多いです。
無責任ですみませんが、温かい目で読んでいただければ幸いです。
ベンダープレフィックスの種類
主要なベンダープレフィックスの種類をまとめました。
-webkit-…Google Chrome、Safari、ほぼ全てのiOSブラウザ。
-moz-…Firefox
-o-…Opera
-ms-…Internet Explorer、Microsoft Edge
上記の中で既に必要なくなったものもあります。
-o-
…現在のOperaはHTMLレンダリングエンジンをBlinkにしたため不要になりました。
BlinkはGoogle等が開発したもので-webkit-を使用できます。
-ms-
…こちらも-o-と同様、Blinkに切り替わるため不要です。
CSSでの表記順
ベンダープレフィックスを使用する際、ベンダープレフィックスが付いていないプロパティを最後に書くのがルールです。
CSSは上から下へ読まれていき、詳細度が同じ場合は下にあるプロパティが優先されます。
また新しいブラウザでは、ベンダープレフィックスが付いていると動作しないものもある為、不要であればベンダープレフィックスを外す事が推奨されています。
よって、最終的に認識されるものはベンダープレフィックスが付いていない標準のプロパティであるように書くのが良いそうです。
transform:rotate(45deg);を例にすると、こんな感じです。
.text1 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}便利なツール
必要なベンダープレフィックスを調べられるツールを２種類ご紹介します。
Can I use…
「Can I use…」はHTMLやCSSがどのブラウザに対応しているのかを調べることができるサイトです。
Can I use...
https://caniuse.com/
Autoprefixer
「Autoprefixer」は入力したCSSのベンダープレフィックスを整えてくれるツールです。
不要なものは削除し、必要なものは追加してくれます。
エディタの拡張機能としてもあるらしいのですが、オンラインツールで利用できるので便利です。
Autoprefixer CSS online
https://autoprefixer.github.io/
まとめ
ベンダープレフィックスは常日頃、調べても調べても明確な答えが出ず、森を彷徨うような感覚で居たのですが、今回の記事を書くにあたり様々な便利ツールを知り少しは苦手意識を克服できたと思います。
ツールを知るまではGoogle Chrome、Firefox、スマートフォンでSafari、スマートフォンのGoogleで確認していたのですが、今後もツールを利用しつつ目視の確認も怠らず続けていこうと思います。
この記事を読んでいただきありがとうございました。
あなたのお役に立てれば幸いです。ではまた。