Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

Inayaili de Leon氏がSmashing MagazineにTake Your Design To The Next Level With CSS3のタイトルのもとCSS3を積極的に使っていってはどうかという内容の記事を公開した。いつまでもあまり簡単とはいえないCSSハックを駆使したり、JavaScriptに依存した使い続けることに意味があるのか、というわけだ。

ただ、逆説的だが、妥当検証を通過できなくなるしブラウザごとに設定を追加する必要があるので使わない方がいいことはわかっているものの、Take Your Design To The Next Level With CSS3の冒頭ではまだいくつかの機能はCSS3として規約が定められていないため、ベンダ異存プロパティ (-webkit-、-moz-、-khtml-、-o-、-ms-)を使う必要がある、とも説明している。たしかに、サンプルとして掲載されているCSSの多くにベンダ異存プロパティが使われている。

Take Your Design To The Next Level With CSS3で紹介されているCSS3の機能は次のとおり。

1. セレクタ (CSS3では強力なセレクタ指定ができるため、HTMLから不要なIDやクラス指定を削除できるようになる)
2. RGBAおよび透過 (RGBA: Red Green Blue Alpha指定で透過を実現できる。ただしWebkitベースブラウザ、Firefox 3+、Opera 9.5+でしかサポートされていない)
3. マルチカラムレイアウト (CSS3セレクタを使えば複数のdivを使うことなくマルチカラムレイアウトを実現できる。サポートしているのはSafari 3+とFirefox 1.5+)
4. マルチバックグラウンド (CSS3では複数のプロパティをレイヤとして重ね合わせて適用させることができる。SafariとKonquerorしかサポートしていないためあまり使われていないプロパティだが、デザイナに要求される作業の軽減やHTML要素の削減につながる)
5. ワードラップ (ワードラップ機能を活用する。IE、Safari、Firefox 3.5+でサポート)
6. テキストシャドー (CSS2からあるがあまり使われていない機能だが、文字に奥行きをあたえる機能として効果的。WebkitベースのブラウザとOpera 9.5+、Firefox 3.5+がサポート。IEは未対応)
7. @font-face属性 (これもまだまだ使われていない機能。フォンとのライセンス問題にも一因がありそう。Safari 3.1+、IEがサポート。Opera 10とFirefox 3.5でサポートされる見通し)
8. ボーダー角丸み (背景画像を使わなくとも四隅をそのまま四角ではなく丸みを持たせることができる。OperaとIEではサポートされていない。WebkitとGeckoベースのブラウザはサポートしている)
9. ボーダーイメージ (ボーダーに画像を指定できる。Webkitベースのブラウザだけが今のところサポートしており、Firefox 3.5でサポートされるかどうかは不透明)
10. ボックスシャドー (要素に影を追加する。Webkitベースのブラウザだけが今のところサポートしており、Firefox 3.5でサポートされる見通し)
11. ボックスサイジング (縦横のサイズ計算をどうおこなうのかを明示的に指定する。IE8、Opera、Gecko、Webkitでサポート)
12. メディアクエリ (デバイスの能力に合わせて適用するデザインを変更する。WebkitベースブラウザとOperaがサポートしている。Firefox 3.5で搭載が予定されているが、IEは対応のめどもよくわからない)
13. スピーチ (スピーチスタイルを指定する。ただしWindows XP/2000で動作するOperaだけがサポートしている)

Inayaili de Leon氏はこうしたCSS3の機能を使うことでデザイン作業の多くを改善し、時間のかかる処理を短縮することができ、コンテンツもよりすっきりすると説明している。また顧客に、悪影響がないのであればすべてのブラウザで同じように見えるようにする必要はないと伝えるなど、教育をしていくことも大切だと説明している。コメントの数も多く、同記事への関心の高さが伺える。