Article

Home2008年06月 > 逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック)

逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック)

↓↓↓↓↓↓↓↓2009.2.6 19:45 追記↓↓↓↓↓↓↓↓

IE8b2からいくつかのIEに関連するハックが使えなくなりました。

そのため、いくつかの項目を修正しました(修正した項目にを付けました)。

ただし、IETester(IE8b2)で確認しただけなので、現在のRC版でも適応される保障はありません。あくまで暫定的なものと思ってください。IE8製品版で機能することを確認しました。

なお、Operaは古いバージョンに対応する意味はあまり無いと判断し、一つにまとめました。

Firefox用は4つありましたが、一つを残して他は削除しました。

CSSハックはあまり良いやり方であるとはいえません。無闇に使わず、必要最小限に留めましょう。使わずに済むならそれに越したことはありません。

↑↑↑↑↑↑↑↑2009.2.6 19:45 追記↑↑↑↑↑↑↑↑

☆ = 該当ブラウザに適応させるスタイル

★ = 該当ブラウザ以外に適応させるスタイル

IE6に適応

SELECTOR {  }
* html SELECTOR {  }

IE7に適応 ※2009.2.6変更

SELECTOR {  }
*:first-child+html SELECTOR {  }

IE8に適応 ※2009.2.6変更

SELECTOR {  }
head~/* */body SELECTOR {  }
html:not(:target) SELECTOR {  }

IE6、7に適応 ※2009.2.6変更

SELECTOR {  }
* html SELECTOR { 
*:first-child+html SELECTOR {  }

IE7、8に適応 ※2009.2.6変更

SELECTOR {  }
*:first-child+html SELECTOR {  }
head~/* */body SELECTOR {  }
html:not(:target) SELECTOR {  }

IE6、7、8に適応 ※2009.2.6変更

SELECTOR {  }
* html SELECTOR {  }
*:first-child+html SELECTOR {  }
head~/* */body SELECTOR {  }
html:not(:target) SELECTOR {  }

IE6以外に適応

SELECTOR {  }
html>body SELECTOR {  }

IE6、7以外に適応 ※2009.2.6変更

SELECTOR {  }
head~/* */body SELECTOR {  }

IE6、7、8以外に適応 ※2009.2.6変更

SELECTOR {  }
html:not(:target) SELECTOR {  }

Opera9.27以下に適応

SELECTOR {  }
html:first-child SELECTOR {  }

Opera9.5bに適応

SELECTOR {  }
body:last-child SELECTOR {  }
html:not([lang*=""]) SELECTOR {  }
html:not(:only-child:only-child) SELECTOR {  }

Opera(9.6以降)に適応 ※2009.2.6変更

SELECTOR {  }
body:last-child SELECTOR {  }
html:not([lang*=""]) SELECTOR { 
html:not(:only-child:only-child) SELECTOR {  }

Firefoxに適応 ※2009.2.6変更

SELECTOR {  }
html:not([lang*=""]) SELECTOR {  }

Safariに適応

SELECTOR {  }
html:not(:only-child:only-child) SELECTOR {  }

or

SELECTOR {  }
body:last-child:not(:root:root) SELECTOR {  }

テストしたブラウザ