制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングCSSブラウザまたはOS毎にCSSハックできるjs『CSS Browser Selector』

ブラウザまたはOS毎にCSSハックできるjs『CSS Browser Selector』

2013年12月10日javascript CSS 
ブラウザまたはOS毎にCSSハックできるjs『CSS Browser Selector』記事のアイキャッチ画像

ブラウザまたはOS毎にCSSハックできるようになるとても素晴らしいスクリプト『CSS Browser Selector』の紹介です。もっと早く出会いたかったです。

まえがき

最近は「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さん。
イイネ!

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント