CSS Hacks まとめ (10) Owen Hack

はじめに

• http://www.albin.net/CSS/OwenHack.html
• http://www6.plala.or.jp/go_west/nextcss/tip/trans/owen_hack_tr.htm

あと、普段は事実上使えないセレクタについてどうしても知識が必要です。
Adjacent sibling selectorsと言う隣接セレクタです。

• 隣接セレクタ

ここら辺が分かりやすくて吉です。

仕組み

まぁ下記のようなCSSですね。Opera6以下とIE6/winでは見えないルールを定義したい場合に使うみたいです。

/* the following selector is seen by EVERY browser */
.myClassSelector {
    background-image: none
}
/* the Owen hack -- http://www.albin.net/CSS/OwenHack.html */
/* the following selector is NOT seen by Opera 6 (and below) or by IE6/win */
head:first-child+body.myClassSelector {
    background-image: url("regularImage.png");
    background-attachment: fixed;
}

でこの隣接セレクタをサポートしてるかしてないかって問題でして、上記のブラウザはサポートしてないので使ってる部分は普通に無視される訳です。

合わせ技1(Operaのみで適用したい)

これも古い情報なので現在どの程度有効かちと不明

/* be nice to Opera... um, maybe not. */
html>body div.myDiv { color: red; }
/* the Owen hack -- http://www.albin.net/CSS/OwenHack.html */
head:first-child+body div.myDiv { color: black; }

child selector(>)はIE6以下はサポートしておらず、Operaはサポートしてるんで、結果としてdiv.myDivはOperaでは赤く見えるヨって事。

これ"be nice to Opera" hackって言うらしいです。

合わせ技2(Opera6にのみ適用したい？)*1

"be nice to Opera"に組み合わせて"Be Mean to Opera" hackってのを使うと出来るみたいです。

/* The "be nice to Opera" rule */
html>body div.myDiv {
    c\olor: red; /* now be mean to Opera 6 using the "simplified box model hack" (i.e. Tantek's hack) */
}
/* the Owen hack -- http://www.albin.net/CSS/OwenHack.html */
head:first-child+body div.myDiv {
    color: black;
}

g-zまでの文字の直前を「/」でエスケープするとOpera5以前ではスルーされるよってバグを付いたHackのようですね。

*1:ここの原文、間違ってる気がする。どうでしょ？