eyemovic inc.

Culture blog会社の活動・働き方

2012.10.23

プログレッシブ・エンハンスメント

新旧・各種デバイスのブラウザが多様化した今、
これからのCSSは、いよいよ『クロスブラウザ』から
『プログレッシブ・エンハンスメント』に変わる時期かと思います。

・HTML …… 構造・情報
・CSS …… レイアウト・装飾
・JavaScript …… 状態・ふるまい

とした場合、今回はCSSの装飾についてのお話です。

『クロスブラウザ』
どのブラウザでもまったく同じ見栄えを。

通常、このクロスブラウザを実現するためには、
装飾専用の画像とそれを補うHTMLタグ、
ものによってはJavaScriptによる補助が必要です。

しかし、ブラウザが多様化した今では
サイトを各種デバイスに最適化している・いないにかかわらず、
スマホ・タブレット・テレビ・ゲーム機から閲覧することが意識されています。

クロスブラウザは、そのメリットの反面
デバイスに応じた自由なレイアウトが難しく、
高スペックのデバイスで見る場合は気づかなくても、
その他のデバイスでは、意外と表示にレスポンス低下が見られます。

そこで登場するのが、『プログレッシブ・エンハンスメント』です。

『プログレッシブ・エンハンスメント』
高機能なブラウザにはよりリッチな体験を。

わかりやすい例では、丸角・ぼかし・影・グラデーションなど、
なくても閲覧に困らない程度の補助的な装飾は、CSS3で装飾。
CSS3が効かないブラウザは、無理なくベーシックな見栄え。
「ブラウザの違いを受け入れる」という考え方です。

ウェブの進化でできることが増える分、
サイト全体に『プログレッシブ・エンハンスメント』を取り入れることで
デバイスを選ばないフレキシブルなサイトを目指す道が開けると思います。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。