今使えるCSS3の書き方まとめサイト

CSS3の規約は現在策定段階にある。しかし、すでにどの主要ブラウザもCSS3に準拠する記述方法か、またはベンダプロパティとしてその機能を実装している。CSS3で提供される角丸め、影付け、グラデーション、透過、回転、Webフォント、スクリュー、スケール、トランジッションなどの機能は魅力的だ。浸透しつつあるプログレッシエンハンスメントのデザイン実装方法論を採用するなら、基本となるデザインをCSS2.1で整え、CSS3の機能で最新ブラウザ向けに一歩先のデザインを提供するというのは悪くない選択肢といえる。

ただし問題がある。CSS3は依然として策定段階にあるため、同様の機能は提供されているものの、それぞれブラウザごとに指定方法が異なっている。いずれCSS3で規程された方法で利用できるようになる見通しだが、現在のところはそうなっていない。同じ悩みを抱えているWebデベロッパやWebデザイナは少なくない。そうしたデベロッパのひとりであるPaul Irish氏とJonathan Neal氏が、同氏らの作業をCSS3 Please! The Cross-Browser CSS3 Rule Generatorとして公開した。

CSS3 Please! The Cross-Browser CSS3 Rule GeneratorはIE、Firefox、Chrome、Safari、Operaのそれぞれのバージョンに対してCSS3の設定をどのように書けいいのかとまとめたサイト。オンザフライで設置の有効無効を切り替え、レンダリング結果を確認できる。表示されているCSSがそのままCSS3のまとめになっており、右上の四角い部分がレンダリング結果になっている。

機能	IE	Firefox	Chrome	Safari	Opera
角丸め	9+	1+	OK	3+	10.5+
影付け	6+	3.5+	OK	3.0+	10.5+
グラデーション	6+	3.6+	OK	4+	-
透過	6+	3+	OK	3+	10.10+
回転	6+	3.5+	OK	3.1+	10.5+
Webフォント	6+	3.6+	OK	3+	10+

どのブラウザのどのバージョンでどういった記述をすればいいのかが簡潔にまとまっていて参考になる。利用したい機能の設定をコピーしてくれば、あとは内容の調整とセレクタの部分を書き換えるといった作業で利用できる。スクリュー、スケール、トランジッションなどまだ追加していない設定も今後追加していくという説明がある。