2xup.org

非対応セレクタを利用した CSS ハックの注意点

Microsoft Internet Explorer 7 正式版の登場で、これまで未対応だった CSS セレクタが利用できるようになりました。Windows IE7 で対応したプロパティのおさらいと、その他ブラウザでの対応状況を資料ではなく実際に試してみてまとめていた中から今回は子セレクタ隣接兄弟セレクタにしぼり、備忘録も兼ねてまとめてみます。子セレクタ、隣接兄弟セレクタの仕様は以下のとおり。

子セレクタ
A>B { property: value; }

親要素 A の直下(子) にあるBにのみ装飾を行うセレクタ。

div>span {
  color: gray;
}

この場合、<div><span>not gray</span></div> はグレーの文字になりますが、<div><p><span>not gray</span></p></div> は span 要素が div 要素の直下に無い (p 要素の直下になる) 為、グレーになりません。

隣接兄弟セレクタ
A+B { property: value; }

同じ親要素をもつ (兄弟)、Aの直下にあるB (隣接) にのみ装飾をおこなうセレクタ。

h1+p {
  color: blue;
}
<div id="container">
  <h1>2xup.org</h1>
  <p>ニカケルアップです。略してニペケ</p>
  <p>ゾウラヴ</p>
</div>

この場合は、<p>ニカケルアップです。略してニペケ</p> の部分のみが装飾されブルーの文字になります。

各ブラウザの子セレクタ、隣接兄弟セレクタの対応状況は表のようになります。

子セレクタ、隣接兄弟セレクタの各ブラウザごとの対応状況表
ブラウザ IE5 IE5.5 IE6 IE7 IE5 (mac) OP9 SF FF CM
子セレクタ n n n y y y y y y
隣接兄弟セレクタ n n n y y y y y y

むーん。こうして見ると Mac IE の良さがしみじみ伝わってきますね (個人的に好きなブラウザなのでよけいに)。属性セレクタには非対応なものの、子セレクタと隣接兄弟セレクタにはきちんと対応しています。

セレクタが未対応ブラウザに対して違う装飾を行う

対応、非対応のブラウザがはっきりしたところで、これをうまく利用して各々のブラウザで違う装飾を行ってみます。これはブラウザの仕様の違いを利用するものですので、いわゆる CSS ハックというのでしょうか。指定の重複はするものの、おかしな指定をするわけではないし、対象が今後アップデートされない環境なので、安心ですね。子セレクタを利用したサンプルを用意しました。

sample image 01子セレクタに対応したブラウザでは、写真がカラーで表示されます。しかし、非対応のブラウザでは写真が白黒になり、対応したブラウザへのアップデートを促すメッセージと、対応したブラウザのウェブサイトへのリンクを表示します。画像はクリックすると大きくなります。左側が IE7、右側が IE6 です。ソースはサンプルページのものを参照いただくとして、CSS の部分のみを抜き出してみます。

div#photo {
  width: 240px;
  height: 160px;
}   

html > body div#photo {
  background: transparent url(color.jpg) center center no-repeat;
}   

html > body div#photo img {
  display: none;
}   

html > body div#happybrows {
  display: none;
}

先に非対応、対応ブラウザ向けの装飾を定義し、そのあとに子セレクタを利用し対応ブラウザ向けの装飾を定義しています。

実はセレクタの書き方に注意が必要

非対応ブラウザ向けのスタイルを先に定義し、そのあとで同じ要素に対して対応ブラウザ向けのスタイルを定義すれば、各々に違った装飾を行えることはわかりました。しかしこの子セレクタと隣接兄弟セレクタのマークアップの方法次第では、非対応のブラウザのはずが対応しているかのように装飾が反映されてしまう事があります。正確に言うと、マークアップの方法によってはセレクタの一部のみ無視され、無視されなかった部分のセレクタとして判断され装飾が行われるという事です。

