Simple CSS Hack – CSS Browser Selector

home > creative > Simple CSS Hack – CSS Browser Selector

スタイルシートを記述するときにやっかいなのが、各ブラウザの解釈の違い。「Internet Explorer 7」が登場して、さらなる混乱を招いてしまい、ますます重要視されるブラウザ別CSSハック。SCREAMOは、このことをより意識して構築したのだが、その際に導入したのが「CSS Browser Selector」というJavaScript。このプログラムのお陰で「各ブラウザ向けCSSハック」「基本スタイル」「共通スタイル」「レイアウト」「レイアウト詳細」の5枚のスタイルシートで、シンプルに構築することができた。

コンパクトなスタイルシート構成

複雑なデザイン、レイアウトのサイトを構築する際に、一番重要視するのがスタイルシート。最近流行っているみたいだけど、レイアウト用、フォントファミリー用、基本スタイル用、･･･と、細かくスタイルシートを分散させる手法は、実際は生産性を落とすだけで意味がない。複数で管理、構築している場合ではないのでなおさらだ。なので、極力ブラウザ別CSSハック用のスタイルシートは分散化させるべきではない。もちろん、巨大なスタイルシートになるとしたら別だが、通常の中規模サイトならば極力1枚のファイルに収めたいところだ。

今回取り上げるのが、各ブラウザ向けCSSハック。今までのSCREAMOは 「Internet Explorer 5〜6」「Internet
Explorer 7」「その他をまとめてインポートするスタイルシート」を作成して、<head>から割り当てるという手法をとっていた。だがこの方法だと、全ページのソースにスタイルシートへのリンクを3つも書かないといけない。後からスタイルシートの構造自体を変更したときに、面倒なことになる。さらには、それぞれのモダンブラウザの差異を吸収する必要が迫られたときの対応が難しくなるなど、多くの問題をかかえていた。

そこで前々から導入しようとしていたJavaScriptを使い、ブラウザ別にスタイルシートを読み込ませようと思い、ネットの世界をさまよっていると、簡単な記述をするだけで、目的のセレクタを各ブラウザに割り当てることが出来るJavaScript「CSS Browser Selector」を発見。これこそ俺が望んでいたものではないか！

一枚のスタイルシートで、各ブラウザ別CSSハックが可能に!!

「CSS Browser Selector」は、セレクタの頭に「.（対応させたいブラウザ名）」とクラス定義するだけで、目的のブラウザやOSだけに記述したセレクタだけを読み込ませてくれるという便利ツール。

ブラウザ別CSSハック

.webkit body {
background-color: red;
}
.ie6 body {
background-color: blue;
}
.ie7 body {
background-color: green;
}

とスタイルシートに記述した場合、bodyの背景がSafariやShiiraなどのWebkitを利用したブラウザはレッド、FirefoxやCaminoなどのGeckoを利用したブラウザはブルー、Internet
Explorerはグリーンに表示される。

OS + ブラウザ別CSSハック

.mac .ie body {
background-color: orange;
}
.win .ie body {
background-color: yellow;
}
.linux gecko body {
background-color: black;
}

上記のように記述した場合は、bodyの背景がMac + Internet Explorerの場合はオレンジ、Windows + Internet Explorerではイエロー、Linux + Geckoの場合はブラック。

現在ハックできるブラウザ

  • .ie – Internet Explorer (All versions)
  • .ie7 – Internet Explorer 7
  • .ie6 – Internet Explorer 6.x
  • .ie5 – Internet Explorer 5.x
  • .gecko – Mozilla, Firefox, Camino (All versions)
  • .opera – Opera (All versions)
  • .opera8 – Opera 8.x
  • .opera9 – Opera 9.x
  • .konqueror – Konqueror
  • .webkit or safari – Safari, OmniWeb, Shiira (All versions)

現在ハックできるOS

  • .mac – Mac OS
  • .win – Windows
  • .linux – x11 and Linux

JavaScriptは、CSS Browser Selectorのサイトからダウンロードできる。ダウンロードした「css_browser_selector.js.txt」の拡張子を「.js」にリネームしてサーバにアップロード。ページに下記のコードで読み込ませよう。

<script src="css_browser_selector.js" type="text/javascript"></script>

スタイルにマッチするなら

デフォルト・ブラウザのSafariでチェックしながら、コードを書き上げ、「Firefox」でチェック。次に「Internet Explorer」の6と7でCSSハックを記述していくという従来のやり方が、「CSS Browser Selector」を導入することによって、もの凄い効率がよくなった。一番大きいのが、複数のスタイルシートに分散しなくてもいいのでサクサク進む。はっきり言って気持ちいい!!

大規模なサイトでは、JavaScriptを利用してスタイルシートを分散させたほうが効率がよい場面もある。だが小規模なサイトの場合は、そこまで大掛かりなシステムを導入する必要はないけど、XHTML + CSS で、ガチガチにコーディングする場合は、どうしてもブラウザ別CSSハックは必須だから、お手軽にハックできる方法が必要だ。その解決方法の一つに、この「CSS Browser Selector」を加えてみるのはどうだろう。

スタイルシート・キャプチャ

related story