Progressive Enhancementについて考える

web Design

Graceful DegradationからProgressive Enhancementへ

Graceful Degradationとは要は、クロスブラウザというコンセプト。
どのようなブラウザであっても同じ様に見せるという考えて方で日本では今まで主流だった。
このような考え方では、どうしても下層の仕様(IE6とか)にデザイン等をあわせる必要がある。

しかし、webのような進化の早い分野で、新旧入り乱れる業界ではいつまでたっても最新の技術をユーザに提供できなくなる
そこで登場したのが、Progressive Enhancementというコンセプト

Progressive Enhancementとは

「情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」という考え方。
つまり、html5,CSS3など先行して実装させれた新機能を利用できる端末にはその機能を存分に駆使したUIを提供し、IE6など古いブラウザに対してはそのブラウザでの最大限のUIのみを提供する

Progressive Enhancementメリット

  • 新技術が実装されるにはユーザにとってプラスなメリットがある。

その技術を最大限提供することには、それだけで意味がある

  • 新技術を利用することでweb業界に対して普及の手助けになる。

例&参考文献

日本語解説
http://www.adobe.com/jp/newsletters/edge/february2009/articles/article4/index.html

詳しい解説サイト(英語)
http://www.alistapart.com/articles/progressiveenhancementwithcss/

実装方法 --> modernizr.js

実装するための方法はいくつかあると思うが、今回はmodernizr.jsを試す

公式サイト
http://www.modernizr.com/

手順1 読み込む

<script type="text/javascript" src="modernizr.js"></script>

読み込むとhtmlタグにそのブラウザが利用可能なhtml5のタグやCSS3のプロパティをclassとして書きだしてくれる
google chromeの場合

<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"></html>

手順2 対応可否に対応してスタイルを記述

Progressive Enhancementを実現するために、modernizr.jsは2つの方法で実装を知らせてくれる

  • htmlタグのクラス

上記例のようにhtmlのクラスとして利用可能なプロパティ等を書きだしてくれる
それをセレクタに記述して、CSSを指定すれば、実装可能

/* デフォルトのスタイル */  
#box{  
    width:220px;  
    height:100px;  
    padding:10px;  
    background-color:#eee;  
    border-right:2px solid #ccc;  
    border-bottom:2px solid #999;  
}
/* boxshadowが使える場合のスタイル */  
.boxshadow #box{  
    border:none;  
    -moz-box-shadow:#666 1px 1px 3px;  
    -webkit-box-shadow:#666 1px 1px 3px;  
    box-shadow:#666 1px 1px 3px;  
}

javascriptからでも利用可否を取得できる。

  if (Modernizr.boxshadow){
    // boxshadowが利用可能な場合
  }else{
    // 利用不可能な場合
  }