CSS3が登場したことによって、何やら聞きなれない単語が飛び交っているWEB業界ですが、今日はCSS3が完全対応になっていない今現在で（2012/09/28）CSS3をうまく使う為に覚えておいたほうがいいルール「ベンダープレフェックス」についてちょこっと書きたいと思います。
また、途中からCSS3のtransitionプロパティの説明のようになってしまいましたが、ベンダープレフェックスのことだけ知りたいという方は中盤は読み飛ばしてくださいね。
ベンダープレフェックス（VendorPrefix）について
ベンダープレフェックスとは何かというと、CSS3はまだ公式にスタートしているわけではないので通常はまだ使えないのだが、それぞれのブラウザが「人気が高いから先走って対応しましたー。」ということを示したもの。よってベンダープレフェックスはブラウザ毎に指定の仕方が違う。各ブラウザごとのベンダープリフェックスの書き方は下記。また、ベンダープレフェックスを書かなくてもいい場合があり、わからない場合はhttp://caniuse.com/で調べてみる。（※SearchボックスのところにプロパティをいれればOK）
-webkit-
GoogleChrome、Safari
-moz-
Firefox
-o-
Opera
書き方を紹介。ついでにtransitionプロパティについて
ここではベンダープレフィックスの指定の仕方を、transitionプロパティを例にご紹介していきます。
-webkit-transition:all 0.2s ease 0s;
-moz-transition:all 0.2s ease 0s;
-o-transition:all 0.2s ease 0s;
ちなみに…transitionプロパティの指定の仕方
[画像]①適用するプロパティを選択
background、color、width、heightなど。
すべて適用する場合は all 。
②どれくらいで変化するかを秒単位で設定
単位は「 s 」
1s＝1秒。0.5sなど細かな数値も設定可能
③変化の仕方を細かく設定
デフォルトは一定の時間で変化していく。
* default
* linear（一定のスピード）
* ease
* ease-in
* ease-out
* ease-in-out
* cubic-bezier() 4つの数字をカンマ区切りで指定
④Delay-何秒後に開始するかを秒単位で設定
単位は「 s 」
1s＝1秒。0.5sなど細かな数値も設定可能。すぐスタートする場合は 0 でOK
効果の複数指定も可能
効果を複数指定することも可能です。
.test:hover{
text-shadow: 0 20px #ff0000, 0 40px #0000ff, 0 60px #008000;
}
なんか途中から内容が変わってしまったけど、transitionとベンダープレフェックスのまとめ
ベンダープレフェックスは今後増えていくであろうCSS3を先取りするために必要な決まりといった感じで覚えておけばOKです。ベンダープレフェックスの表記が必要かどうかわからない場合はhttp://caniuse.com/で調べてみるという感じでまとめますね。（かなりざっくり）
あと途中から主役を奪った感じにみえるtransitionプロパティに関しては、今回紹介したものの他にも他のプロパティで指定してやれば面白い効果を実装できます。例えば、マウスオーバーで画像の後ろにドロップシャドウをつける。なんてことも簡単にできちゃいます。ただ、IEはほとんど対応していないので、早くCSS3・HTML5が標準になる日が来て欲しいですね。このあたりのプロパティに関しては次回詳しく触れていきたいと思います。
