CSS Archive

最低限のアクセシビリティを確保し、高水準ブラウザのパフォーマンスを最大限に発揮させようという『プログレッシブエンハンスメント』という考え方があります。私はこれについて、IEなどの低水準ブラウザでは最低限の見栄えが確保されていれば良いだろうと述べましたが、現実的にそうした考え方を浸透させるのは困難であり、それこそ「単なる理想論」で終わってしまいます。そこで、今一度「現実的な実装案」について考えてみたいと思います。

誰にとっても重要なこと

「どのような人にどのようなことをどのように伝えるか」というユーザエクスペリエンスに基づいて『表側のコンテンツ』は作られます。それは私たちWeb制作者にとっても、クライアントにとっても大変重要なことであり、それが明確でなければWebサイトを作る意味すらないと思います。しかし、人間が十人十色であるように、専門分野が違うもの同士では考え方の違いや齟齬などがどうしても生じてしまいます。こちら側のエゴを相手に押し付けるのも、相手の要望を鵜呑みにするのもあまりスマートとはいえません。現時点で理想が叶わないのなら、実情を把握し、妥協点を見つけることから始めましょう。

私たちにとって重要なこと

プログレッシブエンハンスメントといえば「新しい技術を最大限に生かす」という側面が注目されがちですが、「コンテンツそのものに重きを置き、Web本来の能力を最大限に生かす」という側面も持ち合わせています。Webの世界はグーグルボットに代表されるクローラーというプログラムが、Web上にある文書や画像などの情報を周期的に取得し、データベース化、インデックス化することで成り立っています。要するに彼らはコンテンツだけを求めています。

HTML5では、section、nav、aside、header、footerなど、セマンティックなタグが追加され、より論理的なマークアップが可能になります。これらのタグを利用することで、単純に構造が分かりやすくなるという表面的なメリットだけではなく、クローラーが文書の内容をより正確に収集できるようになり、検索の精度が格段に向上するという恩恵を受けられます。コンピュータにやさしいマークアップは最終的に人間にとってもやさしいものになります。

また、駅に設置されているエレベーターが高齢者や車椅子を利用されている方々だけではなく健常者にとっても便利なものであるように、多様な環境で利用されるWebという世界では、環境に依存しないアクセシブルなコンテンツが求められています。Webサイト上で、情報を発信、普及、収集、要求したりするのには、コンテンツというレベルでの情報提供は必須なのです。

このように、HTML5というテクノロジーを活用してマークアップの精度を高め、アクセシブルなものにするといった『裏側のコンテンツ』が最も重要であると私は考えています。それらを導入することで、すぐに変革がもたらされるわけではありませんが、将来的にWebという媒体が最大限に力を発揮するためのいわば投資のようなものです。皆さんがどうお考えになるのかがとても知りたいのですが、ここではHTML5を活用することを最優先事項として話を進めたいと思います。

一企業にとって重要なこと

TML5やJavaScriptなどの標準技術に基づいて開発されたアプリケーションは、あらゆるデバイスで互換性を持ち、クロスプラットフォームの基盤を作る重要な鍵となります。これが実現するのは随分先のことになるとは思いますが、一部の企業にとっては今すぐにでも取り組むべき重要な課題だと思います。それとは別に、多くの企業では直接収益に影響がでるSEO/SEM、Webパフォーマンスの方に力を入れているように思います。SEO/SEMに関しては、具体的にどのような対応しているのかは分からないのですが(すいません‥)、WebパフォーマンスについてはGoogleが検索ランキングアルゴリズムにサイト応答速度を取り入れるという発表があったこともあり、今後はより専門的な分野として発展していきそうです。

