ブラウザやOSごとにCSSハックできるjs「CSS Browser Selector」
先日とある案件で久々にCSSハックをつかう場面に出くわしました。具体的な内容は忘れてしまいましたが、例の「IEがぁ～」「iPhoneがぁ～」とか鬱陶しいやつだったことだけは覚えています。
僕はiPhoneを持っておらず、普段は妻の古いiPhoneをつかって実機での動作確認をしているのですが、そのときはたまたま妻が外出しており、動作確認自体がままならない感じでした。とりあえず「apple潰れねえかな」と思ったくらい面倒でした。
そんなときに見つけたのが「CSS Browser Selector」というjavascript。ブラウザ別のハックはもちろん、OS別のハックも書くことができるようになるので、iPhoneだけ、とかiPadだけ、とかにCSSを適用させることができる優れモノです。
CSS Browser Selectorの使い方
ダウンロード
まずは下記の公式サイトからjsをダウンロード。ページの中頃に「DOWNLOAD」とあります。
css_browser_selector.jsを読み込む
先ほどダウンロードしたcss_browser_selector.jsを<head>内で読み込みます。
<script src="css_browser_selector.js" type="text/javascript"></script>CSSの書き方
これでcss_browser_selector.jsをつかう準備は整いました。あとは目的に沿った内容でCSSを書いていくだけです。公式サイトでは下記のような例があります。
.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.linux.gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }css_browser_selector.jsをつかってハックできるOSとハックの書き方
css_browser_selector.jsをつかえば下記のOSを対象にしたCSSハックが出来ます。
.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.jsをつかってハックできるブラウザ
ブラウザ別に対応したい場合は下記を参考にしてください。
.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のみ*/
}
