« [Bookmarklet] Bulkfeeds&Feedback&Google を同時に検索 | トップページ | 各記事の終りに「ページのトップへ戻る」 »

2004.02.20

[Tips] ブラウザによってスタイルシートを切り替える

以下のようなJavaScriptをサイドバーのマイリンク-リンク-メモ(テキスト表示 )に入れることによって、ブラウザ別にスタイルシートを切り替えました。


<script type="text/javascript">
<!--
var ua="IE";
if (navigator.userAgent.indexOf("Gecko") != -1) {
  if (navigator.userAgent.indexOf("rv:1.6") != -1) {
    ua = "Gecko1.6";
  }
}
if (navigator.userAgent.indexOf("Safari") != -1) {
  ua = "Safari";
}

if (ua == "Gecko1.6") {
    document.write("<link rel=\"stylesheet\" href=\"http://tiger.air-nifty.com/tigers_logs/firefox.css\" type=\"text/css\" />");
} else if (ua == "Safari") {
    document.write("<link rel=\"stylesheet\" href=\"http://tiger.air-nifty.com/tigers_logs/safari.css\" type=\"text/css\" />");
} else {
    document.write("<link rel=\"stylesheet\" href=\"http://tiger.air-nifty.com/tigers_logs/mystyle.css\" type=\"text/css\" />");
}
//-->
</script>

このスクリプトでは Geckoエンジンのrv:1.6(firefoxとmozilla1.6)とSafariとそれ以外という3つに分けていますが、ブラウザ判別部分を増やして、対応するcssを用意すれば、幾らでも変更ができます。

現在、ここのcssだと、Mac IE 5.23やOperaだと、横スクロールバーが出てしまうという不具合を認識していますが、それも調整する予定です。

|

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/795/214857

この記事へのトラックバック一覧です: [Tips] ブラウザによってスタイルシートを切り替える:

コメント

うぅん、スバらしい。
これでばっちりです。

・・・そんなことより、自分のとこの見栄えなんとかしろ>自分
(つД`)

投稿: Akkey | 2004.02.20 16:12

わー、昨日Firefoxで見たときは真ん中の列が狭くなってたのに、きっちり直ってますねー。感動してしまいました(笑)

投稿: キタシノガイチ | 2004.02.21 03:08

コメントを書く