ひとつ前の記事でご紹介したwajoe.jp ですが、今回ページを作るにあたって、以前、原 一浩さんに教えていただいたcompassというフレームワークを使ってsassでやってみました。こちらの書籍も参考にしました。
スマートフォンやタブレットで見た時にもできるだけ内容が伝わるようにしたかったので、サイトはレスポンシブな作りとしました。その中で、レスポンシブなレイアウトに対応するためのmedia query 用のcssと、media queryを解さないIE8より古いブラウザ向けのcssをスマートに切り分ける方法を見つけたので紹介します。
参考 : “Mobile first” CSS and getting Sass to help with legacy IE
これをやることで、ie向けのスタイルシートを切り離すことができるので、モバイル向けの調整をする際にだいぶ楽にやれました。なお、sass, compass 自体については説明を省きます。上述のサイトや書籍をご参照ください。
strategyというか、全体的な仕組み
index.html
- headタグにてブラウザバージョン判定
- ie8以下なら ie.css を読み込む
- それ以外なら style.css を読み込む
ちなみに、cssファイル style.css はstyle.scss から、ie.css はie.scssから compass (sassのフレームワーク) により生成されます。
sassファイル
style.scss
以下を読みこませる
- 共通のcss
- media query 対応部分
ie.scss
以下を読みこませる
- 共通のcss
- media query 部分のうち必要なもの
- ie8以下専用のcss
コードは以下のような感じ
style.scss
@charset "UTF-8";
@import "compass";
@include global-reset;
@import "helpers";
@import "main";
@media only screen and (min-width: 768px) {
@import "768-up";
}
@media only screen and (min-width: 2000px) {
@import "2000-up";
}
@media print {
@import "print";
}
ie.scss
@charset "UTF-8";
@import "compass";
@include global-reset;
@import "helpers";
@import "main";
@import "768-up";
@import "ie768-up";
@media print {
@import "print";
}
ここで、実際に使用した.scssファイルは以下のようになります。ファイル名の先頭に _をつけておくと、コンパイル時に別ファイルとして生成されず、1ファイルにまとまります。
_2000-up.scss _768-up.scss _helpers.scss _ie768-up.scss _main.scss ie.scss print.scss style.scss
index.html
<head></head>内に以下を記述
<!--[if (gt IE 8) | (IEMobile)]><!--> <link rel="stylesheet" href="stylesheets/style.css"> <!--<![endif]--> <!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" href="stylesheets/ie.css"> <![endif]-->
というわけで、うまいこと切り分けができるようになりました。
sassについての感想
sass (scss) では 対象ごとに入れ子にしてcssを記述できるので、適用範囲の見通しが非常によくなると感じました。
サイトの規模がある程度以上になるとコンフリクトの問題が発生しがちですが、構造を把握しやすいためにコンフリクト自体が減ることが期待できます。
また、ある程度までならコードを見ただけでも問題箇所を特定できるだろうとも思いました。