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

WordPress ローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法

この記事は約 2 分で読めます。 WordPressでサイト制作をする時。 XAMPPやMANPなどローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法をメモします。 ※Wordpressは既 …

no image

「WordPress Popular Posts Stats」で人気記事を表示させてみた♪

この記事は約 1 分で読めます。 WordPressのプラグイン「Wordpress Popular Posts Stats」を使って、自分のサイトでよく読まれている人気記事を表示させてみることにしま …

no image

別窓でリンク先のページをポップアップで開きたいとき

この記事は約 1 分で読めます。 よくリンク設定で、「target=”_blank”」を入れて別タブで開くようにすることは多いですが・・・。 今回、たまたまポップアップでリンク …

no image

Photoshopのテキストレイヤーからテキストを抽出する方法

この記事は約 2 分で読めます。 Photoshopで作られたカンプからコーディングをする時に、テキストレイヤーにある文字をいちいち入力するのは面倒だと思いつつ、今まで全て手打ちしてました。。。時間ロ …

no image

Yahoo!アクセス解析を使ってみた感想【レポート】

この記事は約 1 分で読めます。 以前、「Yahoo!アクセス解析を設定してみました!」でYahoo!アクセス解析を設定し、Google Analyticsと一緒にこのブログのアクセス解析を開始しまし …