さてさて第３弾となる【CSS 中級講座】ですが、今回は個人的にメンドくさくて仕方ない「ベンダープレフィックス」について。

ちょくちょくみかける”-moz-”やら”-webkit-”ってヤツです。

これは、草案段階のCSS3プロパティなどに対して、各ブラウザ側で実験的に実装するために用意されたモノ。

実験的な状態から恒常的な実装となった場合、該当ブラウザのベンダープレフィックスは必要なくなりますが、それがいつ不要となったのか、なかなか調べる機会もありません。

っちゅーコトで、2012年9月12日現在、主要なCSS3プロパティのベンダープレフィックスが未だ必要なのかどうか、最新情報をいくつか調べてみましたよ！

CSS3の各種ベンダープレフィックス調査

CSS3プロパティは数あれど、今回調べたのは結構主要なトコだと思われる下記６つ。

調査対象のCSS3プロパティ

• text-shadow
• box-shadow
• border-radius
• opacity
• transforms
• gradient

なお「○」は「もうベンダープレフィックス要らないぉ☆」という印、「×」は「ベンダープレフィックスすら実装してないorz」、ベンダープレフィックスが書いてある場合は「まだまだプレフィックス要るです(´・ω・`)」という意味になります。

んでは、いってみよー♪

text-shadow

文字に影をつけるプロパティ。

次項の「box-shadow」とともに、CSS3の中でもトップクラスで効果が高い、使い勝手の良いプロパティですね。

さすがIEちゃん独壇場ですねアハハ（棒）。

box-shadow

「text-shadow」が文字に対して影をつけるように、こちらは要素全体に対して影をつけるプロパティです。

宙に浮いたような感じの影や、光彩みたいなコトも出来ちゃいます。

おぉ!?まさかのIEちゃん、ちょっとだけ奮闘してる！

PCサイトであれば、現行ブラウザに限ればベンダープレフィックス無しでOKの模様。

border-radius

いわゆる「角丸」を表現するためのプロパティ。

これもデザインテイストによってはバリバリ活用したいプロパティですねー。

かわいいよIEちゃんかわいいよ！

だが8以前、てめーらはダメだ。

opacity

該当要素全体の不透明度を設定できるプロパティです。

:hover疑似クラスなんかに使うと、非常にシャレオツ感があります。

誰だ「IE爆発しろヽ(`Д´)ﾉ」とか抜かしてた奴は！

過去に縛られること無く、今を生きようぜ！そうだろIEちゃん！

transforms

該当要素に「傾き」を設定できる、初期CSSから考えたらかなりハイレベルなプロパティですね。

これも:hover疑似クラスなんかにチラッと使うと、途端にデキるヤツ風情。

ﾍﾞﾝﾀﾞｰﾌﾟﾚﾌｨｯｸｽ･ﾊﾘｹｰﾝ
独 自 拡 張 奔 放 乱 舞

gradient

背景にグラデーションを設定できるプロパティです。

これが使えれば、かなり画像使用の頻度も下がるかと思われるが。。。

、、、なんだろう、この 全 滅 感 は。。。