実践
どうする?ブラウザ機能格差の解消
第1回 3つの実装の考え方

ブラウザ間に機能格差がある場合、実装には大きく分けて3つの考え方があります。

2012年04月05日発行

目次

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

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

現在普及しているさまざまなブラウザ

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

CSS3サポートの概観
*注:IEのCSS3サポートの見通し

次期バージョンのIE 10ではさらに多くの機能をサポートする予定です。Internet Explorer Test Driveでは、IE 10のブレビュー版やIE 9で、HTML5やCSS3の新機能を試すことができます。

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

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

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

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

Graceful Degradationの適用

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

Graceful Degradationの概念図
新技術への対応度が高いブラウザを基準に設計し、それ以外のブラウザにはやや表現を削ぎ落して提供する。

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

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

Chromeで見たtwitterのログインページ
フォームはすべてCSSの指定により角丸になっていて、フィールドにカーソルが入ると、そのフォームのふちが光る効果が付けられている。

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

IE8で見たtwitterのログインページ
フォームは角丸ではなく、カーソルを入れた際の効果もないが、機能としてはまったく同等になっている。

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

div{
    width:400px;
    height:200px;
    border:6px solid #090;/*古いIEでも読める*/
    border-radius:30px;/*最新ブラウザ用*/
    background:#0F3;/*古いIEでも読める*/
    background:-ベンダープリフィックス-linear-gradient(#fff, #0F3);/*最新ブラウザ用*/
}
border-radiusを設定
上記のソースには、角丸とグラデーションの2種類の設定がある。Chromeで見ると角丸になるが、ソースコードでborder指定をしてあるので、border-radiusに非対応のInternet Explorer 8でも同様の色で矩形が表現できる。
Chromeで見た場合
IE8で見た場合

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

Progressive Enhancementの適用

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

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

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

Regressive Enhancementという考え方の適用

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

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

Regressive Enhancementの概念図
新技術に対応度の高いブラウザを基準に設計し、対応度の低い、あるいは非対応のブラウザに関しては、別の方法を使って機能や表現を追加します。

Regressive Enhancementのデメリット

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

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

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

小山田 晃浩
小山田 晃浩
フロントエンド・エンジニア

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2015年まで5連続でMicrosoft MVP for IEを受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』(共著:エクスナレッジ、2011年3月12日)や『CSS3デザイン プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。

外村 奈津子
外村 奈津子
エディター

情報出版社に在籍中、Mac雑誌、中高年向けフリーペーパー、コラムサイト運営、健康食雑誌、グラフィック・Web技術書籍編集、IT系ニュースサイトの編集記者を経験。その後フリーランスのエディター/ライターとして独立。2011年4月より株式会社ピクセルグリッドへ入社。ピクセルグリッドが提供するフロントエンド技術情報を提供するサービス「CodeGrid」の編集を担当している。