ホームページ制作の小技集
＆nbsp;のホームページ制作 ++ 小技集 Tips ++
ブラウザを振り分けるJavaScript
ホームページを一度でも作ったことのある方なら直面する、ブラウザによるレイアウトの崩れ。しかし、その悩みを解消してくれる、優れもののjavascriptがあります。それが以下のjavascriptです。
このjavascriptをHeadタグに添付、もしくは外部ファイルにする。
<script type="text/javascript">
<!--
var css_browser_selector = function() {
var
ua=navigator.userAgent.toLowerCase(),
is=function(t){ return ua.indexOf(t) != -1; },
h=document.getElementsByTagName('html')[0],
b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?('ie ie'+RegExp.$1):is('gecko/')? 'gecko':is('opera/9')?'opera opera9':/opera (\d)/.test(ua)?'opera opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit safari':is('mozilla/')?'gecko':'',
os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':'';
var c=b+os+' js';
h.className += h.className?' '+c:c;
}();
-->
</script> そうしてスタイルシートには以下のように記述します。
その際記述の順番に気をつけてください。
通常のCSSの書き方が以下です。
.sample{
color:#FF0000;
}
以下が特定のブラウザにのみスタイルを適用したいときに用いるやりかたです。
（IEとFirefoxでわけてみます）
.sample{
color:#FF0000;
}
.ie .sample{
color:#FF0000;
}
.gecko .sample{
color:#FF0000;
}
オリジナルが一番最初にくるようにしてください。
他には以下のような振り分けができます。
- .ie7 .sample{}→ie7のみ
- .opera .sample{}→Opera用
- さらには
- .win.gecko .sample{}→windowsのFirefoxとNetscape用
- .linux.gecko .sample{}→LinuxのFirefoxとNetscape用
と細かく振り分けできます。
これ以外にももっと細かく振り分けることができると思います。
かなり使えると思いますので、使ってみてください。
しかし欠点としてはjavascriptがオフになっている場合、スタイルが崩れてしまうという点です。
ちなみにこのホームページではこのスクリプトは使っていません。
