ベンダープレフィックスとは？何のためにつけるの？種類についても解説！

Webサイトの検証モードで確認をするとあまり見たがないCSSプロパティが・・・

「-ms-」や「-webkit-」

これは一体？？

これを付けないとCSSに不具合がでるの？

そこで今回はこれを知っておけば脱初心者！ベンダープレフィックスについてご紹介します。

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

ベンダープレフィックスとは、CSSの新しいプロパティに付けて、記述したプロパティが拡張機能であることを、各ブラウザに示すために使われる識別子です。

CSSのプロパティは日々新しいものが更新されていますが新しいプロパティについてはブラウザがまだ対応しきっていない場合があります。

そこでブラウザに対して「これはまだプレリリースのプロパティだからね」というものを伝えるものになります。

実際の記述例

div {
 transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}

このように、プロパティを記述する前に対応ブラウザごとのベンダープレフィックスをつけます。

ベンダープレフィックスの種類

ベンダープレフィックスの注意点

機能が普及したらベンダープレフィックスを外す

プレリリースであったプロパティが正式リリースになるとベンダープレフィックスを外すことが推奨されています。様々なサイトを管理していると作業量が膨大になりますがそれでも推奨されているので極力外すようにしましょう！

ブラウザの対応状況はどうやってわかる？

プロパティのブラウザ対応状況は、「Can I use…」というサービスでチェックすることができます。上部に調べたいプロパティ名を入力すれば、各ブラウザごとの対応状況が色別に表示されます。

外部サイトへ遷移します
Can I use…

最後に・・・

最近では最新の各ブラウザが素早くアップデートを行うようになり、ベンダープレフィックスが必要になる機会は少なくなってきています。しかし完全に無くしてもいいものではないのでしっかりと記述をしていきましょう！