【CSS】-webkit-とは何？ベンダープレフィックスについて調べてみた

こんにちは朱夏です。

今回は、CSSで-webkit-などが付いているプロパティは何のためにあるのか調べてみました。

朱夏

-webkit-とか-moz-とかがついているプロパティがあるけど、ついていないプロパティと内容が被っているのでは？

どうやらこの-webkit-などが付いたプロパティは、ブラウザの拡張機能として実装されているプロパティを使う場合につけるもののようです。

それではいってみましょう。

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

ベンダープレフィックスとは、CSS3で追加されたプロパティを使うために、-webkit-などプロパティの前についている言葉の事を指しています。

CSS3が実装された時に、各ブラウザが個別に先行実装や拡張機能の実装するために使われていたようです。
今ではつけなくてもほとんどのプロパティは使えるようになっていますが、まだいくつかのプロパティはベンダープレフィックスを付けないと機能しないみたいです。

ベンダープレフィックスの紹介

それぞれのブラウザに対応したベンダープレフィックスを紹介します。

機能しないプロパティがあった時は、プロパティの前にベンダープレフィックスを付けて書いてやることで、使えるようになるみたいです。

書き方はこんな感じです。

.class {
	transform: matrix(1, 0, 0, 1, 0, 0);
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	-moz-transform: matrix(1, 0, 0, 1, 0, 0);
	-ms-transform: matrix(1, 0, 0, 1, 0, 0);
	-o-transform: matrix(1, 0, 0, 1, 0, 0);
}

書き方のポイントとしては以下。

• 最初に通常のプロパティを書く
• 必要なブラウザ用のベンダープレフィックス付きを書く

ベンダープレフィックスが付いているものとついていないもの両方書いておくと、ブラウザ側で有効になるものを使ってスタイルを適用してくれます。

あとがき

というわけで、ベンダー振れフィックスについて調べてみました。

今回のまとめはこちら。

• 効かないプロパティのスタイルをつけれる
• ブラウザーごとに固有のベンダープレフィックスを付ける
• 複数種類を書いてもOK

最近は殆どのプロパティでは必要なくなっていますが、まだ必要なものがいくつか存在しているので、スタイルが適用されないプロパティがあったら、ベンダープレフィックスを付けて試してみてください。

今回は以上です。
次回もよろしくお願いします。