CSSのブラウザ振り分けをCSSのみで行う
- 投稿日 : 2007-07-14, 18:58
- 最終更新日時 : 2010-12-21 17:48:20（履歴）
- タグ（CSS）
- カテゴリ（Design）
- 記し人（luvsic）[PDF]
- 閲覧数（2592）
マイクロソフトの人が「条件付コメントは将来的にサポートしないかもしれないから推奨しないよ」なんて発言してて、かなりがっくりきた記憶がある。
CSSコーダーなら「Fuckin' IE!」と思ったことがあるわけで、とりあえずモダンブラウザと出来の悪いブラウザのCSSの使い分けができないと非常に困る。というわけでCSS内だけで @import hack を使ってブラウザごとにCSSを振り分けをできるようにしてみた。テストしてないけど。
HTMLヘッダ
IE6 で DOCTYPE 宣言を１行目（先頭）に書かないと、「後方互換モード」として解釈されてしまうバグを利用する。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link type="text/css" rel="stylesheet" href="https://luvsic.net/skins/clear/main_g.css" />
<title>サイトタイトル</title>
</head>
common.css（１番目 全ブラウザ）
アンダースコアハックでIEの5、5.5、6、Quirks modeの7のみ読み込ませる。XML宣言を１行目に書いてるのでIE6では後方互換モード、IE7では標準準拠モード。
/* Win IE5, 5.5, 6, and Quirks mode 7 */
@import _url("winltie7.css");
※標準準拠モードIE7はこのimport先を読まない。
winltie7.css（２番目 IEのみが読んでる）
Win IE5、5.5、 後方互換6、 後方互換7のみが読むCSS。
この中でさらに上書き振り分けを施す。
/* Win IE5.0, 5.5, 6 */
@import winltie6.css;
/* Win IE5.5 */
@media tty {i{content:"\";/*" "*/}}@m; @import 'winie55.css'; /*";}}/* */
/* Win IE5.0 */
@media tty {i{content:"\";/*" "*/}}; @import 'winie50.css'; {;}/*";}}/* */
※「winltie6.css」はIE5、5.5、6のすべてが読んでるので、IE5、IE5.5は上書きで対処する。
ネスケとFirefoxは、たいてい期待通りの挙動をするので対処する必要性を感じない。
No comments yet