CSSのあり方について考えてみた。

「これからのWebのあり方について考えてみた。」で、多様な環境で利用されるWeb世界において、コンテンツが如何に重要であるかは理解を深めることができました。今回は見栄えを司る『CSS』のあり方について考えてみます。

見栄えを表現する手段としてCSSという技術が考案され、構造と見栄えを分離することで、メンテナンス性の向上、アクセシビリティの向上、ファイルの軽量化など大きなメリットが得られます。しかし、1998年頃に『CSS 2.0』が勧告された頃は、ブラウザ戦争の真っ只中ということもあり『Web標準』に懐疑的なブラウザベンダーは積極的に実装を進めてはいませんでした。実際に「懐疑的で積極的でなかった」のは私たち制作者側であって、ブラウザベンダーは凌ぎを削り合いながらも積極的に取り組んでいました。不適切な表現をしてしまい申し訳ありません。

私はというと、その頃は「Webっておいしいの？」程度の知識レベルだったのでリアルタイムな世代ではなかったのですが、先人の方々に伺ってみると「Web標準など理想論に過ぎない」と思っていた人が多かったのだとか。当時の状況を考えてみれば無理もないと思いますが、結果的に『CSS 2.1』は、仕様の改訂、フィードバックの反映を繰り返し、今日のWeb業界ではスタンダードな技術として広く普及しています。そのような時代背景から学べることは2つほどあります。

積極的にチャレンジする姿勢

当時は理想論だと言われていた標準技術も、今ではWeb制作におけるスタンダードになりつつあります。CSS 2.1においては、未だに最終勧告がされていないのにも関わらず、先行実装されている機能から積極的に利用されていき、IE6などの旧ブラウザに対応するために解釈の違いを逆手に取った『CSSハック』などのテクニックが生み出されました。つまり、W3Cの勧告や技術の普及を待つだけの受動的な姿勢ではなく、積極的にチャレンジしていく姿勢が大切なのではないかと思うのです。

今話題の『CSS 3.0』は草案段階でありながら、先行実装が始まっているモジュールもあれば、すでに実装がほぼ完了し、十分なフィードバックが得られるモジュールも存在します。以下「CSS3の実装状況│When can I use...」で列挙されているものを一部紹介します。見て分かる通り、IE9での実装も進んでいるようなので、これらの機能を惜しみなく使える日はそう遠くないかもしれません。

Box-sizing

widthやheightで指定した横幅や高さに、パディングやボーダーの大きさを含むかどうかを指定する

Web Font

サーバーから指定されたフォントがダウンロードされ、ユーザー環境に左右されない表示が可能になる

Text-shadow

ドロップシャドウやアウトラインの効果を表現できる

Media Queries

小型携帯端末向け、PC向けなどのデバイスに合わせてCSSを分岐できる

Border images

ボーダーでグラデーションや背景画像、エフェクトなどを表現できる

Multiple Column Layout

ユーザー環境によって2段組、3段組のレイアウトを表現できる

Flexible Box Layout Module

ボックスモデルを拡張し、より柔軟なレイアウトを行える

Multiple backgrounds

1つの要素に複数の背景画像を指定できる

Transforms

要素に対して拡大、回転、歪み、移動などの変形を行える

Transitions&Animations

要素に対してアニメーション処理を行える

パラダイムの転換

いわゆるブラウザ戦争というのは、1990年代に起きたInternet Explorer(以下IE)とNetscape Navigatorの『第一次ブラウザ戦争』、2004年以降Mozilla FirefoxやOperaがシェアを拡大し、IEに脅威を与え始めた『第二次ブラウザ戦争』が主なものとして挙げられます。これらのシェア争奪戦で共通しているのは、マーケットでシェアを独占していたIEに対して、ほかのブラウザが下克上を申し立てるという点です。そのような状況なので、IEへの対応は必須になり、クロスブラウザありきの『Graceful Degradation』という考え方が主流になっていきました。