クロスブラウザに関しては重要視しているというよりも、IE6の対応を行うのが当たり前という認識なのだと思いますし、現実問題としてIE6を切り捨てるのは難しい状況にあります。シェアが下がり続けそのまま消えてゆくと思われたIE6ですが、聞いた話によると、ある一定の状態を維持し、それがまだ無視は出来ないシェアを占めているということなのです。単純にIE6以外のブラウザを使うことができない、何らかのシステムにIE6のエンジンを採用している、IE6を拘って使用しているという強者もいるかもしれませんが、とにかくそのような低水準のブラウザでも「高水準ブラウザと同等の見栄えを確保する」という需要はまだまだ根強く残っているのです。

依存する技術とアクセシビリティサポーテッド

では、実際にHTML5を活用するためには、どのようなことに留意しなければならないのでしょうか。まず、IE6ではHTML5で追加された新しい要素を認識しないため、レンダリングが行われずスタイルも適用されません。これを解決するためにはRemy Sharp氏が公開した『html5.js』というライブラリを使用します(適用方法などは「HTML5×CSS3の実装で抑えておくべきこと」へ)。つまり、IE6の環境で見栄えを確保すること即ち、JSに依存するということになります。

2010年に改定されたJIS規格では、『依存しているウェブコンテンツ技術』という章が明示化されました。簡単に言えば、利用者が(JSやFLASHなど)特定の技術を有効にしていることを前提にして制作をしてもよいというものです。では、何を基準に依存する、しないを決めるのでしょうか。そこで同時に明示化された『アクセシビリティ・サポーテッド』という概念があります。

【アクセシビリティ・サポーテッドを満たす条件】

• WCAG2.0やJIS X8341-3に適合していること
• 実装技術、ユーザーエージェント、支援技術の折り合いをつける
• 全方位的なアクセシビリティを確保する

第一に規格で定められた要件を満たす必要があります。ただし、規格には適合レベルというものがあり、最低でもレベルA、可能であればレベルAA、余裕があるならレベルAAAというくらいの感覚で良いと思います。この時点で、JSが無効の場合でもコンテンツが問題なく取得できるように配慮する必要はありますが、基本的に適切なマークアップがなされていればCSSが無効の状態でも正しくカスケードされるはずです。

第二にHTMLやJSなどの『コンテンツ側の実装技術』と、ブラウザなどの『ユーザーエージェント』、音声ブラウザなどの『支援技術』とを鑑みて、依存するかしないかを検討する必要があります。なぜこのような過程が必要なのかというと、規格に適合していても、要件によっては相応しくないケースがあるからです。

例えばIE6での閲覧環境を第一優先にする場合や、障がい者や高齢者の訪問が想定される場合は「依存しない」として従来どおりの方法で実装するべきです。前者はイントラネットを制作する場合などで、クライアント側がIE6をメインに使用している場合、後者は自治体のサイトなどで、スクリーンリーダーや音声ブラウザの利用が想定される場合などが挙げられます。もちろんそれらの支援技術がHTML5の新要素を正確に読み上げられるように改善されれば『依存する』と決定することができます。

第三はそれらの折り合いがついて初めてアクセシブルなコンテンツを提供することができるということです。この「折り合いをつける」という部分は非常に難しいところで、作り手である私たち制作者側とユーザーエージェント、支援技術のベンダー側が歩み寄って意識を共有していく必要があると思います。

CSS2.0でクロスブラウザを実現

アクセシビリティ・サポーテッドを満たし『依存する』と決まれば、JSを利用してIE6でも新要素を認識させることができ、スタイルの適用も可能になります。しかし、CSS3には当然対応していないため、『IE9.js』などのライブラリ駆使しても最低限の見栄えしか確保することが出来ません。上でも述べた通り、現時点ではクロスブラウザの需要が高いということもあり、ここを妥協点とさせていただきます。

私たちが最重要事項としているのはコンテンツの充実であり、進化であって、見栄えに関しては従来通りの方法で実装を行うのが得策だと考えます。妥協点というよりも、あらゆる選択肢の中から最適だと思われる方法を選択しているに過ぎず、時代の変化に合わせて柔軟に対応していくべきことであると考えています。

