Webデザイン

CSS3で採用予定の機能を使うためのベンダープレフィックス

Webデザイン

CSS3で採用される予定の機能を各ブラウザで先行して使用されるように実装されています。
ただ、それらの機能を使うにはプロパティや値の先頭に

  • -webkit-
  • -moz-

といった各ブラウザの省略文字のようなものを付けなければなりません。
そう、これがベンダープレフィックスと呼ばれています。

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

ベンダープレフィックス(接頭辞)とは、拡張機能であることを明示するための識別子。 将来的に仕様が変更される場合に備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されているとのこと。

プロパティ名や値の前後に「-」を付けたベンダー識別子(vendor identifier)でブラウザの種類を特定しています。実は最近までこの呼び方を知らなかった私。お恥ずかしい限りです…。

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

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

主要なブラウザ用のベンダープレフィックスは上記の通り。
各ブラウザの省略文字のようなものなので、わかりやすいですよね♪

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

ベンダープレフィックスは、導入予定のプロパティをお試し用として実装する際に記述することが推奨されているものです。

ですので実際に勧告された場合は外すことが推奨されています。
そういった場合のために、ベンダープレフィックス無しの記述も忘れずに記述しておきましょう。
現時点では、Google ChromeとFirefoxなどの主要ブラウザはベンダープレフィックス無しでも動作してくれます♪

新しいブラウザだと、ベンダープレフィックスがついていると逆に動作してくれないものもあるみたいなので、必ずベンダープレフィックス無しの記述は書いておきましょう。

-webkit-border-radius:5px; /* Google Chrome、Safari */
-moz-border-radius:5px; /* Firefox */
-o-border-radius:5px; /* Opera */
-ms-border-radius:5px; /* Internet Explorer */
border-radius:5px; /* 記述無し */

CSSが長くなっちゃうのが気になるところ。
早く全ブラウザの仕様が統一されてくれる日が来るといいですね…。

ちなみにベンダープレフィックスを書く順番は、標準的なプロパティを一番最後に書いてあげます。

comment

タイトルとURLをコピーしました