-webkit-とかのベンダープレフィックスをつける重要性

プレフィックスとは、CSS3を使う際に使用するプロパティの前につけるキーワードです。

サイト制作者には当たり前に思えるベンダープレフィックス。
今までどうしてこれを付けないといけないかがよく分かっていなかった。

何故ならば、出来上がりのサイトを最新版のChromeでしか見てなかったから。

でもよく考えたら(よく考えなくても)
IEで見る人、safariで見る人、opera、firefox・・・と様々なブラウザがあるわけで、その色々なブラウザでも同じように見えるようにするのが「ベンダープレフィックス」なのだと最近になってようやく気づいたので、次回制作より今までより気をつけてかいていこうと思う。

ベンダープレフィックス使う時に重要なルール

ベンダープレフィックスには書く時に重要な順番のルールがあります。
それは、ベンダープレフィックスをつけていないプロパティを必ず最後に書くこと！！

こんな感じです。
*現在はプレフィックス必要のないborder-radiusを例にしています。

-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;

私は知らなかったので適当に見栄えのいいようにまとめようとして注意されました^^;
せっかく書いたベンダープレフィックス意味なくなりますので順番通り書きましょう。
プレフィックスつけたものの順番は前後しても問題ないです。

ちなみに、css3やブラウザは日々更新されていて、 少し前までは必要だったプロパティも、webkitなどの記述がなくても大丈夫になったりしますので、ベンダープレフィックスが必要かどうかを調べたい時には以下サイトを参考にして下さい。

ブラウザのバージョンごとにベンダープレフィックスが必要かどうかを調べられるサイト
http://caniuse.com/

世界と日本のブラウザシェア(2017年11月のデータ)

WebブラウザシェアランキングTOP10(日本国内・世界)

世界のブラウザシェア

IEは7.1%
Chrome62.0、Chrome 61.0合わせて54.04%で過半数。

日本国内のブラウザシェア

IEが25.42%
Chrome 62.0、Chrome 61.0合わせて36.4%

IEとChromeって、cssの指定に微妙な違いがあるんですよね～