しかし、2006年から水面下で続いている『ポスト第二次ブラウザ戦争』では、FireFox3.x、Opera9.x、Safari for Windows、そしてGoogle Chromeといった次世代ブラウザのリリースが相次ぎ、モダンブラウザがシェアを伸ばす一方、IEがシェアを減らしていくという傾向が続いています。Web標準に積極的でなかったIEも、さすがに準拠せざる終えないと判断したのか、IE7,IE8では積極的に仕様が取り入れられています。Net ApplicationsのBrowser market shareを測定結果では、IEのシェアは63％と表記されていますが、その内訳は以下「12月のブラウザシェア - ChromeがSafari抜く、Firefox 3.5は3位 | エンタープライズ | マイコミジャーナル」から引用します。

これを見て分かる通り、FireFoxをはじめとする次世代ブラウザが上位に食い込み始めています。IE8は、シェアが下がり続けるIE6と拮抗状態にあり、IE8、IE9がメインブラウザになるのは時間の問題でしょう。そうなれば、今までIE6を理由に採用されなかった実装手法も利用されるようになり、CSSハックと呼ばれるテクニックは利用する必要がなくなります。そして、CSS3.0が主流になれば、文書にとって不要な要素やid/class属性を減らすことができ、よりスマートなマークアップが可能になる上に、意図した通りの視覚表現が多くの環境で統一されるので、品質保証にかかる工数も減らすことができます。

だからといってIE6は放置しても良いということではなく、ターゲット外のブラウザでも最低限の見栄えを確保する配慮は必要になるでしょう。その上で新しい技術への積極的な取り組みを行い、そうした試行錯誤が技術の進歩を促し、新しい手法や考え方が生み出されていくのです。こうした状況を踏まえると、クロスブラウザありきの考え方から新たな考え方へパラダイムシフトしているという実感が湧いてきます。今は未だ灯火ですが、自ずと『Progressive Enhancement』という考え方へのパラダイムシフトが、緩やかに、そして確実に起こっていくことでしょう。

CSS3.0の実際

CSS3に関する実例としては以下のようなものが挙げられます。この手の記事では必ずといって良いほど取り上げられているサイトですが、イギリスのデザイナーAndy Clarkeの個人サイト「Stuff and Nonsense」です。モダンブラウザで見るとフルカラーで表示されるのですが、IE6で見るとモノクロで表示されます。IEのCSSサポート状況を皮肉っているようにも思えますが、Progressive Enhancementの考え方を理解するには分かりやすい事例だと思います。

IE6での表示

モダンブラウザでの表示

もう一つの事例は、CSS Zen Gardenに投稿された「Gemination」です。モダンブラウザとIE6とで表示を分けているという点は同じですが、実装手法が異なるようです。前者は条件付きコメントを使用してブラウザ判定を行っているのに対し、後者は属性セレクタを使用してスタイルを上書きしています。CSSソースを覗いてみると以下のように全てのブラウザに対してスタイルが適用されるようにし、モダンブラウザには属性セレクタを使用して新たなスタイルを上書きしています。これは最低限伝えるべき機能を実装し、その上で高水準の環境下でよりリッチな体験を提供するというProgressive Enhancementの考え方に基づいた手法といえるでしょう。

IE6での表示

#container{
position:relative;
margin:0 auto;
border-right:3px solid #fff;
border-left:3px solid #fff;
padding:0 20px;
width:706px;
background:url(contentback.gif);
voice-family:"\"}\"";
voice-family:inherit;
width:666px;
}

モダンブラウザでの表示

body[id=css-zen-garden] #container{
position:relative;
margin:0;
border-top: 5px solid #fff;
border-right:0;
border-bottom: 5px solid #fff;
border-left:0;
padding:0;
width:100%;
height:350px;
background:url(longgarden.gif) repeat-x center right;
}

Progressive Enhancementの考え方に基づいたCSSのあり方、如何でしたでしょうか。コンテンツはもちろんですが、ユーザーエクスペリエンスにおいて見栄えというレベルでの情報提供は大変重要です。ただそれが、コンテンツありきであるということは忘れないようにしてください（くどい）。IE6のシェアが減っているとはいえ、しばらくはターゲットブラウザには含まれるとは思いますが、使えるものは使わな損々。トライ&エラーを繰り返しながらも積極的に活用していきたいですね。