CSS Hacks まとめ (1) @import hack
明日、会社のCSS勉強会があるので、ネタの一つとして基礎調査。
CSS Hackを原文として、中にあるHackネタを少しずつ紹介。途中で挫折したらごめんちゃい。
はじめに
多分、最も有名なCSS Hackだと思われる@import hackです。
Netscape Navigator 4などのCSS1しか解釈出来ないブラウザ*1が@importを解釈出来ないと言うバグを突いたHackですね。
流れとしては次のようになります。
実装例
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を使ってしまうとIE4でも読み込まれてしまうと言う問題です。つまり、
@import url("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属性を使ったhackは別に要らない気がする。何故なら@import hackでurlを使わなければ十分legacyブラウザ対策になるからである。
- legacy.cssは実際にはhttp://3ping.org/2006/04/09/0747のようなCSSを当てちゃえばいいんじゃないかなと思ったり。
CSS Hacks まとめ (2) media queries hack
はじめに
media queryって何だろう。僕も初耳だったのでちょっと調べて見る。仕様はこちらです。CSS3で定められているようですね。ちなみにCSS3はまだWorking Draftみたいです。*1
仕様を斜め読みすると、今まではscreenだとかtvとか特定のmedia type別にしかCSSを当てれない仕組みだった物をmedia queryを使うと限定的に当てる事が出来るみたいですね。
例えば、
@media screen and (min-width: 400px) and (max-width: 700px) { div { /* 限定的なスタイルを書く */ } }
みたいな感じ。
でOpera7*2だとこのmedia queriesを使ってOpera7だけに見せるスタイルを定義出来るみたいです。
仕組みについて
結論から言えばmedia queriesはCSS3の仕様ですから、理想的には全てのブラウザで対応していないハズなので、その記述があれば、そのスタイルは無視されるはずです。
つまりCSSの中で、
@media screen { body { /* これはmedia指定だけ */ } }
と書く分にはCSS2の仕様内だからOKなのに対して、
@media screen and (min-width: 550px){ body { background: red; } }
のようなスタイル指定は現状では全て無視されるハズ。しかしOpera7は無視してくれないそうです。
This trick, using CSS3 Media Queries makes styles invisible to any browser, but Opera 7. The explanation is simple: A browser should, when it encounters an @media rule it doesn’t recognize, ignore the entire rule. In CSS2, you can specify that a portion of a stylesheet should only be available for a certain media type, for instance @media print { } that will make the rules contained within only valid for printout.
この仕掛けは、CSS3のMedia QueriesがOpera7以外の全てのブラウザでスタイルを隠してしまう事を利用している。この説明は非常に単純である。Opera7は@mediaルールに遭遇した際にその内容を確かめる事無くそのルールを無視してしまう。CSS2ではあなたは定められたmedia typeだけで使える特定されたスタイルを定義出来る。*3例えば、@media print {}のように、プリントアウトの為だけのルールを作る事が出来る。
とあるので、@mediaの確認が甘いって事ですな。
Opera9で試してみた
http://virtuelvis.com/archives/2004/01/css-for-opera-7の記事内に、
@media all and (min-width: 0px){ div.pagefooter:hover:after { position: absolute; right: 30%; width: 265px; height: 131px; bottom: 3.5em; z-index: 0; content: url(/images/ghostgirl.png); } }
って言うのが実際に適用されてて、フッターリンクのhoverにかかってるからOpera7だと画像が出るらしい。Opera9で見たけど当然見えませんでした。w
Konquerorなら見えるのでは、と思ったけどやはり見えませんでした。
どうもこのスタイルは現在は適用されてないみたいです。
その代わり、逆にmedia queryを使ってFireFoxだけpre要素の表示を弄ってるみたいだけど、詳しくは分からない。
まとめ
このHack・・・、要らない。
現時点のmedia queryのサポート状況から考えたら、場合によっては使えるかもしれません。
CSS Hacks まとめ (3) caio hack
はじめに
Caioなんちゃらさんが作ったHackだそうです。
NN4から特定のスタイルを部分的に隠す為のHackです。
仕組み
/*/*/ div { color: red; } /* ここまで無視される */
って事みたいですね。
まとめ
部分的にNN4に適用するスタイルなんて今日びありえません。
なんか情報古いなぁ。。。