ブラウザやOSごとにCSSハックできるjs「CSS Browser Selector」

FRONTEND

2019.03.21

先日とある案件で久々にCSSハックをつかう場面に出くわしました。具体的な内容は忘れてしまいましたが、例の「IEがぁ~」「iPhoneがぁ~」とか鬱陶しいやつだったことだけは覚えています。
僕はiPhoneを持っておらず、普段は妻の古いiPhoneをつかって実機での動作確認をしているのですが、そのときはたまたま妻が外出しており、動作確認自体がままならない感じでした。とりあえず「apple潰れねえかな」と思ったくらい面倒でした。

そんなときに見つけたのが「CSS Browser Selector」というjavascript。ブラウザ別のハックはもちろん、OS別のハックも書くことができるようになるので、iPhoneだけ、とかiPadだけ、とかにCSSを適用させることができる優れモノです。

CSS Browser Selectorの使い方

ダウンロード

まずは下記の公式サイトからjsをダウンロード。ページの中頃に「DOWNLOAD」とあります。

CSS Browser Selector

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のみ*/
}