まえがき

最近は「ie6 no more」のようなIE6撲滅キャンペーン等でIE6も大方死んできましたがちょっと前はホントにウザかったですよね。
KoToRiはハック用にcssファイルをいちいち設けて「* html hoge { color: red; }」とか書いてましたよ。
Chromeのハックだけいくら検索して試しても全然効かなくて困ったこともありました。
懐かしい。。。
その頃に『CSS Browser Selector』を知っていればと思うと悔やんでも悔やみきれません笑

しかも『CSS Browser Selector』はブラウザ毎だけではなくOS毎にcssを書けるのでiPhoneのみとかiPadのみとかも可能です。
やばいです。

『CSS Browser Selector』の使用方法

ダウンロード

下記の公式サイトの「DOWNLOAD」のところにリンクがはってあるのでそこからjsをダウンロードします。

CSS Browser Selector

『CSS Browser Selector』の読み込み

</head>より前で、ダウンロードした「css_browser_selector.js」を読み込みます。

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

CSSの記述方法

jsを読み込んだらあとはCSSにコードを書くだけです！
ブラウザやOS毎にCSSを記述することができます。

公式に載っている記述方法の例です。

html.gecko div#header {
    margin: 1em;  /*geckoエンジンのブラウザのみ*/
}
.opera #header {
    margin: 1.2em;  /*operaのみ*/
}
.ie .mylink {
    font-weight: bold;  /*ie(全バージョン)のみ*/
}
.mac.ie .mylink {
    font-weight: bold;  /*Macのieのみ*/
}

OSとブラウザのセレクタの間にはスペースは入りません。

『CSS Browser Selector』で利用可能なOSのコード

利用できるOSコードの一覧載せときます。

.win {
    /*Windows (全バージョン)のみ*/
}
.vista {
    /*Windows Vistaのみ*/
}
.linux {
    /*linux（x11とlinux）のみ*/
}
.mac {
    /*Mac OSのみ*/
}
.freebsd {
    /*FreeBSDのみ*/
}
.ipod {
    /*iPod Touchのみ*/
}
.iphone {
    /*iphoneのみ*/
}
.ipad {
    /*ipadのみ*/
}
.webtv {
    /*WebTVのみ*/
}
.j2me {
    /*J2ME Devices（例えばOpera mini）のみ*/
}
.blackberry {
    /*blackberryのみ*/
}
.android {
    /*Google Androidのみ*/
}
.mobile {
    /*全てのモバイルデバイスのみ*/
}

『CSS Browser Selector』で利用可能なブラウザのコード

利用できるブラウザコードの一覧も載せときます。

.ie {
    /*Internet Explorer（全バージョン）のみ*/
}
.ie8 {
    /*Internet Explorer 8.xのみ*/
}
.ie7 {
    /*Internet Explorer 7.xのみ*/
}
.ie6 {
    /*Internet Explorer 6.xのみ*/
}
.ie5 {
    /*Internet Explorer 5.xのみ*/
}
.gecko {
    /*Firefox（全バージョン）とCaminoのみ*/
}
.ff2 {
    /*Firefox 2のみ*/
}
.ff3 {
    /*Firefox 3のみ*/
}
.ff3_5 {
    /*Firefox 3.5のみ*/
}
.ff3_6 {
    /*Firefox 3.6のみ*/
}
.opera {
    /*Opera（全バージョン）のみ*/
}
.opera8 {
    /*Opera 8.xのみ*/
}
.opera9 {
    /*Opera 9.xのみ*/
}
.opera10 {
    /*Opera 10.xのみ*/
}
.konqueror {
    /*Konquerorのみ*/
}
.webkit {
    /*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari {
    /*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari3 {
    /*Safari 3.xのみ*/
}
.chrome {
    /*Google Chromeのみ*/
}
.iron {
    /*SRWare Ironのみ*/
}

まとめ

もっと早く出会いたかった！！！！
これに尽きます。
ホント簡単でシンプルですばらしすぎます。
煩わしいハックタグとはおさらばです。
涙が出ます。
ありがとうRafael Limaさん。
イイネ！