『html5.js』も日々進化しているようで、最近バージョンアップされたものでは、プリントにも対応しているとのことです。

高水準ブラウザへの対応

CSS3がお預けになり(´・ω・｀)ｼｮﾎﾞﾝﾇ となってしまった方々、ご安心ください。プログレッシブエンハンスメントの考え方に則るなら、今までの経緯は最低限のアクセシビリティを確保していたに過ぎません。CSS2.0で従来通りのコーディングを行う以上、CSS3.0のプロパティをフルに活用するのは難しいまでも、高水準ブラウザ向けに施せることはたくさんあるはずです。

モバイル版Safariしか選択肢がないiPhoneでは、事実上HTML5とCSS3が標準プラットフォームになっているわけなので、それ専用のCSSを用意するのも良いかもしれません。時間やコスト的に余裕がないのなら、ちょっとしたスパイスを加える程度でも良いですが、とにかくCSS3がまるで活用できないということはありません。

あくまで最後の楽しみにとっておく程度にはなってしまいますが、そう遠くない未来、それこそIE9のシェアがIE8を抜く頃には時代は変わっているでしょう。

最後に

ここまできたらお気づきの方もいらっしゃるかと思いますが、見栄えに関しては従来通りの方法で行うというだけで「最低限のアクセシビリティを確保し、高水準ブラウザのパフォーマンスを最大限に発揮させよう」という『プログレッシブエンハンスメント』の考え方にはちゃんと則っています。

私の知識量ではこの程度のことしか思いつかないのですが、もっと良い方法があるという方がいらっしゃればどうぞご教授ください。ご意見なども大募集です。

各々のブラウザがドラフトの仕様を実装している段階とはいえ、既にほとんどの機能が実装できる状態にあります。動向が注目されていたIE9もHTML5のサポートを正式に表明しているということですから、基盤は着々と整いつつあるようです。今回はHTML5でのマークアップ、CSS3でのコーディングを実装するにあたって、何に留意すれば良いのか、現状ではどのような対処をすれば良いのかというところに焦点を当ててみます。

Progressive Enhancement

今までは高水準のブラウザで表示確認を行い、下位ブラウザやデバイスの対応を個別に行うというやり方が主流でしたが、今後は最低限のアクセシビリティを確保した上で、高水準のブラウザ対応を行うという『Progressive Enhancement』の考え方に則って制作する必要があります。現状では、ブラウザによって対応状況が異なるため、全ての環境で新機能を活用することは難しい状況ですが、2010年の改訂版JISによって次世代Webの実現に向けてまた一歩進むことが出来そうです。

依存する技術

現状では、「最低限の見栄えを確保するということ」即ち、新しく追加されたセマンティックな要素が使用できず(低水準のブラウザでは新要素を認識しないため)、結局のところ「現実的な妥協案」にせざる終えなくなります。そこで私が目をつけたのが改訂版JISで明示された『依存しているウェブコンテンツ技術』という章です。

「JIS X 8341-3 改正原案（2009年1月公開レビュー版）」

簡単に言えば、利用者が(JSやFLASHなど)特定の技術を有効にしていることを前提にして制作をしてもよいというものです。ただし「依存している」とするには『アクセシビリティ・サポーテッド』を満たしている必要があります。

アクセシビリティサポーテッド

アクセシビリティ・サポーテッドとは、作成したコンテンツが標準仕様に沿っていて、利用するユーザーがアクセシブルに利用できるかということを指します。これは単にJISに適合していれば良いという話ではなく、コンテンツ側の実装技術とユーザーエージェント/支援技術側の折り合いをつけるという部分が強調されています。

article要素やheader要素などを使用してもIE6ではレンダリングされないため、スタイルを適用することができません。そうしたHTML5の新しい要素やJavaScript(以下JS)などの "コンテンツ側の実装技術" と、ブラウザなどの "ユーザーエージェント" 、音声ブラウザなどの "支援技術" とを鑑みて、依存するかしないかを検討する必要があります。コンテンツを重視するのであれば『依存する』として、JSを有効にしていることを前提に下位ブラウザの見栄えや動作を確保することも可能になります。

