sassでIE向けのCSSを切り分ける (wajoe.jpの裏側)

| 0件のコメント

ひとつ前の記事でご紹介した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を記述できるので、適用範囲の見通しが非常によくなると感じました。

サイトの規模がある程度以上になるとコンフリクトの問題が発生しがちですが、構造を把握しやすいためにコンフリクト自体が減ることが期待できます。

また、ある程度までならコードを見ただけでも問題箇所を特定できるだろうとも思いました。

コメントを残す