さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】ベンダープレフィックス

Pocket
LINEで送る

CSS3において、W3Cではまだ草案の機能やプロパティを使用する際には、名前の前にブラウザ固有の接頭辞を付けることを推奨しています。これをベンダープレフィックスといいます。

ベンダープレフィックスには以下のものがあります。

IE → -ms-
FireFox → -moz-
Safari → -webkit-
Chrome → -webkit-
Opera → -o-

ベンダープレフィックスを付けるプロパティは、草案段階の仕様を先行実装しているものや、ブラウザベンダー独自の拡張機能を実装しているものです。

【使用例】

p {
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  }

「border-radius」というプロパティに対してベンダープレフィックスを付けて、FireFox(-moz-)、Safari、Chrome(-webkit-)それぞれに向けた記述を行っています。また、「border-radius」はOperaでは有効なのでOpera向けのベンダープレフィックス「-o-」は記述していません。

W3Cによると、ベンダープレフィックスは草案が勧告候補になった際には、外すことが推奨されています。border-radiusのように一部の機能がベンダープレフィックスなしで動作するように実装されているブラウザもあり、ブラウザをバージョンアップした際にベンダープレフィックスの付いたプロパティが動作しなくなることも考えられます。そのため上記の例のように、ベンダープレフィックスを付けていないプロパティも併記しておきましょう

カテゴリー:HP制作, css

コメントを残す

コメント内容