現実的な実装案

ここまでは今まで考えてきたことのおさらいでしたが、では実際に使えるJSライブラリが存在するのか、CSS3はどの程度まで使用可能なのか等について、私が得た経験から紹介してみます。

HTML5でのマークアップ

アクセシビリティサポーテッドを満たした上で『依存する』とし、JSの使用を前提にするのであれば、DOM ScriptingによってIE6,7でもHTML5の新要素を扱えるようにすることができます。有名なのはRemy Sharp氏が公開した『html5.js』というライブラリです。実装方法は、以下のようにIE向けに設定するだけで済みます。

<!--[if lte IE 8]>
<script src="./js/html5.js" type="text/javascript"></script>
<![endif]-->

条件分岐の意味は「利用しているIEがバージョン8.0以下のとき」となります。IE9ではHTML5が実装されるということなので、含める必要はないでしょう(皮肉)。

CSS3でのコーディング

こちらも同様、JSの使用を前提にするのであれば対応方法はあります。以前「次世代Web 7つのポイント」で紹介させていただいたCSS3の擬似セレクタに対応するライブラリ『ie-css3.js』は実際試してみるとHTML5.jsと競合してしまうのか機能しなかったので(試用せずに紹介してしまい申し訳ありません)、変わりに『ie9.js』というライブラリを紹介させていただきます。

2年ほど前に、Internet Explorerの動作をW3C標準仕様に準拠させる『ie7.js』というライブラリが公開されましたが、それの最新版が『ie9.js』ということになります。IE5.5からIE6までのHTML/CSSの解釈を調整し、IE7との互換性を確保してくれる『ie7.js』と同様、『ie9.js』はIE5.5からIE8までの互換性を確保してくれるという強力な機能を備えています。ざっと機能を列挙すると、以下のようになります。

• 擬似クラス対応
• 属性セレクタ対応
• 透過PNG対応
• position:fixed対応
• margin:0 auto;対応
• max-height,width対応
• min-height,width対応>
• IE5/6のバグを修正>

実際どうだったかということについてですが、十分使えるというのが個人的な感想です。『ie7.js』が公開されたときは、話題になっているほど万能ではなく、JSを無効にしている場合などが懸念され現場で使用されることは先ずありませんでした。しかし『プログレッシブエンハンスメント』の最低限のアクセシビリティを確保するという考え方に則り、『アクセシビリティサポーテッド』を満たし『依存する』とするのなら問題ありません。高水準のブラウザと同じ見栄えというわけにはいきませんが、最低限の見栄えを確保するのには十分貢献してくれます。実装はhtml5.jsと同様、以下のように設定します。

<!--[if lte IE 8]>
<script src="./js/ie9.js" type="text/javascript"></script>
<![endif]-->

ブラウザ対応

ライブラリによって最低限の見栄えを確保できるとはいえ、HTML5、CSS3の新機能をフルに活用できるかというと現時点ではそうはいきません。要素をアニメーションさせるというのは高水準向けの対応なので論外ですが、要素を横並びにし、高さを調整してくれるboxプロパティや、複雑なグラデーションを画像なしに表現できるgradientプロパティなどが機能しないとレイアウトや見栄えに大きな影響を与えてしまいます。

これについては不本意ながらブラウザ対応という形で対処するしか方法はありません。例えばカラムレイアウトについては、以下のようにie向けのCSSを作成しfloatプロパティを適用する必要があります。

<!--[if lte IE 8]>
<link href="./css/ie.css" rel="stylesheet" media="screen,all" /></script>
<![endif]-->

既存のCSS

body #sampleArea div{
	display:-webkit-box;
	display:-moz-box;
}

IE用のCSS

body #sampleArea div{
	float:left;
}

