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

Facebookページで「30いいね!」を獲得したら出てくる「インサイト」画面。

この記事は約 1 分で読めます。 ゆるゆると更新していたFacebookページ。 ようやく「いいね!」の数が30を超えました。 すると、今まで見る事が出来なかった「インサイト」という項目が表示されるよ …

no image

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …

no image

Facebookで友達が始めたアプリのリクエストをブロックする方法

この記事は約 1 分で読めます。 Facebookで友達が何かのアプリを始めた時、関係のない自分にまでリクエストがくる事があります。 よく言われる「スパムアプリ」なんだけれど、最近特に多いのが「マイカ …

no image

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

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

no image

レスポンシブサイト制作にチャレンジ。

この記事は約 1 分で読めます。最近、気になっているのが「レスポンシブWebサイト」。 1つのHTMLで、スマートフォンやタブレットなど小さな画面とパソコンなどの大きな画面で見た場合と見た目を切り替え …