A List Apart - for people who make websites

A List ApartにおいてAaron Gustafson氏がUnderstanding Progressive Enhancementのタイトルのもと累進的拡張によるWebサイトの構築を紹介している。累進的拡張(Progressive Enhancement)はもともと2003年にSXSW AustinでInclusive Web Design For the Future with Progressive EnhancementとしてSteven Champeon氏およびNick Finck氏によって紹介された考え方。Inclusive Web Design For the Future with Progressive Enhancementで紹介されている累進的拡張戦略を簡単にまとめると次のようになる。

  1. 最小限の共通部分から開始する
  2. 構造に対してデザインする
  3. 最低限のデバイスに対して機能を追加する
  4. アクセス性に対して機能を追加する
  5. 構造化されたレイアウトに対してレイアウトマークアップとスタイルシートを追加する
  6. リンクを使って最低限のスタイルシートを追加する
  7. JavaScriptやCSSで振る舞いを追加する
  8. うまく動作しないブラウザ向けにハックを追加する
  9. 最新のブラウザ向けにスタイルを定義する

Aaron Gustafson氏はUnderstanding Progressive Enhancementにおいて累進的拡張の考えを、もっとも重要なのはコンテンツであってまずはコンテンツを作成し、そこにCSSでデザインを追加し、最後にJavaScriptで振る舞いを追加すると説明している。チョコレートでコーティングされたピーナッツのおかしを例にあげ、中心にあるピーナッツがコンテンツ、そこにチョコレートをコーティングし(CSS)、最後に糖衣(JavaScript)で仕上げるというわけだ。

The Chocolatey Layers of Progressive Enhancement - Understanding Progressive Enhancementより抜粋

Inclusive Web Design For the Future with Progressive Enhancementで紹介されている内容は2003年の文書であるということもありすでに古く、Understanding Progressive Enhancementの説明も概念的で具体的な方法は紹介されていない。

Progressive Enhancementのより具体的な実現方法としてはAlex Holt氏がSmashing Magazineにおいて紹介したUnobtrusive DOMプログラミングが参考になる。Unobtrusive DOMプログラミングではHTML(コンテンツ)、CSS、JavaScriptをそれぞれ別のファイルとして完全に分離する。そのための原則や、jQueryを使って具体的にどのように作成すればいいかが説明されている。累進的拡張に興味をもった場合、合わせてUnobtrusive DOMプログラミングとHTML 4.01の正しい最小記述方法あたりをチェックするといいだろう。