[CSS]ベンダープレフィックスとは[-webkit-など]

CSSでよく目にする-moz-や-webkit-は、なんのために付けているのだろう?

と思い調べたため、共有したいと思います。

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

ベンダープレフィックスとは、例えば『-webkit-background-clip』のように-moz-や-webkit-などをプロパティの先頭につけることで、

 FirefoxやGoogle Chromeなどの各ブラウザで、プロパティを機能させるようにすることです。

主要なベンダープレフィックスのブラウザは以下になります。

-moz-Firefox
-webkit-Google Chrome、Safari
-o-Opera
-ms-Internet Explorer

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

ベンダープレフィクスを記載する際は、以下の使用例のように

ベンダープレフィクス無しの指定も併記しましょう!

.box {
background-clip: padding-box;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
}

また、どのプロパティにベンダープレフィックスを付ければいいのかわからない!

という方は、以下のサイトが役に立ちますのでぜひ!

https://caniuse.com/

まとめ

今回は、簡単にベンダープレフィックスについて解説していきました。

ここでもう一度まとめると、ベンダープレフィックスとは、

FirefoxやGoogle Chromeなどの各ブラウザで、プロパティを機能させるようにするために使う!です。

それでは、最後まで読んでいただきありがとうございました。