Androidのバージョン違いによるレイアウトがひどいのでなんとかしたいので、こんなものを見つけました。
引用
http://kotori-blog.com/css/css_browser_selector/
『CSS Browser Selector』の使用方法
ダウンロード
下記の公式サイトの「DOWNLOAD」のところにリンクがはってあるのでそこからjsをダウンロードします。
CSS Browser Selector
『CSS Browser Selector』の読み込み
より前で、ダウンロードした「css_browser_selector.js」を読み込みます。
[html]
<script src="css_browser_selector.js" type="text/javascript"></script>
[/html]
CSSの記述方法
jsを読み込んだらあとはCSSにコードを書くだけです！
ブラウザやOS毎にCSSを記述することができます。
公式に載っている記述方法の例です。
[css]
html.gecko div#header {
margin: 1em; /*geckoエンジンのブラウザのみ*/
}
.opera #header {
margin: 1.2em; /*operaのみ*/
}
.ie .mylink {
font-weight: bold; /*ie(全バージョン)のみ*/
}
.mac.ie .mylink {
font-weight: bold; /*Macのieのみ*/
}
[/css]
OSとブラウザのセレクタの間にはスペースは入りません。
『CSS Browser Selector』で利用可能なOSのコード
利用できるOSコードの一覧載せときます。
[css]
.win {
/*Windows (全バージョン)のみ*/
}
.vista {
/*Windows Vistaのみ*/
}
.linux {
/*linux（x11とlinux）のみ*/
}
.mac {
/*Mac OSのみ*/
}
.freebsd {
/*FreeBSDのみ*/
}
.ipod {
/*iPod Touchのみ*/
}
.iphone {
/*iphoneのみ*/
}
.ipad {
/*ipadのみ*/
}
.webtv {
/*WebTVのみ*/
}
.j2me {
/*J2ME Devices（例えばOpera mini）のみ*/
}
.blackberry {
/*blackberryのみ*/
}
.android {
/*Google Androidのみ*/
}
.mobile {
/*全てのモバイルデバイスのみ*/
}
[/css]
『CSS Browser Selector』で利用可能なブラウザのコード
利用できるブラウザコードの一覧も載せときます。
[css]
.ie {
/*Internet Explorer（全バージョン）のみ*/
}
.ie8 {
/*Internet Explorer 8.xのみ*/
}
.ie7 {
/*Internet Explorer 7.xのみ*/
}
.ie6 {
/*Internet Explorer 6.xのみ*/
}
.ie5 {
/*Internet Explorer 5.xのみ*/
}
.gecko {
/*Firefox（全バージョン）とCaminoのみ*/
}
.ff2 {
/*Firefox 2のみ*/
}
.ff3 {
/*Firefox 3のみ*/
}
.ff3_5 {
/*Firefox 3.5のみ*/
}
.ff3_6 {
/*Firefox 3.6のみ*/
}
.opera {
/*Opera（全バージョン）のみ*/
}
.opera8 {
/*Opera 8.xのみ*/
}
.opera9 {
/*Opera 9.xのみ*/
}
.opera10 {
/*Opera 10.xのみ*/
}
.konqueror {
/*Konquerorのみ*/
}
.webkit {
/*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari {
/*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari3 {
/*Safari 3.xのみ*/
}
.chrome {
/*Google Chromeのみ*/
}
.iron {
/*SRWare Ironのみ*/
}
[/css]
まとめ
もっと早く出会いたかった！！！！
これに尽きます。
ホント簡単でシンプルですばらしすぎます。
煩わしいハックタグとはおさらばです。
