TumblrHTML5・CSS3対応のブラウザが増えてきて、制作のコンセプトも変化してきました。プログレッシブエンハンスメントなどユーザーのブラウザ環境に焦点を置いた制作コンセプトをまとめました。[...]HTML5・CSS3対応のブラウザが増えてきて、制作のコンセプトも変化してきました。プログレッシブエンハンスメントなどユーザーのブラウザ環境に焦点を置いた制作コンセプトをまとめました。足りない知識を埋めながら書いたので一部認識が間違ってる箇所があるかも知れませんが、その場合はご指摘頂けると助かります。新しく高水準のブラウザにはCSS3やjsなどでよりリッチなデザインや機能を提供するという考えです。Enhancementには下記の原則があります。JavascriptJavaScriptをHTMLから分離すること。JavaScriptが動作しないユーザーにも最低限必要なコンテンツは表示・機能するようにする。Enhancementの例として分かりやすい例がCSS3による表現の違いだと思います。下記はTwitterのキャプチャです。Firefox、ChromeなどのCSS3に対応してるブラウザで見ると角丸やドロップシャドウで表現されます。手前味噌ですが、このブログもCSS3に対応してるブラウザで見ると角丸やドロップシャドウが表現されます。Clalenderのボタンや、Evernoteのボタンなど、この様な表現は意識しないと気付かないだけで多くのサイトで見られます。その他いいサンプルが見つからなかったのですが、ファイルアップローダーで、最新のブラウザではドロップ&ドラッグでファイルをアップできるなど、リッチな機能を提供するケースもあります。古いブラウザにもそれなりに最低限の機能を提供するという考え方。Enhancementと似てますが、方向性は全くの逆です。Degradationは基準より低水準なブラウザへ必要最低限の機能を提供することに主点を置きます。対応してないIE6では透過されて表示されません。Degradationとするならこの場合は、透過gif画像で代替えします。Degradationではないので特に対策を施してません。新しいユーザーが得られるリッチな体験は付加価値的なものです。よってユーザーはブラウザの選択を迫られる事はありません。古いブラウザでは最低限の機能しか提供されず、暗示的に新しいブラウザの使用を促す側面もあります。Degradationもどのブラウザを基準とするかは明確には定められてません。Degradationは、モダンブラウザと言われるFirefox、Chome、SafariなどHTML5・CSS3をサポートするブラウザを基準とする例が多いです。Enhancementはこのモダンブラウザに加えIE7〜8、場合によってはIE6も含みます。実際はどのブラウザまでを基準とするかは制作により異なると思います。最近のブラウザ(モダンブラウザ)と同等の機能デザインを実装する方法です。これによりどのブラウザでも同じユーザーエクスペリエンスを提供する事ができます。下記の様なスクリプトがあります。IEIE6〜8でCSS3角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトです。HostingIE6や7で、HTML5を使えるようにするライブラリです。ModernizrHTML5やCSS3の対応を検出し結果に応じて機能を振り分けするライブラリーですが、IE6、7などのHTML5に非対応のブラザウでもHTML5をレンダリングすることもできます。要はどのブラウザをメインターゲットとし、それより新しいブラウザや古いブラウザにはどう対応するか、サイトの目的や、費用、制作期間などと絡めてそういう点をしっかり定めておく事が大事だと思います。Spiceサービス作りましたAbout自分で得た情報、学んだことのアウトプットのために始めたblogです。して情報を共有することで少しでもWEB業界に貢献できたらなと思ってます。このblogが誰かの役に立てたら幸いです。内容で間違いなどありましたら指摘頂けると助かります。AuthortooltipHiro東京在住のフリーランスwebデザイナー。TSUKURIBEと言う屋号で活動してます。お問い合せは右のフォームまたはTSUKURIBEのサイトよりお願いします。Formフォームまたはこちらよりお問い合わせください。