個別記事

前後の記事

IE 7 用の CSS ハック

この記事が属するカテゴリー
CSS

この記事で紹介しているハックとは別のソリューションを「IE7 を含むモダンブラウザ向けの CSS ハックまとめ」と言う記事で紹介しているので、合わせてご覧になって見ると良いかもしれません。

Internet Explorer 7 の Beta 2 Preview が公開された。んで、公式的にはバグを取り除くんで現存する CSS ハックは使えなくなるよってことだったんだけど、早速 IE 7 向けの CSS ハックが報告されている。

カラクリとしては、IE7 が対応していない :lang() 疑似クラスを使うって方法らしい。下記のような (X)HTML を例とする。

<body lang="ja">
<div id="contents">
<p>foo</p>
</div>
</body>

これに対して、まずベースとして IE7 を含む全てのブラウザ向けの指定を行う。例えば背景色を赤とする。

#contents {
    background-color: red;
}

その後に IE7 を含む全てのバージョンの IE 以外のブラウザへの指定を !important でオーバーライドさせる。例えば背景色を緑。

*:lang(ja) #contents {
    background-color: green !important;
}

ただ、このままだと Safari も :lang に対応していない。そこで、Safari で不完全に対応されている CSS3 の :empty 疑似クラスを使って Safari 向けの指定を行う。

#contents:empty {
    background-color: green !important;
}

これらによって、バージョン 7 を含む IE では背景色が赤、それ以外のブラウザでは背景色が緑となる。らしいですよ！スイマセン、まだ IE7 は落としてないんで自分で試してない :-P。テストページが上記ネタもとには用意されているんで、IE7 Beta 2 Preview を入れてみた方は実際に確認して見たら良いかも。

2006-02-01T19:06:40+09:00 | コメント (0) | トラックバック (2) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/365

このリストは、次のエントリーを参照しています: IE 7 用の CSS ハック:

Imaginary Affair さんからのトラックバック
IE 7 の CSS ハック
Lucky bag::blog: IE 7 用の CSS ハック では IE 7... [続きを読む]
2006年02月04日 07:32
Richard on Web さんからのトラックバック
IEの規格とCSS
JAM LOG : IE7β関連というエントリーより。 IE7βのCSSやWeb... [続きを読む]
2006年02月07日 10:25

コメント

"IE 7 用の CSS ハック"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)