また、グラデーションについては近似する色をIE向けに指定します。

body{
background-color:#00abeb; /* IE向け */
background:-moz-linear-gradient(top, #00abeb, #fff); /* FireFox向け */
background:-webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff)); /* Safari向け */
}

これだけの対応だけ忘れなければ、十分な見栄えを確保することが出来ます。今回はちゃんと試したので間違いありません^^;。もしかしたら近い将来CSS3のプロパティにも対応したライブラリが登場するかもしれませんが、その時はこうした対応も不要になりますね。念のため確認したブラウザは以下になります。

• FireFox 3.6
• FireFox 3.x
• Safari 4
• Google Chrome
• Opera 10.5
• IE6
• IE7
• IE8

最後に

Google Chromeを代表する新時代のモダンブラウザ、既存ブラウザのバージョンアップ、そしてモバイルコンテンツの流行、ネットブックの普及、そしてiPhoneを始めとするスマートフォンの出現など、ここ2年の間に状況は一変しました。そうした時代の流れに合わせて新しい考え方や技術を把握し、あらゆる選択肢の中から最適と思われるプランを最初に実行していくことが次世代Webを引っ張っていく者の役割なのではないかと考えています。最も私などはペーペー中のぺーぺーですが、今回そうした機会を与えて下さった方々にはとても感謝しています。私も少しずつ精進ていきます。

HTML5でマークアップをする機会があったので、まず新しく追加された要素を「HTML5.JP」で調べ、次に「HTML5 Gallery」というサイトでどのように実装されているのかを確認しました。その中でIE6を代表する下位ブラウザへの対応を行っているサイトが多く見受けられたので自分の解釈も含めつつアウトプットしてみます。

ライブラリ

前回「次世代Web 7つのポイント」という記事で述べましたが、いくら「IE6の葬式」が行われたとはいえ、(現段階では)最低限の見栄えは確保する必要があります。HTML5の実装を進めているというIE9の実態は謎に包まれており、IE6～IE8は言わずもがな対応していません。このような状況化で、最低限の見栄えを確保するということはHTML5で追加されたセマンティックな要素が使用できず、結局のところ現実的な妥協案にせざる終えなくなります。そこで私が目をつけたのが改訂版JISで明示された『依存しているウェブコンテンツ技術』という章です。簡単に言えば、利用者が(JSやFLASHなど)特定の技術を有効にしていることを前提にして制作をしてもよいというものです。ただし「依存している」とするには『アクセシビリティ・サポーテッド』を満たしている必要があります。

アクセシビリティ・サポーテッドとは、作成したコンテンツが標準仕様に沿っていて、利用するユーザーがアクセシブルに利用できるかということを指します。これは単にJISに適合していれば良いという話ではなく、コンテンツ側の実装技術とユーザーエージェント/支援技術側の折り合いをつけるという部分が強調されています。

技術をアクセシビリティ・サポーテッドな方法で用いるというのは、支援技術（AT）および OS、ブラウザ、その他のユーザエージェントのアクセシビリティ機能と連携するということを意味する。技術は、アクセシビリティ・サポーテッドな方法で用いられている場合のみ、WCAG 2.0 の達成基準を満たすために依存することが可能である。ただし、何らかの達成基準を満たすために用いられていない（つまり、同じ情報あるいは機能が、アクセシビリティ・サポーテッドな他の方法でも利用可能である）かぎり、その技術をアクセシビリティ・サポーテッドではない（支援技術などと連携しない）方法で用いることができる。

ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0

現状では、ブラウザによって対応状況が異なるため、全ての環境で新機能を活用することは難しい状況です。article要素やheader要素などを使用してもIE6ではレンダリングされないためスタイルを適用することができません。そうしたHTML5の新しい要素やJSなどの"コンテンツ側の実装技術"と、ブラウザなどの"ユーザーエージェント"、音声ブラウザなどの"支援技術"とを鑑みて、依存するかしないかを検討する必要があります。コンテンツを重視するのであれば「依存する」として、JSを有効にしていることを前提に『HTML5.js』を使用し、下位のブラウザの見栄えを保持することができます。逆に下位のブラウザの対応が必須なら「依存しない」として今まで通りの対応をするということになります。

