0コメントTweet共有/ブックマーク外部CSSに全て装飾をまとめて、htmlに読み込ませてサイト制作するのは今や当たり前。外部CSSもあんまり長くなってしまうと探し辛いんで、用途ごとに分割してそれぞれの役割ごとにCSSファイルを便宜読み込ませて使用するのもごく普通のこと。こないだその当たり前のことに余計なことを追加して余計な状態になったので、メモをしておく。サイト制作をしていると、どんどん効率化を図ったり自分なりの方法とかを煮詰めていったりするものなんだけど、まだまだ完全に納得できるものにはなってないのね。url("css/sub.css");のようにさらに別のCSSを読み込ませている。これはもう自分なりにWordPressのデフォルトCSSだけで管理したくないので、通常のサイトを作る時と同じようにしている。自分が使えれば良いので、ガジェットはまる無視。スタティックなサイトでも同様にimport用のCSSを作っているけど、ある時思い立ってなんとなくクレジットのようなものを入れてみたのが始まり。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。これは意外な落とし穴。2011-04-10*****************************************************************************/のようにimportの記述の後に書くと大丈夫なようだ。解決・・・というより、余計なことはしなさんなってことですな。コメントをキャンセルメールアドレスが公開されることはありません。雑記スポンサードリンクこのサイトではゆうすけ個人のblogとして、普段の雑記や技術的なトピックス、デザイン的な何かを発信したり、考察していきたいと思います。