CSS hack

CSSハックをまとめています。

IE hack (IE6以下)

アンダースコアハック (Underscore hack)

プロパティの前に「_」をつけます。

.ie6_hack1 {_color: #c00;}

スターHTMLハック (Star HTML hack)

セレクタの前に「* html」をつけることで、IE4～6にて適用されます。

* html .ie6_hack2 {color: #c00;}

IE hack (IE6以外)

チャイルドセレクターハック (Child selector hack)

セレクタの前に「html > body」をつけます。ただし、Firefox, Chromeなどにも適用されます。

html>body .ie6_hack3 {color: #c00;}

IE hack (IE7のみ)

スタープラスハック (Star plus hack)

プロパティの前に「*:first-child+html」をつけます。

*:first-child+html .ie7_hack1 {color: #c00;}

IE hack (IE7以下)

アスタリスクハック (Asterisk hack)

プロパティの前に「*」をつけます。「/」でも同じように機能します。

.ie7_hack2 {*color: #c00;}

IE hack (IE7以降)

インポータントクォークス (!important quirks)

IE7以降は「!important」と指定されているものを適用させますが、IE6は「!important」を無視して後のプロパティを優先させます。Firefox, Chromeも適用されます。

.ie7_hack3 {color: #c00 !important; color: #333}

IE hack (IE8以降)

¥9ハック (¥9 hack)

セレクタの前に「html>/**/body」を、値の後に「¥9」をつけます。

html>/**/body .ie8_hack1 {color: #c00\9;}

IE hack (IE9以降)

ノットターゲットハック (Not Target hack)

プロパティの後に「:not(:target)」をつけます。ただし、これはFirefox, Chromeなどにも適用されます。

.ie9_hack1:not(:target) {color: #c00;}

ルートセレクタハック (:root Selector hack)

セレクタの前に「:root」をつけます。ただし、これはFirefoxなどにも適用されます。

:root .ie9_hack2 {color: #c00;}
}

IE hack (IE9以下)

コンディショナルコメント (Conditional Comments)

<!--[if IE ]>
<style type="text/css"> .ie10_hack2 {color: #c00;} </style>
<![endif]-->

IE hack (IE10以降)

アットメディアエムエスハイコントラストハック (@media -ms-high-contrast hack)

セレクタを「@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)」で囲います。
Firefoxには適用されません。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
	.ie10_hack1 {color: #c00;}
}

Firefox hack (Firefox 3.5以降)

モズブロークンハック (Moz brokene hack)

セレクタの後に「, x:-moz-broken, x:last-of-type」をつけます。

.ff1, x:-moz-broken, x:last-of-type {color: #c00 }

Safari 2-3のみに適用させるハック

FirefoxやChromeには適用されません。

html[xmlns*=""] body:last-child .safari_hack1 {color: #c00;}

Safari hack (Safari 2-3.1のみ)