2013年1月4日金曜日

OS,ブラウザ毎に読み込むCSSを変更する

ブラウザーや、osによって見え方が違う時はたまにありますが、調整してもどうにもなんない時に有効なスキルです。

（http://rafael.adm.br/css_browser_selector/）

http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js

ここから「css_browser_selector.js」(バクレツ大百科に「css_browser_selector.js.rtf」でおいてるよ)を拝借する。

拝借したjsを<head>内で読み込み

スタイルシートに追加！

例
ＯＳを指定する記入例



.win ul.os-check li {
    background-color: #4185F4;
}
ブラウザを指定する記入例



.webkit ul.os-check li {
    background-color: #4185F4;
}
ＯＳとブラウザ両方を指定する記入例（スペースを空けない）



.mac.ie7 ul.os-check li {
    background-color: #4185F4;
}
notも使用可能：chrome以外のwebkit orsafari



.webkit:not(.chrome) li.browser-check {
    background-color: #4185F4;
}


ＯＳ毎のクラス

win – Microsoft Windows (all versions)
vista – Microsoft Windows Vista
linux – Linux (x11 and linux)
mac – Mac OS
freebsd – FreeBSD
ipod – iPod Touch
iphone – iPhone
ipad – iPad
webtv – WebTV
j2me – J2ME Devices (ex: Opera mini) changed from mobile to j2me
blackberry – BlackBerry
android – Google Android
mobile – All mobile devices

ブラウザ毎のクラス

ie – Internet Explorer (All versions)
ie8 – Internet Explorer 8.x
ie7 – Internet Explorer 7.x
ie6 – Internet Explorer 6.x
ie5 – Internet Explorer 5.x
gecko – Mozilla, Firefox (all versions), Camino
ff2 – Firefox 2
ff3 – Firefox 3
ff3_5 – Firefox 3.5
ff3_6 – Firefox 3.6
opera – Opera (All versions)
opera8 – Opera 8.x
opera9 – Opera 9.x
opera10 – Opera 10.x
konqueror – Konqueror
webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 – Safari 3.x
chrome – Google Chrome
iron – SRWare Iron

試しにスタイル指定してみました。背景が青になっているのがお使いのＯＳとブラウザです。 Win7はVista扱いにはならないみたいですね。 ここにあるクラス名を使わないようにしておけば問題はなさそうです。裏技的なcssハックを使うよりずっと簡単でスマートな感じがしますね。 ただ2010年11月2日（v0.4.0）からバージョンが上がってないようなのでもうメンテナンスされないなら使えなくなっていきますね…


 http://www.819kps-t.com/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AB%E3%82%88%E3%82%8Bcss%E3%81%AE%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88/
参考したサイト


投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)