虚心生白

■[memo] css: Hack系

[追記: 20090816]
※更新は「 css: Hack 2009 - 虚心生白」で継続中...

---

# Safariで編集すると"\"が"?"になるよ〜

Windows IE 7を含むすべてのIE

 *:first-child+html .example {width: 180px;}
 * html .example {width: 180px;}

# 値が同じだから「*:first-child+html .example, * html body .example {... 」と、したいところだけど、まとめるとダメらしい。

Windows IE 7

 *:first-child+html .example {width: 180px;}

#「*+html」は、IE4やIE5、Opera8.0〜にも適用されるらしい。

Windows IE4〜6、Mac IE5.x（StarHtmlHack）

* html .example {width: 180px;}

「*」は全称セレクタ。
htmlは最上位に位置し、どの要素にも含まれる事がないため本来は無視されるべきところ、Windows版IE4〜6、Mac版IE5.xではclass="example"に指定が適用される。

Windows IE5.5以前（voice-family Hack）

width: 200px;               ---(1)
voice-family: "\"}\"";    ---(2)
voice-family: inherit;    ---(3)
width: 180px;              ---(4)

(1) IE5.5以前用の値
(2) IE5.5以前は\のエスケープ処理未対応により}で終了。以降の指定無視
(3) 2行目の値を元に戻す
(4) IE5.5以前以外用の正しい値

Windows IE5.x（Mis Pass Filter）

@media tty {
i{content:"\";/*" "*/}} @import url('ie5win.css');/*";}
}/* */

Windows IE 7以前（スターHack）

.example {*width: 180px;}

# プロパティレベルのハック

Windows IE 4〜6（アンダースコアーHack）

.example {_width: 180px;}

# プロパティレベルのハック

Windows IE4〜6、Mac IE5.x、Safari（Star7Hack）

html*p {width: 180px;}

Windows IE4〜6、Mac IE5、Firefox、Opera7（ハッシュハック）

.example {#width: 180px;}

Windows IE7を含む、モダンブラウザ、Mac IE5

html>body .example {width: 180px;} or
html+body .example {width: 180px;} or
head:first-child+body .example {width: 180px;}

「>」は子セレクタで、「+」は隣接セレクタ（前者が一般的？）。
Windows版IE6以下は子セレクタに非対応なので適用されない。その他のブラウザでは、「htmlの子要素であるbodyに含まれる.example」となり、「.example {width: 180px;}」と記述した事と同じ意味。

Windows IE7を含む、モダンブラウザ(? IE7、Firefox、Mozilla、Safari、Opera)

html[xmlns] .example {width: 180px;}

Windows IE7を除く、モダンブラウザ

html>/**/body .example {width: 180px;} or
html[xmlns]>/**/body .example {width: 180px;} 

# 前者と後者、どっちが良いのだろう...

Mac IE5（Backslash Hack）

/* Backslash hack for Mac IE5 only \*//*/
.example {width: 180px;}
/* end hack */

Mac IE5.x（Band Pass Filter）

/* Band Pass Filter \*//*/
@import url("ie5mac.css");
/**/

Mac IE5以外（Backslash Hack）

/* Backslash hack for Mac IE5 \*/    ---(1)
.example {width: 180px;}    ---(2)
/* end hack */    ---(3)

Mac IE5では、コメント中のバックスラッシュ(半角)をエスケープ処理するため、(1)〜(3)までをコメントと解釈。

Firefox、Mozilla、Safari、Mac IE 5

 :root .example {width: 180px;}

Safari

p { その他のブラウザ用のスタイル }
html * p { Safari用のスタイル }
* html p { その他のブラウザ用のスタイル }

Safari3

body:first-of-type .example {width: 180px;}

Safari2

html[xmlns*=""] body:last-child .example {width: 180px;}

Opera9

;;body .example {width: 180px;}

Netscape4、Opera4〜5（Fabriceインバージョン）

/* Hack for Netscape4,Opera4〜5 /*//*/ 
.example {width: 180px;}
/* end hack */

Netscape4以外（Caio Hack）

/* Caio Hack for Netscape4 /*/ 
.example {width: 180px;}
/* end hack */

参考&参照:

• 403 Error - Forbidden #しばし様子見
• [CSS]IE8までのブラウザを対象としたCSS Hack/Filterのまとめサイト | コリス（まとめのまとめ）
• 【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (15) 04-01 CSSハック一覧 | クリエイティブ | マイナビニュース
• no title（詳細な解説あり。#左メニュー部分のEXPLOREがCool）
• 正しい知識を得たい人の爲のCSS2リファレンス

ツイートする

Permalink | コメント(0) | トラックバック(1)