プログレッシブ・エンハンスメントの考え方

HTMLコーダーにとって最も厄介なのは、ブラウザごとのCSS実装の違いだと言うと、多くのコーダーに頷いていただけるかと思います。

特にバグの宝庫で、その調査・回避及び対策のために、コーダーの帰宅時間を数時間は遅らせる最右翼であるIE6なんかは、開発側の人間からは引退を渇望されて止まない人気者かと思います。まぁ、Firefoxでバッチリ組んで、IEで確認したら見るも無残に崩壊してるなんてよくある風景です。IEはバグ以外にもCSSの対応状況などでも足を引っ張っています。

あ、念のためのCSSの実装やUIデザインを含めてIEは嫌いですが、IEを叩くエントリではないです。

2010年8月現在、メジャーなブラウザを数えると、IE6、7、8、Firefox3、Safari5、GoogleChrome5、Opera10と非常に多くのブラウザが混在しております。

クライアント側からすると、どのブラウザ環境で閲覧しても同じに表示されるのが当然!となります。
なので、制作側はCSSハックなどを駆使して、どのブラウザでも同じ見た目になるようにするのが当たり前でした。
(「でした」って過去形で書いてますが、現在もそうするのが主流だと思います。)

やっとさ本題に入れますが、そんな風に収束するどころか、どんどん細分化が進む閲覧環境に業を煮やしてかどうかは知りませんが、「プログレッシブ・エンハンスメント」という考え方が生まれました。
これは、そもそもレンダリングエンジンやCSS実装の異なる各ブラウザで、無理にCSSハックを用いて表示を合わせるのではなく、
各閲覧環境に応じた表示を行うというものです。つまり、各ブラウザでバラバラな表示でいいじゃん!という、ある意味これまでの常識を覆す考え方です。

具体例として、WordPressのログイン画面を例に挙げてみます。
下記画像は同一ページを異なるブラウザで表示させたものです。

・IE6
IE6でのWordPressログイン画面

・firefox3.6
Firefox3.6でのWordPressログイン画面

はい、違いとしてはFirefoxの方はWordPressロゴ下の白い矩形が角丸でドロップシャドウかかってます。
また、ログインボタンも同様に角丸になっています。これは画像を使用しておらず、CSS3での表現となります。

従来ですと、IE6でも同様に見せるため、背景画像指定用に余計な<div>タグを追加したりする必要があり、デザインと文書構造の分離を目指すWEB標準に逆行するようなソースになってました。

CSSの記述をブラウザ毎に分けず、ドロップシャドウと角丸を指定しておけば、レガシーブラウザでは、無視され、モダンブラウザではリッチに表示されます。こんな風にコーダーや制作者側からすれば、工数やソースがぐっと軽減されるプログレッシブ・エンハンスメント。ただ、問題は、この考え方をいかにクライアントに理解してもらい、GOサインをいただくかってとこなんですよね。

コメントを残す

メールアドレスが公開されることはありません。