CSS Browser SelectorCSSはブラウザによってマージンやパディング、フォントサイズその他色々差異が発生します。CSSハックを使うのもよいのですが、直感的ではないし、どうも動作が不安定。ブラウザのバージョンによって希望通りのハックができなかったりします。
こちらでは、そのあたりをかなり解決に導く方法「CSS Browser Selector」を紹介します。
つまりこれで何ができるかというと、指定したブラウザで閲覧した場合、そのCSSを適用するってことが、CSS内でできちゃうのです。
もちろん、JavaScriptなので、JavaScriptが動作する環境ってのは必要ですが、JavaScript切ってる人も少ないので、私はこのスクリプトを使用してCSS組んでいます。
配布元（外国サイト） ⇒http://rafael.adm.br/css_browser_selector/
上記でダウンロードできなかった場合は↓こちらどうぞ。一応旧バージョンも置いておきます。
2008年10月16日現在、最新バージョンは「0.2.9」。
| css_browser_selector 0.2.9 | 2.9.lzh ダウンロード |
|---|---|
| css_browser_selector 0.2.5 | 2.5.lzh ダウンロード |
（１）設置
まずは、上記サイトにて「css_browser_selector.js.txt 」をダウンロード。テキストファイルなので、ブラウザにそのまま書き出されるかもしれないのですが、その場合別名で「css_browser_selector.js」という名前で保存します（「.txt」部分を削除）。
保存したファイルを任意の場所に置く。
CSSは外部ファイルもしくは、ヘッダー内に書きます（タグに直接書くことはできないです）。
| 【例：1】 置き方 | 【例：2】 私の置き方 |
|---|---|
index.html └/common/└css_browser_selector.js |
index.html└/common/├base.css（CSS外部ファイル）└base.js（中身はロールオーバー用やウィンドウを閉じる用なども含まれる⇒こんな感じ） |
（２）記述方法
まずは普通にCSSを書きます。
body{ font-size: 84%; background-color: yellow; }
他のブラウザで違う見た目にしたい場合、下記のCSSを別途記述します。「.win」を追加します。
.win body{ font-size: 78%; }
↓こういう2行を追加することになります（下記はフォントのみ適用したい場合。backgroundは共通使用）。
body{ font-size: 84%; background-color: yellow; }
.win body{ font-size: 78%; }
ただ、「.mac.ie」とういう書き方は仕様としては可能になっていうるのですが、いまいち動作がうまくいかず、「.mac.ie5」と書くのと正しく動作する。
できる限り「OS」で特定するのではなく「ブラウザ」で特定するほうが安心できるかと思われます。
うまく動作しない場合は、詳細指定や「!important」を利用して振り分けを行う。
つまり、Windowsでは上記のスタイルが適用されるということになります。以下に記述ルールを書きます。（バージョンアップ後、FF3の追加が有り、Firefoxを特定することができるようになりました）
| 記述例 | 振り分けできるブラウザ |
|---|---|
html.gecko div#header{ 【2個以上条件を入れる場合】 【実例】 |
【現在適用できるブラウザ】 |
