CSSのブラウザ振り分けをCSSのみで行う

  • 投稿日 : 2007-07-14, 18:58
  • 最終更新日時 : 2010-12-21 17:48:20(履歴)
  • タグ(
  • カテゴリ(Design
  • 記し人(luvsic[PDF]
  • 閲覧数(2592)

マイクロソフトの人が「条件付コメントは将来的にサポートしないかもしれないから推奨しないよ」なんて発言してて、かなりがっくりきた記憶がある。

CSSコーダーなら「Fuckin' IE!」と思ったことがあるわけで、とりあえずモダンブラウザと出来の悪いブラウザのCSSの使い分けができないと非常に困る。というわけでCSS内だけで @import hack を使ってブラウザごとにCSSを振り分けをできるようにしてみた。テストしてないけど。



HTMLヘッダ

IE6 で DOCTYPE 宣言を1行目(先頭)に書かないと、「後方互換モード」として解釈されてしまうバグを利用する。

<?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(1番目 全ブラウザ)

アンダースコアハックでIEの5、5.5、6、Quirks modeの7のみ読み込ませる。XML宣言を1行目に書いてるのでIE6では後方互換モード、IE7では標準準拠モード。

/* Win IE5, 5.5, 6, and Quirks mode 7 */
@import _url("winltie7.css");

※標準準拠モードIE7はこのimport先を読まない。

winltie7.css(2番目 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は、たいてい期待通りの挙動をするので対処する必要性を感じない。

Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%66%31%61%33%35%66%35%66%64%37%36%63%66%38%61%38%62%32%30%35%35%62%65%33%36%37%39%65%63%30%30%35%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%35%30%35%63%63%30%35%30%65%61%34%32%34%65%62%64%64%33%31%31%36%65%61%66%32%34%39%64%66%39%61%32%22%3e
© 2006 – 2024 by Luvsic. Some rights reserved.