「CSS 3をクロスブラウザで実装するプログレッシブ・エンハンスメント」 by. 菊池 崇

「CSS 3をクロスブラウザで実装するプログレッシブ・エンハンスメント」
2009年10月22日

TEXT：菊池 崇


Web制作時にはどのブラウザをターゲットにすべきか

ブラウザの開発スピードは、3年前と比べて約3倍に向上している。おもな開発の焦点はレンダリングエンジンの高速化であったのだが、その脇で進められていたCSSの実装でも各ブラウザに違いがでてきた。特に、2008年よりCSS 3の実装に大きな差がでてきている。それもそのはず、1999年に開発されたInternet Explorer（IE）6と、2009年6月にリリースされた Firefox 3.5が同時に存在しているのだから、大きな差がうまれるのは当然だ。

しかし、このふたつのブラウザには似ている部分がある、シェアが20％前後（2009年9月時点）と非常に近いのだ。



ブラウザのシェア（Browser market shareより）

この状況の中でWebデザインを行う際は、IE 6をターゲットブラウザとすべきなのか？　それとも、Firefoxなどのモダンブラウザをターゲットブラウザにすべきなのか？

答えは、どちらでもない。Web上の情報やサービスが問題なく利用できるなら、それぞれのブラウザにあわせたWebデザインをつくればよいのだ。この考え方は「Progressive Enhancement（プログレッシブ・エンハンスメント）」と呼ばれ、欧米を中心に2～3年前より急速に普及している。


プログレッシブ・エンハンスメントの実例

では、プログレッシブ・エンハンスメントの実例をみていこう。



Mac版Firefox 3.5.3


Windows版IE 6

これは、おなじみの人も多いであろうTwitterのデザインだ。背景の枠の角部分を見てほしい。Firefoxでは角丸が実装されているが、IE 6では角のままだ。わずかな違いだが、CSS 3のborder-radiusプロパティの実装の有無が、このデザインの差になるわけだ。

ただし両者ともサービス自体に差は発生せず、問題なく利用できる。また、ユーザーはひとつのWebサイトに対して複数のブラウザを使い分けることはしない。Web制作者はすべてのブラウザで同じデザインを実現しなければならないと考えがちだが、それはみずからつくり出したユーザー像だ。なおこの考え方は、クライアントとも共有することも必要である。

では、より実践的な例として、CSS 3の実装例をお見せしよう。CSS 3のtext-shadowプロパティ、gradientプロパティ、border-radiusプロパティ、transitionプロパティを利用している。サンプルデータを用意したので、あわせて確認してほしい。
[サンプルデータダウンロード]



Windows版IE 6


Mac版Firefox 3.5.3


Mac版Opera 10.0


Mac版Safari 4.0

以下に各プロパティの実装状況を紹介していく。

border-radius
Firefox 3.5とSafari 4.0では角丸が実装されている。IE 6とOpera 10では実装されていない。
gradient
現在はSafari 4.0+のみが実装している。ただし、Firefox 3.6では実装される予定になっている。
text-shadow
Firefox 3.5、Safari4.0、Opera 10では実装されている。今回のサンプルでは-1pxを利用してベベル効果を実装している。
-webkit-transition
このプロパティはSafari 4.0+のみで実装されている。アニメーションの効果をつけることができる。

CSS 3はもはや「お遊び」ではなく「実践」の時代なのだ。プログレッシブ・エンハンスメントの考え方を理解し、CSS 3を実践で取り入れていってほしい。




［筆者プロフィール］
きくち・さとし●米国にてマーケティングを専攻修了。貿易会社を経て、その後allWebクリエイター塾にてセミナーの講師。またオーストラリア、米国、カナダなどで開催されている世界的カンファレンスのWeb Directionsの日本版であるWeb Directions Eastの発起人。実践的なCSS 3の使い方についてAdobe MAX09など講演多数。海外の技術書やブログを読みあさり、最新の技術をいちはやく習得している。