f.nishimura's guide blog

All About ホームページ作成ガイドの西村文宏によるガイドブログ

Media Queriesを使って新旧ブラウザにうまく対応させるレガシーファースト

CSS3の「Media Queries」を使ってレスポンシブWebデザインを採用するとき、モバイルファーストという書き方があります。

先に(あまり複雑なレイアウトにはならない)「モバイル向けのデザイン」を記述しておいて、そこからMedia Queriesを使って(モバイル用のデザインに上書きする形で)「広い画面用のデザイン」を追加していく記述方法です。

これと同じ方法を使って、以下の2ステップでCSSを書けば、新旧ブラウザの両方に楽にうまく対応させる記述ができそうです。

(1) 先に『Media Queriesを使わないで』古いブラウザ向けのCSSを書いておく。
(2) その後で『Media Queriesを使って』最近のブラウザ向けのCSSを(必要に応じて上書きする形で)書く。

※ここでの「古いブラウザ」とは、「Media Queriesを解釈できないブラウザ」を想定しています。つまり、「古いブラウザ」は(1)のCSSだけが読めて、(2)は読まないことになります。

モバイルファーストならぬ、レガシーファーストとでも言えるでしょうか。
古いブラウザ用のデザインを作る場合、たいていは「単純なレイアウト」にせざるを得ないでしょうから、この書き方だと全体的に労力が少なくて済む気がします。(最終的にどんなデザインにしたいのかに依りますが。^^;)

「Media Queriesを解釈できないブラウザ」は同時に「最近の様々なCSSテクニック」も表示できないことが多々あるので、それなら「Media Queriesを解釈できないブラウザには、レガシーデザインのCSSしか読ませない」という方針です。
この方針でデザインを作ると、何かと手間が掛からない気がします。

ちなみに、Internet ExplorerがMedia Queriesに対応するのはIE9以降です。
「IE8以下にもMedia Queriesを解釈させるスクリプト」は存在しますが、それは使わないでおいて、「IE8以下にはレガシーブラウザ向けのCSSだけを読ませる」という方針の方が、楽にうまくデザインできる気がします。

……という話を、そのうちAll Aboutで記事にしてみようかな……と、なんとなく考えています。(^_^;)
おぼろげに考えているだけですが。