以前「Webという世界ではコンテンツというレベルでの情報提供が必須である」と述べましたが、HTML5で追加されたセマンティクスな要素を使用すれば、情報をより意味のあるものとして定義することができます。それらを導入することで、すぐに変革がもたらされるわけではありませんが、将来的にWebという媒体が最大限に力を発揮するためのいわば投資のようなものです。それに比べてユーザーエージェントや支援技術において問題とされているのは「古いブラウザがあるから導入できない」「新しい要素はまだ対応していない」ということばかりが注目されています。「依存」という考え方が生まれたのも、コンテンツの重要性が認められ、将来的なWebの姿が明確になってきたからだと思いますし、個人的には一歩踏み出していこうよ！という心境です。

やっと本題ですが、IE6～IE8向けの対応として『HTML5.js』を使用しているサイトがほとんどでした。IE9では対応しているものとして扱い、以下のように「IE8以下に適用」という指定をすれば良いと思います。

<!--[if lte IE 8]>	
<script src="./js/html5.js" type="text/javascript"></script>
<![endif]-->

またCSS3の擬似セレクタに対応するスクリプト『ie-css3.js』を使用しているサイトもありました。これも『DOMAssistant』というスクリプトと併用し、先ほどのコメント内に追記するだけです。

<!--[if lte IE 8]>	
<script src="./js/html5.js" type="text/javascript"></script>
<script src="./js/DOMAssistantCompressed.js" type="text/javascript"></script>
<script src="./js/ie-css3.js" type="text/javascript"></script>
<![endif]-->

メッセージ

YouTubeがIE6を代表する下位ブラウザのサポートを終了したのは記憶に新しいですが、最近ではGoogleまでもが段階的に終了することを明らかにしています。さらにTwitter上では「IE6 Must Die」というIE6の撲滅運動が展開されています。サポートを終了することには何の異存もありませんが、使用するユーザーがいる限り、何かしらの対処を施す必要はあると思います。実際に「HTML5 Gallery」で見たサイトのほとんどが下位ブラウザ向けにメッセージを添えています。

<!--[if lte IE 6]>	
<h2>What the…</h2>
<p>Woah—it looks like you’re using Internet Explorer 6 or below. While I salute you for being so staunchly old school, you gotta know that IE6 just can’t display modern sites like this properly. You’re still most welcome here—just be aware that this isn’t how it’s <em>meant</em> to look.</p>
<![endif]-->

日本語では以下のように設定すれば良いと思います。ブラウザのロゴなどを使用して、各ベンダへの直リンクを貼ってあげるとより親切です。

<!--[if lte IE 6]>	
<p id="caution"><strong>あなたは旧式ブラウザをご利用中です</strong>このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</p>
<![endif]-->

サポートしないということ

@import命令を使用して、NN 4.xやIE5.xにCSSを適用しないといった手法はよく知られていますが、これらの対処は表示崩れを回避するために施されているわけですから、サポートしているといえます。つまり、コンテンツ側の技術が有効で、問題なく機能することが前提で作られているので、機能しない下位ブラウザはもう知りません、特別な対処は施しませんというのがサポートしないということになります。「HTML5 Gallery」では以下のようにIE6向けのスタイルを適用しているサイトもありましたが、おそらくこうした対処もされなくなっていくのでしょう。

<!--[if IE 6]>	
<link rel="stylesheet" href="/css/ie6.css" type="text/css" media="screen" />
<![endif]-->

「これからの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のシェアが減っているとはいえ、しばらくはターゲットブラウザには含まれるとは思いますが、使えるものは使わな損々。トライ&エラーを繰り返しながらも積極的に活用していきたいですね。