虚心生白

■[memo] css: Hack 2009

以前まとめてから数年経ち、「NetscapeやIE5 for Mac専用のハックはもう良いかな〜」とか「IE8やFirefox3.5用なんてあるのかな？」と言うところでアップデート。
# 古いIEはさっさと消えてほしい〜
# いつか検証＆もうちょっと整理する（予定は未定）

# またsafariで編集するとバックスラッシュが「\」になる〜

IE6〜IE8

 後述の各バージョン用のハックを並べて書く

# 値が同じだからと「*:first-child+html .example, * html body .example {... 」と、まとめるのはNG

IE 8（改訂：20100721）

 .example  {width /*\**/: 180px\9;} 

# 「CSS Hack for IE 8 | beginsprite log」

IE 7

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

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

IE4〜6、Mac IE5.x（StarHtmlHack）

* html .example {width: 180px;}

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

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以前以外用の正しい値

IE5.x（Mis Pass Filter）

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

IE 7以前（Star Hack）

.example {*width: 180px;}

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

• Not Found - Neocreo Design Solutions
• プロパティでのCSSハック一覧表｜web bibo

IE 4〜6（Underscore Hack）

.example {_width: 180px;}

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

• Not Found - Neocreo Design Solutions
• プロパティでのCSSハック一覧表｜web bibo

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

html*p {width: 180px;}

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

.example {#width: 180px;}

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;}」と記述した事と同じ意味。

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

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

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

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

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

Firefox+α

html:not([lang*=""]) .example {width: 180px;}

# safari 4 for Macにも適用される

Firefox 1〜3.5

.example  { 正規スタイル }
.example, x:-moz-any-link   { FF 1.0 以降に適用 }
.example, x:-moz-read-only  { FF 1.5, 2.0 以降に適用 }
.example, x:-moz-broken     { FF 3.0 以降に適用 }
.example, x:-moz-broken, x:last-of-type { FF 3.5 以降に適用 }
.example, x:x { 正規スタイル }

解説：Firefox 1.0, 1.5, 3.0, 3.5 用の CSS ハック | ヨモツネット

Firefox、Mozilla、Safari、Mac IE 5

 :root .example {width: 180px;}

Safari4

body:first-of-type .example { Safari用 }
　or
@media screen and (-webkit-min-device-pixel-ratio:0){
　.example { Safari用 }
}

解説：WebTecNote - [CSS]Safari3.X用CSSハック

Safari3？

body:last-child:not(:root:root) .example { Safari用 }

# どっちが良いのだろう
# safari 4系は無効だった

Safari3/Google Chrome

html:not(:only-child:only-child) .example {width: 180px;}

Safari2

html[xmlns*=""] body:last-child .example { Safari2用のスタイル }
html:not(:only-child:only-child) 適当なIDセレクタ .example { 正規のスタイル }

解説：【XHTML＋CSS】06_CSSデザインのブラウザ調整 | TokyoHeadTerminal
...によると「2行目で適当なIDセレクタを指定する理由は、指定しないと詳細度が1行目よりも弱く、上書きされないため（例えば#containerなど）」らしい

Opera9.5未満

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

# 9.5以降用は無いらしく、合わせ技になるらしい。
解説：【XHTML＋CSS】06_CSSデザインのブラウザ調整 | TokyoHeadTerminal

参考&参照:

• CSSハック一覧 – IE, Firefox, Safariなどなど | Webクリエイターボックス # あとで見る
• [CSS]IE8までのブラウザを対象としたCSS Hack/Filterのまとめサイト | コリス（まとめのまとめ）
• 【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (15) 04-01 CSSハック一覧 | クリエイティブ | マイナビニュース
• CSSハック | 謎解きウェブ | BLOG × WORLD ENDING（詳細な解説あり。#左メニュー部分のEXPLOREがCool）
• 正しい知識を得たい人の爲のCSS2リファレンス
• 【XHTML＋CSS】06_CSSデザインのブラウザ調整 | TokyoHeadTerminal

ツイートする

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