OS/ブラウザごとにCSSを適用できるハック『CSS Browser Selector』
[ PR ]
ブラウザの差異を吸収するのは大変
ブラウザごとの処理の違いというのは、かなり厄介なものです。
それだけで修正する時間が大幅に割かれることも少なくありません。
そんな時で便利なのは、条件付きコメントやユーザーエージェントですが、これもちょっとした変更の場合はかなり面倒です。
OS/ブラウザ別のCSSを簡単に記述できる『CSS Browser Selector』
こんなケースで便利なのが、CSS Browser Selector です。
このライブラリには解説サイト（ブログ？）があるのですが、なぜか相当重いのでGithubリンクも貼っておきます。
https://github.com/rafaelp/css_browser_selector/tree/master
http://rafael.adm.br/css_browser_selector/ (解説サイト←かなり重い)
気持ちいいくらい簡単に分岐
このライブラリがどのくらいすごいかというと、次の例を見てみればわかります。
この四角が何色に見えますか？ …実はブラウザごとに色が違います。
- IE (絶滅してほしい) : 青
- Google Chrome: 緑
- Firefox: オレンジ
- Opera: 赤
- その他: 白
このコードは下記です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="rect"></div>
<div>
<span class="test" id="ie">IE</span><br>
<span class="test" id="chrome">Chrome</span><br>
<span class="test" id="firefox">Firefox</span><br>
<span class="test" id="opera">Opera</span><br>
</div>
<script src="https://rawgithub.com/rafaelp/css_browser_selector/master/css_browser_selector.js" ></script>
<style>
.test {
color: #aaa;
}
.ie #ie {
color: red;
}
.chrome #chrome {
color: red;
}
.gecko #firefox {
color: red;
}
.opera #opera {
color: red;
}
#rect {
width: 100px;
height: 100px;
border: 1px solid black;
background: white;
}
.chrome #rect {
background: green;
}
.ie #rect {
background: blue;
}
.gecko #rect {
background: #ff6600;
}
.opera #rect {
background: red;
}
</style>
</body>
</html>
このように、クラス名をつけるだけで分岐ができます。
例えば .win と .mac を使えば、MacとWindowsの差異を吸収することもできますし、.ipodと.iphoneを使えば、iPodとiPhoneの差異を吸収することもできます。（ ↓ モバイルも含めたOS判断の例 ）
ただし、このルールを適用するには<style>...</style>の中に書かれたCSSでないとダメで、単体のCSSファイルではダメです。
それでも一切JavaScriptを書かなくていい分、かなり便利です。
対応OS/ブラウザ
OS
| クラス名 | ブラウザ |
|---|---|
| win | Microsoft Windows (all versions) |
| vista | Microsoft Windows Vista |
| linux | Linux (x11 and linux) |
| mac | Mac OS |
| freebsd | FreeBSD |
| ipod | iPod Touch |
| iphone | iPhone |
| ipad | iPad |
| webtv | WebTV |
| j2me | J2ME Devices (ex: Opera mini) changed from mobile to j2me |
| blackberry | BlackBerry |
| android | Google Android |
| mobile | All mobile devices |
ブラウザ
| クラス名 | ブラウザ |
|---|---|
| ie | Internet Explorer (All versions) |
| ie8 | Internet Explorer 8.x |
| ie7 | Internet Explorer 7.x |
| ie6 | Internet Explorer 6.x |
| ie5 | Internet Explorer 5.x |
| gecko | Mozilla, Firefox (all versions), Camino |
| ff2 | Firefox 2 |
| ff3 | Firefox 3 |
| ff3_5 | Firefox 3.5 |
| ff3_6 | Firefox 3.6 |
| opera | Opera (All versions) |
| opera8 | Opera 8.x |
| opera9 | Opera 9.x |
| opera10 | Opera 10.x |
| konqueror | Konqueror |
| webkit or safari | Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome |
| safari3 | Safari 3.x |
| chrome | Google Chrome |
| iron | SRWare Iron |
その他
| クラス名 | 有効になる条件 |
|---|---|
| js | JavaScriptが有効なとき |
ライセンス
CSS Browser Selectorのライセンスは、CC BY 2.5 です。
著作者の明記が必須なので注意してくださいね。
まとめ
こういうかゆいところに手が届くライブラリがもっと増えてほしいですね。
それにしても、IEは早くなくなってほしいものです…(怒)
技術評論社
売り上げランキング: 19,672
