概要

Firefox 1.0 以降用, Firefox 1.5 以降用, Firefox 3.0 以降用の CSS ハックの手法とその仕組みの説明です。

• 動作確認用の demo

説明

複数のセレクタに同じ宣言を共有する場合、h1, h2, h3 { font-style: bold } のようにセレクタをカンマで区切ってグループ化 (Grouping) することができます。

しかし、グループ化したセレクタ群の中に、Web ブラウザが未対応のセレクタが一つでも含まれている場合、グループ化した別のセレクタも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。

例えば、h2, p:first-child { font-weight:bold } のように宣言した場合、h2 要素と最初の子要素の p 要素が太字でレンダリングされます。しかし、IE 6 では :first-child に対応していないため、最初の子要素のp要素が太字にならないばかりか、グループ化した h2 要素も太字にはなりません。

このようにグループ化したセレクタ群の中に未対応のセレクタが含まれている場合、セレクタ群全ての宣言を無効化されることを逆手にとった CSS hack です。

div.sample { color:red; } の宣言を Firefox などの Mozilla 系 Web ブラウザのみを対象とするにはdiv.sample, x:-moz-any-link { color:red; } の様に x:-moz-any-link をグループに加えます。

:-moz-any-link は Mozilla 系 Web ブラウザに独自実装されている擬似クラスです。Firefox などの Mozilla 系 Web ブラウザはこの擬似クラスに対応しているので、div.sample, div:-moz-any-link {} のようにグループ化されたセレクタ郡に :-moz-any-link が含まれていてもこの宣言は有効ですが、その他のWebブラウザは :-moz-any-link には対応していないため、宣言が無効になります。

また、この例を応用し、Firefox のバージョンアップで追加されていった擬似クラスをグループ化に加えることで、そのバージョン専用を対象とした CSS の宣言を書くことができます。

div.sample { background-image:url(img/bg00.png); }
div.sample, x:-moz-any-link { background-image:url(img/bg01.png); /* Fx 1.0 以降に適用される */}
div.sample, x:-moz-read-only { background-image:url(img/bg02.png); /* Fx 1.5, 2.0 以降に適用される */}
div.sample, x:-moz-broken { background-image:url(img/bg03.png); /* Fx 3.0 以降に適用される */}
div.sample, x:x{ background-image:url(img/bg00.png); }

最後に x:x としたセレクタにはデフォルト (この例では div.sample { background-image:url(img/bg00.png); } と同じスタイル) のスタイルを適用します。これは、Safari 2 などの一部の Web ブラウザがグループ郡に未対応のセレクタが含まれている場合でも無視しないための対策です。

参考ドキュメント

• CSS メモ : Mozilla 拡張
• Firefox の CSS 対応表

トラックバックURI

http://www.yomotsu.net/lab/css/csshack_firefox/trackback

div.sample, x:x{ background-image:url(img/bg00.png); }

実験室に戻る