« MochiKit: 軽量 JavaScript ライブラリ | トップページ | CSS だけでポップアップヘルプ »

2006-05-25

CSS セレクタ、グループ化の落とし穴

対象: IE Mozilla Firefox Opera Safari
(CSS を解する ほぼすべてのブラウザ?)

CSS ソースの比較的ポピュラーな整理法として、セレクタのグループ化というのがあります。CSS セレクタはカンマで区切って並列表記することで、複数のセレクタに対して同時に同一のスタイルを設定することができます。

個別にスタイルを指定セレクタをグループ化
tr#descendant td div div {
background-color: green;
}

tr#child > td > p {
background-color: green;
}

tr#adjacent th + td + td p {
background-color: green;
}

tr#sibling-comb td span ~ p {
background-color: green;
}

tr#attribute td p[class="valid"] {
background-color: green;
}

tr#starts-with td p[class^="val"] {
background-color: green;
}

tr#ends-with td p[class$="xml"] {
background-color: green;
}

tr#lang td p:lang(zh-cn) {
background-color: green;
}

tr#not td *:not(p) {
background-color: green;
}
tr#descendant td div div,
tr#child > td > p,
tr#adjacent th + td + td p,
tr#sibling-comb td span ~ p,
tr#attribute td p[class="valid"],
tr#starts-with td p[class^="val"],
tr#ends-with td p[class$="xml"],
tr#lang td p:lang(zh-cn),
tr#not td *:not(p)
{
background-color: green;
}

プロパティが共通する部分だけをグループ化して、固有部分を切り分けておくだけでも、管理が随分 楽になるので重宝します。すでに活用している方も、きっと多いのではないでしょうか?

ところが この CSS セレクタのグループ化、どうやら思わぬ落とし穴があるようです。グループ化したセレクタ群の中に、ひとつでも閲覧中のブラウザが未対応のセレクタを含むと、グループ化したほかのセレクタまで無効化されてしまって、グループ化したブロックのスタイルが適用されなくなってしまうみたいです。

参考: CSS Selectors Test

上掲のテストページは Acid2 のテストのように、ブラウザごとに対応している CSS セレクタをチェックしてくれるんですが、同一のスタイルを適用していても、グループ化を行っているかどうかで表示結果が大きく異なっています。しかもこれが驚くべきことに IE はもとより、Firefox, Opera, Safari で見ても同様の現象が認められる模様。

これは、CSS level 3 や、バージョン6 以前の IE が未対応だった level 2 のセレクタを使う際は要注意ですね。(^o^;)

|

« MochiKit: 軽量 JavaScript ライブラリ | トップページ | CSS だけでポップアップヘルプ »

[Web]XHTML」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/1929611

この記事へのトラックバック一覧です: CSS セレクタ、グループ化の落とし穴:

» CSSで画像を中央揃えにするには 〜まとめ〜 [バーチャルネットアイドルロリナチ]
Firefoxで画像が中央揃えで表示されない・・・ IEではされるのに・・・ 何で・・・? まあ、Webページに関してはこういうこともよくあるので、HTML/CSSで画像をセンタリングするテクニッ [続きを読む]

受信: 2006-06-06 04:47

« MochiKit: 軽量 JavaScript ライブラリ | トップページ | CSS だけでポップアップヘルプ »