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

「AMPPS」にa-blog cmsのローカル環境を作ってみる

この記事は約 1 分で読めます。 「MacでもWindowsでもOKな「AMPPS」でローカル環境を作ってみる」で作ったローカル環境に国産CMSの「a-blog cms」をインストールしてみたいと思い …

no image

IllustratorとPhotoshopで刺繍風のイラストと文字を作ってみた。

この記事は約 1 分で読めます。布地に刺繍をしたみたいなイラストと文字をIllustratorとPhotoshopで作ってみました。 ※布地素材は既に用意している状態の説明です。

no image

検索エンジンに登録する方法。

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 いくつもあると思うのですが、今回は検索エンジンに登録する方法にチャレンジしたいと思います。 いろいろ方法をググっていたら、「Goo …

no image

WordPressプラグイン「Audio Player」でMP3音源を簡単に再生してみた

この記事は約 1 分で読めます。 WordPressでMP3オーディオプレーヤーを表示させてくれるプラグイン「Audio Player」を試してみました。 「Audio Player」は、Flashで …

no image

slideshow.jsを使って画像のスライドショーにチャレンジ。 

この記事は約 1 分で読めます。画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 たくさん方法があると思うので、いくつか試してみるつもりです。 まず今回は、「slid …