プログレッシブ・エンハンスメントを意識するとCSS3へのためらいが減った

CSS3を使うにあたってネックになるのがIEの存在です。このブログで何回も言っているように、CSS3への対応が遅い上にユーザーのバージョンアップも進んでいません。

しかし、このブログではIEのことはあまり気にせずCSS3を使っています。このブログのユーザーは一般的なサイトに比べてIEユーザーが極端に少ないというのも理由のひとつとしてありますが、プログレッシブ・エンハンスメントという言葉を意識するようになったのが最も大きな理由です。

progressiveenhancement.jpg

で、先日「CSS3を使うにあたって知っておきたいIE対策のまとめ」という記事を書いたばかりですが、今回はプログレッシブ・エンハンスメントについて個人的に思うことを書いてみます。

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

プログレッシブエンハンスメントは英語でProgressive enhancementとなり、直訳すると「革新的な拡張?」でしょうか。よく分からないのでWikipediaで調べてみることに。

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or better bandwidth.

英語は得意ではないですが、意訳してみると。

プログレッシブエンハンスメントとは、アクセシビリティへの配慮、セマンティックHTMLによるマークアップ、外部化されたスタイルシートやスクリプト技術を重視したウェブデザインの手法です。 プログレッシブエンハンスメントは、どのような環境のユーザーでもアクセスすることができる基本的な内容や機能と、先進的なブラウザや高速なインターネット回線を利用しているユーザーに提供されるより美しく機能的なコンテンツに分割してプログラミングするウェブ技術を使用します。

後半はかなり適当です。。

要するにChrome、Safari、Firefox等のモダンブラウザを使っている環境の整ったユーザーに対してはリッチなコンテンツを提供しようという考え方です。

ほぼ反対の意味として違うブラウザでも同じように表示しようとするクロスブラウザという言葉があります。

最近「IEなんて切り捨ててしまえ」という意見をよく見ます。気持ちは分かります。けど、IEものシェアはいまだ高いままですし、まったく無視するというわけにはいきません。

ですので、「切り捨てる」というのが、内容が伝わらなくてもいいという意味だったらもったいないですね。

どのブラウザでも内容を伝えることができるのが大前提で、その上でモダンブラウザを使っているユーザーに対してはより美しく見える装飾や便利なスクリプトが使えるようにするのがプログレッシブ・エンハンスメントだと思います。

本当に煩わしいIEですが、プログレッシブ・エンハンスメントを意識すると気分はだいぶ楽になると思います。

CSS3を使うことについて

クロスブラウザという言葉を意識して、CSS3を使うことをためらっている人も多いのではないでしょうか。

しかし、プログレッシブ・エンハンスメントという概念でサイトを作成するとCSS3を使う際のためらいも減ると思います。少なくとも私はあまりためらわずにCSS3を使えるようになりました。

CSS3で追加された角を丸くするborder-radiusというプロパティがありますが、角が丸かろうが角張っていようが内容は正しく伝わります。

div#sample {
  border:1px solid #aaa;
  border-radius:5px;
}

transitionにしても同じです。スムーズに変わろうと突然変わろうと、最終は一緒ですので内容を伝えるという意味ではあまり影響ありません。

ただ、CSS3をサポートしていないブラウザで見たときでもちゃんと表示されるよう気を付ける必要があります。

例えば、以下のようにCSSを指定すると、RGBaカラーに対応していないブラウザの場合、文字と背景がともに白くなってしまい、中にあるテキストが見えません。

div#sample {
  color:#fff;
  background:rgba(0,0,0,0.7);
}

次のようにRGBaカラーに対応していない場合のことも考えた設定にしてあげるといいですね。

div#sample {
  color:#fff;
  background:#4c4c4c;
  background:rgba(0,0,0,0.7);
}

これは単純な例ですが、なくてもちゃんと表示されるけど、あればもっといいという感覚で使えばいいのかなと思います。

最後に

プログレッシブ・エンハンスメントという考え方が広まることで、ブラウザの乗り換えも進むのかなとも思います。

ウェブ制作者側がブラウザによって内容を差別化し、より完成されたサイトを見たいユーザーはより進んだブラウザを使うようになる。

他のブラウザに乗り換えられてしまうと困るので、ブラウザ側もバージョンアップの対策に力を入れる。

そんな循環になればいいなと思いました。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加