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

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

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

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="http://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%34%34%34%30%36%36%65%31%66%30%33%61%32%39%32%30%35%36%37%61%37%30%61%35%32%31%63%31%66%64%62%32%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%39%63%35%30%34%65%30%32%32%32%61%63%32%32%37%30%64%34%31%39%39%36%34%34%37%33%37%30%31%61%63%63%22%3e
© 2006 – 2014 by Luvsic. Some rights reserved.