CSS Hacks まとめ (1) @import hack

明日、会社のCSS勉強会があるので、ネタの一つとして基礎調査。

CSS Hackを原文として、中にあるHackネタを少しずつ紹介。途中で挫折したらごめんちゃい。

はじめに

• The @import Hack
• Hide CSS from browsers :: @import

多分、最も有名なCSS Hackだと思われる@import hackです。
Netscape Navigator 4などのCSS1しか解釈出来ないブラウザ*1が@importを解釈出来ないと言うバグを突いたHackですね。

流れとしては次のようになります。

1. まずはレガシーブラウザ*2の為に読むのに至ってシンプルなスタイルを用意する(legacy.cssとする)
2. 次に@import hack用のimport.cssを用意し、modernブラウザ用のスタイルを読み込ませる

実装例

head要素内で、

<link rel="stylesheet" type="text/css" href="legacy.css" />
<link rel="stylesheet" type="text/css" href="import.css" />

のように記述し、import.css内で、

@import "modern.css";

のようにします。

ここで注意しなければならないのは@importの後のCSSの所在指定ですけども、urlを使ってしまうとIE４でも読み込まれてしまうと言う問題です。つまり、

@import url("modern.css");

のように記述するとIE４でもmodern.cssがあたってしまう事になるので注意。

合わせ技

media="all" hack (NN4から見えないようにする)

media属性でall指定があるとNN4だと見えないそうな。

<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="hiddenFromNav4.css" media="all" />

media not "all" (IEから見えなくする)

おそらくこれってIE7では駄目なんじゃないかと思う。暇な時に試してみるけども。

<style type="text/css">@import "modern.css" screen;</style>

style要素にて@importの後にmediaタイプとしてall以外の値、例えばscreenなどを指定するとIEからは見えないそうだ。

その他

import.cssは何故必要か

link要素でcssを指定すればalternate stylesheets*3が使えるからだそうだ。
別にそれを使うつもりが無いならstyle要素でimportしても良いって事になる。

でもちょっとかっこ悪い気がする。

legacy.cssの最後に@importを書いちゃ駄目か？

cssの仕様によれば@importは他の定義よりも先に書いてなきゃ駄目だよって事らしい。*4

まとめ

1. media属性を使ったhackは別に要らない気がする。何故なら@import hackでurlを使わなければ十分legacyブラウザ対策になるからである。
2. legacy.cssは実際にはhttp://3ping.org/2006/04/09/0747のようなCSSを当てちゃえばいいんじゃないかなと思ったり。

*1:最も誰も使ってないだろうけど

*2:CSS2をサポートしないブラウザ

*3:Style Switchingにalternate styleについて書いてある

*4:6.3 The @import rule