便利!ブラウザ+OS別にCSSでクラスを指定できる(CSS Browser Selector)

広告

CSSでクラスを指定するだけで、かなり細かくOS+ブラウザごとの書き分けができるJavaScript「CSS Browser Selector」(作者:Rafael Lima氏)。

ひさしぶりにサイトを見るとアップデートされてました!

(詳細及び最新情報はCSS Browser Selectorのサイト(英語)をご覧下さい。)

使用方法

まず、CSS Browser Selectorのサイト(の「DOWNLOAD」の項目にあるJSのリンク)からjsファイルをダウンロードしてhtmlの<head>内にリンクを追加します。

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

ブラウザやOSを指定するクラス名が用意されているので、そのクラス名を追加したセレクタにCSSを定義します。

■例:WindowsとMacでフォントの指定を分ける場合

.win body {
font-family: "MS Pゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
}
.mac body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
}

クラス名をくっつけて表記することでOS+ブラウザを限定することも可能。

■例:MacのSafariの場合のみに適用させるCSS

.mac.safari #contents p {
text-decoration:none;
}

これだけ!めちゃ手軽!
iPhoneやAndroidのクラスもあるのでスマートフォン用サイトでも使える。

クラス名一覧(サイトより抜粋)

  クラス名 対応OS・ブラウザ名
OS用 win Microsoft Windows (全バージョン)
vista Microsoft Windows Vista
mac Mac OS
ipod iPod Touch
iphone iPhone
ipad iPad
webtv WebTV
android Google Android
mobile All mobile devices
ブラウザ用 ie Internet Explorer (全バージョン)
ie8 Internet Explorer 8.x
ie7 Internet Explorer 7.x
ie6 Internet Explorer 6.x
gecko Mozilla, Firefox (全バージョン), Camino
opera Opera (全バージョン)
webkit または safari Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
chrome Google Chrome

その他、ブラウザのバージョンを限定したものなどなどある。
詳しくはCSS Browser Selectorのサイトの「USAGE」のところ参照

ライセンス

http://creativecommons.org/licenses/by/2.5/

著作者を明示していれば、商用でも利用可能。

ダウンロード

http://github.com/rafaelp/css_browser_selector

「DOWNLOAD」の項目にあるJSのリンクから

参考サイト


広告
Ads by Sitemix