異なるバージョンのFirefoxでCSSを有効・無効にするハック集が紹介されていました。



Firefox のバージョンによって有効なCSSを出し分けるような場合に使えそうです。

すべてのバージョンのFirefoxをターゲットとする

/* 方法１ */
#selector[id=selector] { color: red; }

/* 方法２ */
@-moz-document url-prefix() { .selector { color: red; } }

/* Firefoxを含むすべてのGeckoエンジンで有効にする */
*>.selector { color: red; }

Firefox 1.5 と それ以降のバージョンで有効にする

.selector, x:-moz-any-link, x:only-child { color: red; }

Firefox 2 以降のバージョンで有効にする

/* 方法１ */
body:empty .selector { color: red; }

/* 方法２ */
#selector[id=SELECTOR] { color: red; }

/* 方法３ */
html>/**/body .selector, x:-moz-any-link { color: red; }

Firefox 3 バージョンで有効にする

/* Firefox3をターゲットとする */
html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

オリジナルの記事は以下を参照
CSS Hacks for Different Versions of Firefox ? Perishable Press

結構複雑なセレクタ式になってくるのですが、覚えておくといつか使えるかもしれません。

関連エントリ

• CSSハック等に応用できそうなブラウザが解釈しているCSSがわかる「Selector Shell」
• 本の目次部分のようなリストをCSSでデザインするテクニック
• CSSのみで画像に違和感なく注釈を入れるサンプル