外部CSS使用時の意外な落とし穴

外部CSSに全て装飾をまとめて、htmlに読み込ませてサイト制作するのは今や当たり前。

外部CSSもあんまり長くなってしまうと探し辛いんで、用途ごとに分割してそれぞれの役割ごとにCSSファイルを便宜読み込ませて使用するのもごく普通のこと。

こないだその当たり前のことに余計なことを追加して余計な状態になったので、メモをしておく。

サイト制作をしていると、どんどん効率化を図ったり自分なりの方法とかを煮詰めていったりするものなんだけど、まだまだ完全に納得できるものにはなってないのね。
外部CSSの読み込みはこのサイトの場合、html側からstyle.cssを読み込んでいるんだけど、そのstyle.cssは

@charset "utf-8";
@import url("css/core.css");
@import url("css/entry.css");
@import url("css/navi.css");
@import url("css/other.css");
@import url("css/basic.css");
@import url("css/base.css");
@import url("css/sub.css");

のようにさらに別のCSSを読み込ませている。

これはもう自分なりにWordPressのデフォルトCSSだけで管理したくないので、通常のサイトを作る時と同じようにしている。自分が使えれば良いので、ガジェットはまる無視。

さて、スタティックなサイトでも同様にimport用のCSSを作っているけど、ある時思い立ってなんとなくクレジットのようなものを入れてみたのが始まり。

/**************************************
***************************************
 * CSS BasicStyle forHTML5 v1.0
 *
 * by, yusuke
 *
 * Date: 2011-04-10
***************************************
**************************************/
@charset "utf-8";
@import url("css/core.css");
@import url("css/entry.css");
@import url("css/navi.css");
@import url("css/other.css");
@import url("css/basic.css");
@import url("css/base.css");
@import url("css/sub.css");

こんな風に入れてみたくなったのです。

しかし、これで大きな問題が起きました。

あるブラウザでは読み込めない？

僕はいつもIE6、IE7、IE8、Chrome、Firefoxでクロスブラウザを取っています。
（※但し、当サイトは最初からIE6を捨ててます。IE6は終わりました。）

当然のように問題が無いように制作していたんだけど、お客様からレイアウトが崩れている、と。
最初お客様はMacだったので、おかしいと思いながらもMacのSafari5で確認をしてみる。するとまったく問題ない表示。はて？

改めてお客様にブラウザのバージョンを確認してみると、なんとSafari3だった。ほう、マニアック。

そこでWindowsのSafari3をインストールして見てみると、確かに崩れていた。なんとまぁ見事にfloatが吹っ飛んでいる。

しかしこの時点では原因が解らなかった。いつものようにChromeベースで制作してて、同じweb-kit系でここまで表示が違うってのは単なるミスじゃないよね。ありえない。

そこで色々検証をしてみてようやく気付いたんだけど、先述のように外部CSS内で別のCSSをimportする前にコメントアウトなどの文を入れると、“一切importされなくなる”ということだった。それもIE6以上、Firefox3以上、Chrome、そしてSafari5は大丈夫で、駄目なのが確認しただけでSafari3。たぶん4も駄目かも。

これは意外な落とし穴。まいったネこりゃ。

結局、importがあるCSSに上部コメントアウトを入れるのを止めたんだけど、どうしても入れたい場合には、

@charset "utf-8";
@import url("css/core.css");
@import url("css/entry.css");
@import url("css/navi.css");
@import url("css/other.css");
@import url("css/basic.css");
@import url("css/base.css");
@import url("css/sub.css");
/**************************************
***************************************
 * CSS BasicStyle forHTML5 v1.0
 *
 * by, yusuke
 *
 * Date: 2011-04-10
***************************************
**************************************/

のようにimportの記述の後に書くと大丈夫なようだ。

解決・・・というより、余計なことはしなさんなってことですな。