sample image 02子セレクタと隣接兄弟セレクタは Windows IE6 を含む以前のブラウザが非対応となっていますが、各々のセレクタの要素と要素をつなぐ部分、つまり子セレクタでは>、隣接兄弟セレクタでは+と要素の間に空白を設けると設けないでは、Windows IE5 で結果がかわってしまいます。先ほどのサンプルページで見てみると図のように、非対応の子セレクタを利用して指定したはずの装飾が Windows IE5 で対応したかのように適用されています。先ほどのサンプルを利用して、子セレクタと隣接兄弟セレクタ共に同じ結果ですので、子セレクタを例にテストして表にしてみました。空白の有無によって、Windows IE5 のみ解釈が違うのがわかります。

子セレクタのマークアップの違いにより非対応ブラウザの解釈の違い
ブラウザ IE5 IE5.5 IE6
html>body h1 { … } null null null
html > body h1 { … } body h1 { … } null null
html> body h1 { … } body h1 { … } null null
html >body h1 { … } body h1 { … } null null

結果は、空白を要素と要素をつなぐ > のどちらに置こうと、> を含むその前の要素は無視され、> の後に書かれている要素のみをセレクタと判断するようです。

表を見る限り、子セレクタと隣接兄弟セレクタを利用する場合は、非対応ブラウザに対して違う装飾を行うかどうかに関係なく、要素と要素をつなぐ >+ の前後に空白の無い状態でマークアップするほうがよさそうです。アクセス解析を見ても Windows IE5 でのアクセスは全体の5%ほどですが、マークアップとしてぶれがあると気持ち悪いですし、理由もしっかり理解できているとすっきりですね。サンプルページCSS の修正も以下のように行うと Windows IE5 でも予想しない解釈になることはありません。

div#photo {
  width: 240px;
  height: 160px;
}   

html>body div#photo {
  background: transparent url(color.jpg) center center no-repeat;
}   

html>body div#photo img,
html>body div#happybrows {
  display: none;
}

今回は、Windows IE7 で対応したプロパティのおさらいと、その他ブラウザでの対応状況を資料ではなく実際に試してみてまとめている最中にこのような点に気がつきました。やはり実際にやってみるものですね。ちなみに Windows IE の過去のバージョンをどのように利用したかというと、先日 Bookmark で見つけた、過去のバージョンを含めた Windows IE を共存させるソフトを利用しました。Intel Mac + Parallels Desktop 上の Windows XP でも動きました。が、僕の環境では IE3, IE4 はうまく起動できませんでした。しかし、これ魅力。

また、いくつかの CSS ハックに関して既に資料としてこうかいされているものを実際に試したりしながらまとめたものを Google Docs & Spreadsheets を利用して公開しております。個人的な資料なので、何の参考にもならずアレですが、興味があればご覧くださいませ (そのまま編集はできませんけど、書き出してご自分の Spreadsheets として編集したりはできます)。調べて納得したらまた増えていくと思います。

4 Comments

rea2007年1月21日 21:29

こんばんわ。

子供セレクタや隣接セレクタはMOSeを実現するためによく使いますが、
空白の有無でIE 5の解釈が違うのは初耳でした。
(IE 5はすでにターゲットブラウザから外してますが…。)

勉強になりました:-)

kaminogoya2007年1月22日 03:57

> rea さん

こんばんわ。
先ほどはありがとうございました。

rea さんのウェブサイトで MOSe という考え方を知る事ができました。実際に仕事で利用できるシーンは多くないかもしれませんが、とても面白い考えですね。これまでの『全部の環境で同じようにみえるようにデザインする』という考え方ではなくて、非対応セレクタやプロパティを利用して、対応環境にはより良い環境を提供する。2xup.org でもコンテンツの幅などにそういう考え方を反映しているのですが、おかげさまで良い勉強になりました。

同じような考え方をスタイルシートスタイルブックのウェブサイト も持っていることを思い出しました。きちんとサポートできていないブラウザではモノクロに見えます。スタイルシート・スタイルブックのウェブサイトのように、おもしろいアプローチができると作るのも楽しそうですね。

今後ともよろしくお願いします。

ゆーすけ2007年4月 9日 00:23

すみません。
CSS Hacks: nipeke - Google Docs & Spreadsheetsを
自分のGoogle Docs & Spreadsheetsに移したのですが
問題ありましたらお知らせ下さい。すぐ消します。

頑張ってCCSのプロフェッサーになりたいです。。

kaminogoya2007年4月11日 16:15

問題ナッスゥイングです。