Article

Home ＞ 2008年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 { ☆ }

テストしたブラウザ