いつまで使えばいい?CSS3ベンダープレフィックスの切り時チェック!


いつまで使えばいい?CSS3ベンダープレフィックスの切り時チェック!

コーヒーは命の水!もりたです。

css3の正式勧告はいつだろうと指をくわえながら使っている現在ですが、そんな中どうしても使わなければいけないベンダープレフィックス。
全部書き出すとすごくいっぱいあるみたいなんですけど、とりあえず-webkit-と-moz-だけは書くようにしてるよという人は多いんじゃないでしょうか。私のことです。
でもあれってコードが長くなるからめんどくさいなーと思ってる人は多いんじゃないでしょうか。私のことです。

そのベンダープレフィックスっていつ使うのをやめればいいのかなと思ったら、こういうことらしいです。

ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。
【中略】
ただし、ベンダープレフィックスは、 草案(Working Draft)が勧告候補(Candidate Recommendation)になったときには外すことが推奨されています。

引用元:ベンダープレフィックス-CSSの基本[HTMLクイックリファレンス]

なるほどー。

css3の開発状況はW3Cのサイトで確認することができます。
リンク先で緑色の「CR」「PR」「REC」になってるプロパティだったらベンダープレフィックスを外すよう推奨されてるってことなんですね。
なるほどなるほどー!

でもこれって、具体的にどのプロパティで外していいかわかりにくいですね…。
ということで、ベンダープレフィックスを外しても大丈夫かチェックするためのページを作ってみました。

ベンダープレフィックス チェック用ページ

一つのプロパティにつき、

  • ベンダープレフィックスがなにもついていないもの
  • webkit/mozila/Opera/IEのベンダープレフィックスがついたもの

の2個の要素をセットにして表示させています。
主要なすべてのモダンブラウザで、ベンダープレフィックスなしの要素が
正常に表示されているプロパティは「CR」以上、
逆の場合はまだ「WD」というわけです。
まあ…IE9はプロパティ自体を実装してないことが多いですけど。
複数のブラウザで一緒に開くと、実装状況がわかって面白いです。

IEに関してはメジャーバージョンアップがこない限り変動はないのかもしれませんが、
Google chromeやFirefox、Operaといったモダンブラウザの対応状況は随時変化があると思うので、ときどきチェックして、不要なコードをすっきりさせてみてはいかがでしょう。

この記事を書いた人

もりた
もりた アートディレクター 2012年入社
デザイナーでイラストレーターのもりたです。
好きなモビルスーツはνガンダム、好きなレイバーはイングラム、好きな勇者はガオガイガーです。