古いブラウザ用のCSSを先に書くレガシーファースト

※本記事は、前回の記事「モバイルファーストでデザインする際のCSSの書き方」を既にお読みであることを前提にしています。まだお読みでなければ、先にそちらをご参照下さい。

モバイルファースト(レスポンシブ・ウェブデザイン)で困る古いIEへの対策

モバイルファースト設計でCSSを記述すると、IE8以下のような古いブラウザでは、閲覧ウインドウのサイズに関係なく「モバイル版デザイン」が表示されてしまいます。

それは、IE8以下のような古いブラウザでは、「レスポンシブ・ウェブデザイン」の記述方法(CSS3のMedia Queries)に対応していないのが原因です。

これに対処する方法としては、
(1) それはそれで割切る。(＝対応を諦め、古いブラウザにはモバイル版を見せる)
(2) IE8以下にもレスポンシブ・ウェブデザインを認識させるスクリプトを読ませる。
……といった方法があります。

しかし、このどちらにも問題点はあります。

■ほぼIE8だけが問題だと言えるが、IE8を切り捨てたくない場合も
レスポンシブ・ウェブデザインで使うCSSの機能「Media Queries」は、Internet ExplorerではIE9から対応しました。他の主なブラウザでは、Firefox3.5以降、Chrome1以降、Safari4以降、Opera7以降で既に対応していました。したがって、現在の利用者数から考えると、事実上IE8だけが問題だと考えて良いでしょう(IE8のシェアは4％程度というデータがあり、IE7以下はもっと低いですから)。「IE8にはモバイル版を見せる」と割り切れる場合は、それが楽です。

しかし、いくら正式サポートが終了したとはいえ、Windows XPユーザがまだ少なからず居る現状では、IE8は切り捨てにくいかも知れません(Windows XPには、IE9以降はインストールできないため)。その場合には、上記(2)の方法があります。

■Media Queriesが使えれば全て解決できるとは限らない
(2)の方法を使えば、IE8以下でもMedia Queriesの記述が解釈されるようになります。しかし、「レスポンシブ・ウェブデザイン」が表示可能になったところで、(古いブラウザであるがゆえに)そこ以外の部分で使われる「CSS3で新たに追加されたプロパティ」などが意図通りに描画されるとは限らない問題もあります。表示されないだけならまだしも、表示が崩れてしまうようだと特に困るでしょう。

そこで、記述労力を低く抑えておきつつも、IE8以下の古いブラウザでもそれなりに表示できるようなスタイルを追加しておく、「レガシーファースト」なCSSの書き方を試してみてはいかがでしょうか。

古いブラウザ用のCSSを先に書くレガシーファースト

前回の記事「モバイルファーストでデザインする際のCSSの書き方」では、スマートフォン等のモバイル向けデザインを「共通スタイル」として作成する記述方法をご紹介致しました(下図左側)。それに対して「レガシーファースト」では、「モバイル用デザイン」ではなく、そのさらに前に「古いブラウザ(レガシー)用のデザイン」を用意して、それを「共通スタイル」として使います(下図右側)。


この方法だと、「古いブラウザでも表示が崩れない(＝専用の簡易デザインが表示される)モバイルファーストなデザイン」が作れます。その上で、「同じデザインは1度の記述で済む」といった、モバイルファーストのメリットはそのまま得られます。

今回は、極力労力を押さえつつ、古いブラウザにも対応するCSSの記述方法をご紹介致します。

それでは次のページから、レガシーファーストなCSSの記述方法を見ていきましょう。