2015年2月27日(金) 16時23分19秒 [仕事]

モバイルファーストの前にレガシーファーストなCSSで

モバイルファースト設計でCSSを記述すると、Media Queriesの記述方法に対応していない古いブラウザ(特にIE8以下)では、常にモバイル版デザインが表示されてしまいます。
それ自体は、「古いブラウザにはモバイル版を見せる」と割り切ってしまえば済む話なので別に構いません。

でも、モバイル版デザインもわりと凝っていて、モバイル版デザインの中にも「古いブラウザでは表示が崩れるようなCSS」が含まれていると、ちょっと困ります。その場合、古いブラウザではまともに閲覧できなくなってしまいますから。

そういった問題を防ぐために、モバイルファースト設計でCSSを記述する際に、「モバイル版デザイン」よりも前に、「レガシー版デザイン」を記述しておく方法がおすすめです。
モバイルファーストよりもレガシーを先にするわけなので、「レガシーファースト」とでも言えばいいかなと考えて記事のタイトルにも使いました。

◆古いブラウザ用のCSSを先に書くレガシーファースト（＠All About ホームページ作成ガイド）

うちのサイト（のトップページ）には、この書き方を採用しています。
本当はトップページに限らず全サイトに適用したいんですが、そこまで自分のウェブサイトに時間を割けていないので(^_^;)、今のところはトップページだけに留まっています……。
もうちょっとなんとかしないとな……。^^;;;