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のサポート状況から考えたら、場合によっては使えるかもしれません。