HTML5やCSS3を使うとき頭のイタイこと

CSS3の新技術の新技術を紹介する際、ときどき触れていたように、CSS3はベンダーの「先行実装」によって使用可能になっているものも多いのです。

CSS3へのビジュアル系ブラウザの大まかな対応度を見てみると、Apple Safari、Google Chromeが高く、次いでOpera、Firefoxが続きます。Internet Explorer 9は、それに比べるとやや劣りますが、CSS3をある程度サポートしています*。

問題は、依然ユーザーが存在しているInternet Explorer6～8が、CSS3で新しく追加された機能に、ほとんど対応していないことです。会社組織の法人ユーザーなどは、自身の判断でOSやブラウザのアップグレードをできない一元管理の環境にあることもあります。

したがって、ウェブ制作の決裁権限を持つ人が、これらの古いブラウザのユーザーであることも珍しくありません。このような理由から、なかなか新技術を使ってみることができない人も、多いのではないでしょうか。

しかし、逆に考えれば、古いIEさえなんとかなれば、HTML5やCSS3を使ってより豊かな表現や利便性を提供できる可能性があるともいえます。

この「ブラウザ間の格差」をどのように扱っていくかについては、いくつかの考え方があります。どの考え方が正しいというわけでなく、サイトの性質やかけられるコストによって、柔軟な選択をする必要があります。

Graceful Degradationの適用

Graceful Degradation（グレイスフル・デグラデーション）とは、CSS3への対応度が高いブラウザを基準にサイトを設計します。ただ、対応度が低かったり、また非対応のブラウザに対しては、いくぶん表現を削ぎ落として提供するというものです。これがDegradation（劣化）といわれるゆえんです。

twitterのログインページは、このよい例です。

Chromeのフォームの入力欄はborder-radiusプロパティを用いた角丸になっています。さらに、フィールド内にカーソルを入れると、わかりやすいように、その欄がぼんやりと光るようになります。これはbox-shadowプロパティなどを使ってつけた光効果に、透明度を設定しておき、この透明度をtransitionでアニメーションさせています。

これらは主にCSS3の機能を使用していますので、IE8で同じ効果を得ることはできません。フォームも四角ですし、カーソルを入れたときの効果もありません。しかしログインや新規登録などのページ本来の機能は、同等に提供されています。

自動的にデグラデーションしてくれるCSSは、例えばこのように書きます。

div{
    width:400px;
    height:200px;
    border:6px solid #090;/*古いIEでも読める*/
    border-radius:30px;/*最新ブラウザ用*/
    background:#0F3;/*古いIEでも読める*/
    background:-ベンダープリフィックス-linear-gradient(#fff, #0F3);/*最新ブラウザ用*/
}

上記のソースには、角丸とグラデーションの2種類の設定があります。Chromeで見ると角丸になるが、ソースコードでborder指定をしてあるので、border-radiusに非対応のInternet Explorer 8でも同様の色で矩形が表現できます。

このように、古いIEでも対応できるスタイルと、最新ブラウザに合わせたスタイルを併記することで、自動的にデグラデーションが行われます。

Progressive Enhancementの適用

Progressive Enhancement（プログレッシブ・エンハンスメント）は、CSS3に対応度の低い、あるいは非対応のブラウザを基準に考えます。これらのブラウザを基準に、ベースを作っておき、対応度の高いブラウザに対してだけ、機能やリッチな表現を追加していくという考え方です。

サイトによっては、この考え方を採用する場合があるでしょう。例えば、報道系のサイトは「表現の豊かさ」というよりは、まずは、記事に書かれた事実関係などが確実にユーザーに伝わることが大切です。その基本情報が特定のブラウザでないと、閲覧できない危険性があるサイトであってはいけません。

高機能なブラウザに対しては、時間的や人的なコストが許せば、さきほどのtwitterのような、より使い勝手のよいUIを、別途提供することを考えてもいいでしょう。これはサイトがどのような印象をユーザーに与えたいかなど、サイトの性質にもよります。

Regressive Enhancementという考え方の適用

Graceful DegradationやProgressive Enhancementの考え方を適用すると、いずれにせよデスクトップのブラウザ間でも見栄えの違いや、若干の機能の違いが生まれることは否めません。実際、そのような機能や見栄えの差があってもいいという割り切りを、制作現場で常にできるかを考えると、なかなか難しい場合もあります。

そこで、生まれた考え方がRegressive Enhancement（レグレッシブ・エンハンスメント）です。まず、CSS3の対応度が高いブラウザを基準にします。対応度の低いブラウザは、CSS3以外の技術を使って、対応度の高いブラウザと同等の機能を提供します。この対応度の低いブラウザに適用して、対応度の高いブラウザと同等の機能を提供するための方法を、Polyfill（ポリフィル）と呼ぶことがあります。

Regressive Enhancementのデメリット

Regressive Enhancementの考えを採用する場合、ふまえておかなければならないことがあります。もともとブラウザのネイティブ機能で対応していないものを、JavaScriptなどを用いて対応しているかのように見せられるメリットがある一方で、デメリットもあります。

古いブラウザにJavaScriptなどを実行させて、負荷を増やす可能性があるということです。必ずしも負荷が増える、ユーザーのページ閲覧にストレスがかかる、とは言い切れないのですが、それを確かめるためには、検証する必要があります。この検証コストを念頭においておくべきでしょう。

ですから、Polyfillを使ってとにかく新機能を使おうと考えるのではなく、まずはその機能が、ユーザー体験上重要な意味がある、クライアントからの強い要望があるなど、それなりの必然性がある場合に限った方が、賢明といえます。