[CSS] ベンダープレフィックスはどこまで必要か？

各ブラウザが独自に先行実装しているCSS3

CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使えるようになってきました。
といっても、どのブラウザも最新バージョンでのみと言っていいでしょう。

バージョンが落ちれば、対応状況も減るといった感じです。

独自実装している関係で、それぞれ独自のベンダープレフィックスというものを採用されています。

主要ブラウザのベンダープレフィックス

-moz-　　…… Firefox
-webkit-　…… Google Chrome、Safari
-o-　　　  …… Opera
-ms-　　   …… Internet Explorer

割と面倒なベンダープレフィックス

さて、ベンダープレフィックスを用いて先行実装されているCSS3を使用できるんですが、それはそれで面倒なんです。
ソースも増えますし、本当に必要かもわからない。
なので、現在どこまで実装が進んでいるか少し調べてみました。

※使用頻度の高い要素のみです。PCのブラウザのみの状況ですのでスマホは考慮してません。
※Android2.3は-webkit-が必要な要素が多いので、スマホサイトの場合、ベンダープレフィックスは使用してください。
※Operaは調べてません。
※IEのバージョンは、10です。

border-radius

角丸にするプロパティですが、現段階ではベンダープレフィックスは不要です。
全ての最新ブラウザで対応されています。

background-size

背景画像サイズを設定するプロパティです。
こちらも、最新ブラウザではベンダープレフィックスは不要です。

background-origin

背景画像をどこを基準にするかというプロパティです。
こちらも、Firefoxだけちょっと挙動が変ですが、不要な感じです。
心配なら-moz-のみつけるのもありです。

background-clip

背景画像の適用範囲を決めるプロパティです。
こちらも、ベンダープレフィックスは不要です。
ベンダープレフィックスを使用した場合、逆に変になる場合があります。

border-image

画像ボーダーを指定するプロパティです。
IEのみ対応しておりません。ベンダープレフィックスを使用してもIEは対応してません。
IE以外はベンダープレフィックスは不要です。

box-shadow

ボックスに影をつけるプロパティです。
現時点でベンダープレフィックスは不要です。

box-sizing

ボックスのサイズの算出方法を決めるプロパティです。
現時点でベンダープレフィックスは不要です。

columns

カラム幅とカラム数を指定するプロパティです。
IE10のみベンダープレフィックスが不要で、その他のブラウザは全て必要でした。

まとめ

実務に使えそうなプロパティのみを抜粋してますので、この他にもまだまだあります。
まだ、対象ブラウザが全て最新のみでいいという強気のクライアントさんはあまりいませんが、そろそろIEの8も対象から外れてくれるでしょう。

そうすると、CSS3を使ったサイトが存分に作れるようになるので、これまで不要なタグを使わざるを得なかった状況も少なくなると思います。