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

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

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

関連記事

no image

WordPress.comの便利機能が入ってる 「Jetpack」を試してみた♪

この記事は約 1 分で読めます。 アクセス解析プラグイン「WordPress.com Stats」をずっと使っていました。 他にもアクセス解析の勉強のために使用しているものがあるのですが、一番よく見て …

no image

WordPress Moreタグを使った抜粋にチャレンジ

この記事は約 1 分で読めます。 今回は、「抜粋」にチャレンジします♪ 「抜粋」は、記事の一部のみ表示して「続きを読む」という文字をクリックすると、全文が表示されるものです。 長い文章の場合にはかなり …

no image

WordPress 「Contact Form7」で送信完了画面と自動送信メールを試してみた

この記事は約 2 分で読めます。 WordPressの「Contact Form7」は、お問い合せフォームを簡単に取り付ける事が出来るという便利なプラグインです。 以前から利用しているのですが、最近ま …

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …

no image

WordPress オリジナルテーマでデザインをカテゴリごとに変更したい時

この記事は約 1 分で読めます。 オリジナルテーマを自分で作成していて、それぞれのカテゴリーごとにテンプレートを変えたり、デザインを変えたりしたい時。 いろいろな方法があると思います。 「bodyにカ …