【CSS】ベンダープレフィックスについて

ベンダープレフィックス（接頭辞）とは

ベンダープレフィックスは、各ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、それが拡張機能であることを明示するために付ける識別子（接頭辞）のことです。

将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭にベンダープレフィックスを付与することが推奨されています。

主要ブラウザのベンダープレフィックス

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

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

下記のように、対応ブラウザごとにベンダープレフィックスの付与されたプロパティを追加します。

div { -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; }

注意点

ベンダープレフィックスなしの記述も必要
機能が普及したら外す

ベンダープレフィックスが付与されている状態と同時に、ベンダープレフィックスをつけないプロパティも併用して記述する必要があります。また、ベンダープレフィックスがなくても動作するようになった機能は、ベンダープレフィックスなしのプロパティだけを残すように修正する必要があります。

ベンダープレフィックスのチェック

Can I use

ブラウザ対応状況は、「Can I use」というサイトでチェックできます。調べたいプロパティを入力すると各ブラウザごとの対応状況が表示されます。

Can I use

ベンダープレフィックスの自動化

Autoprefixer CSS online

Autoprefixerのサイトで自動でチェック、書き出しできます。

Autoprefixer CSS online

Autoprefixer VSCodeの拡張機能

VSCodeの拡張機能にも、Autoprefixerがあります。

CSSファイルを開きAutoprefixer:Runコマンドを入力すると自動的にベンダープレフィックスが追加されます。普段VSCodeを利用するのであれば、こちらの方が便利です。