Webの記録

OS+ブラウザごとのcssが簡単に書けるJavaScript「CSS Browser Selector」

投稿日:2014年8月10日 更新日:

この記事は約 5 分で読めます。

mac_sp_mini

「このブラウザだけデザインが崩れてる?!」というのはよくあることで、時々cssにブラウザハックを書かねばならないことがありました。

そんな時、ほんの少しcssでクラスを指定するだけで、簡単にOSやブラウザごとのcssが書けるJavaScript「CSS Browser Selector」が便利だったのでメモです。

実はスマホも対応してました!



「CSS Browser Selector」の使い方

1.まずはダウンロード

以下のサイトから、ダウンロードをしてください。

CSS Browser Selector

ダウンロードされてファイルを開くと以下の画像のような感じです。
CSS-Browser-Selector
実際に使ったのは「css_browser_selector.js」のみです。

2.「css_browser_selector.js」を読み込み

「css_browser_selector.js」を読み込みさせます。
通常jsを使う時同様に、「css_browser_selector.js」をjsファイルなどに保存した後、htmlのheaderに以下のように記述。

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

もちろん、先にjQueryを読み込んでくださいね!
「tests」フォルダーの中にも「jquery-1.2.6.min.js」入ってました。。。


3.cssを記述

あとは、cssに記述するだけです。

記述例は以下の通りです。「ブラウザ」+「クラス名(idもOK)」や、「OS 」+「ブラウザ」+「クラス名(idもOK)」という感じで組み合わせできます。

.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
}
.mac.safari #example {
	margin-left: 1px;         
}


●利用できるOSのクラス一覧

「CSS Browser Selector」より一部抜粋。詳しくは「CSS Browser Selector」のサイトを参照ください。

.win Windows (all versions)
.vista Windows Vista
.linux Linux (x11 and linux)
.mac Mac OS
.ipod iPod Touch
.iphone iPhone
.ipad iPad
.webtv WebTV
.android Google Android
.mobile All mobile devices


●利用できるブラウザのクラス一覧

「CSS Browser Selector」より一部抜粋。詳しくは「CSS Browser Selector」のサイトを参照ください。

.ie Internet Explorer (All versions)
.ie8 Internet Explorer 8.x
.ie7 Internet Explorer 7.x
.ie6 Internet Explorer 6.x
.gecko Mozilla, Firefox (all versions), Camino
.ff3 Firefox 3
.ff3_6 Firefox 3.6
.opera Opera (All versions)
.webkit Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.safari Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
私が試した時、Safariだけでイケてた気がします。。。
.safari3 Safari 3.x
.chrome Google Chrome


へんなハックタグを書かなくてよくなります。シンプルで分かりやすいので、後でコードを見た時もメンテがしやすくなりそうです!

思ったより便利でした♪

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

MacでもWindowsでもOKな「AMPPS」でローカル環境を作ってみる

この記事は約 1 分で読めます。 以前、ローカル環境では「XAMMP」と「MAMP」の環境を作ってみました。 今回は、MacでもWindowsでも使える「AMPPS」でローカル環境を作ってみました。 …

no image

気になるブラウザサイズ。

この記事は約 1 分で読めます。最近、いくつかサイトを作らせて頂き・・・。 ちょっと他所のパソコンをいじらせて頂き、その画面表示にショックを受ける事がしばしば・・・。 日頃見ているパソコンと表示があん …

no image

Evernote Webクリッパーを入れてみた♪

この記事は約 1 分で読めます。Web上で興味を持ったページの情報をそのまま手軽にEvernoteに保存する方法を試してみたいと思います。 日頃使っているEvernoteの便利な使い方その2です。(2 …

エックスサーバーの無料独自SSL「Let’s Encrypt」をWordPressに設定して、カンタンhttps対応

この記事は約 1 分で読めます。 2016年6月30日から、「エックスサーバー」の全プランにおいて、「Let’s Encrypt」によるドメイン認証型SSL証明書の無料発行および設定機能の …

no image

Facebookページ コメント返信機能の設定をしてみた!

この記事は約 1 分で読めます。 Facebookページにコメントに対するコメントの返信、どのようにされてましたか? 私は都度相手の名前を入れて、誰に対する返信なのかを表示していました。 今回「返信機 …