はてなダイアリーで使える対IE用CSS hack

はてなダイアリーでは、数多くのCSS hackがはてなダイアリーXSS対策によって無効化されてしまっている。特に、有効なhackが少ないことで知られるIE8以下向けのCSS hackは全滅状態。つまり、現状のはてなダイアリーにおいて、IE8狙い撃ちでCSSを適用させることはできない。

そこで、IE以外の主要ブラウザに別スタイルを適用することで、擬似的にIE対策をしてみる。

主要ブラウザということで、Firefox/Chrome/Safari 2〜/Operaの4つ辺りに対応できてればいいかなーという感じで。以下の例示では、IEのみcolor:red、他のブラウザではcolor:blackとしたい場合を想定する。

/* for IE */
#BUGGED-ELEMENT { color: red; }

/* Firefox */
#BUGGED-ELEMENT, x:-moz-any-link  { color: black; }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #BUGGED-ELEMENT { color: black; }
/* Opera 1-7 */
body[class|="hypen-ated"] #BUGGED-ELEMENT { color: black; }
/* Safari 3+, Chrome, Opera 9+, Firefox 3.5+ */
body:nth-of-type(1) #BUGGED-ELEMENT { color: black; }
body:first-of-type #BUGGED-ELEMENT { color: black; }

参照元:CSSハック一覧 – IE, Firefox, Safariなどなど | Webクリエイターボックス (2010/11/04閲覧)

当たり前だが、特定のブラウザ「以外」のブラウザにしらみつぶしで別スタイルを適用するという手法は本来使用すべきではない。冒頭のような特殊事情を抱えるはてなダイアリー用CSS以外では使うべきではないアレなので、その辺りどうか勘違いのないようにお願いします。