このページの目次

Firefox 1.0, 1.5, 3.0, 3.5 用の CSS ハック

概要

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

説明

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

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

例えば、h2, div>p{ color:red; } のように宣言した場合、h2 要素と divの子要素の p 要素が赤い文字でレンダリングされます。しかし、IE 6 では子要素を表す > に対応していないため、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 の宣言を書くことができます。

独自実装擬似クラス 対応バージョン 意味
:-moz-any-link Firefox 1.0 以降 :linkまたは:visitedに該当
:-moz-read-only Firefox 1.5 以降 CSS3 Basic User Interface Module :read-onlyの先行実装。ユーザが内容を変えられない要素に該当
:-moz-broken Firefox 3.0 以降 画像が正しいものでない場合に該当
E:last-of-type Firefox 3.5 以降 兄弟関係のノード中、最後に現れる要素 E。独自実装ではない
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:-moz-broken, x:last-of-type { background-image:url(img/bg04.png); /* Fx 3.5 以降に適用される */}
div.sample, x:x                           { background-image:url(img/bg00.png); }

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

参考ドキュメント



トラックバックURI

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

コメント

匿名さんからのコメント

2008年6月15日 3:11

この方法、IEやSafariで怪しい気がするんですが

adminさんからのコメント

2008年6月15日 7:05

匿名さん

IE や Safari 2 などでもしっかり対応できます。この記事内にも書いてありますが、例えば、

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

のようにすれば、Fx では有効になりませんが、未知のセレクタとグループ化されている場合でも有効になってしまう Web ブラウザでは有効になりますので、これによって、IE や Safari 2 などにもうまく対応できます。

近頃の、とあるR。 » 「固定幅+中央寄せ」時の背景ズレ対策さんからのコメント

2008年9月24日 15:52

[...] FireFoxのみに適応させるノウハウは Firefox 1.0, 1.5, 3.0 用の CSS ハックを頂きました。 [...]

コメントフォーム

コメント

コメントでは一部の XHTML タグを使用できます。 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

実験室に戻る

あわせて読みたい

著作権情報等

CC 2004 yomotsu-net, Some Rights Reserved.