4種類のスタイルファイルをそれぞれに適応させたいのですが？

[上に] [前に] [次に]
クミコ 2000/03/21(火) 21:56:40
JavaScriptでプラットフォーム（Mac,Win）とブラウザ（IE,NN）それぞれを
判別して、それぞれに準備したスタイルシートを適応させたいと思っています。
4種類のスタイルファイル（Mac+IE,Mac+NN,Win+IE,Win+NN）を用意して
振り分けたいのです。

当方JavaScriptは初心者でいろいろな本を見たのですが、ひとつの
プラットフォームのブラウザ判別しかサンプルを見つけることができませんでした。
この判別スクリプトの記述がわかる方がおられましたら、教えていただけませんでしょうか？
tky 2000/03/22(水) 02:40:22
私もフォントサイズ調整のため、以前やっていました。
手軽に（でも丁寧に）書くとこんな感じでしょうか？

if (navigator.userAgent.indexOf("Mac") != -1) {
   if (document.all) {
      document.write('<link rel="stylesheet" type="text/css" href="MACIE.css">');
      document.close();
   }
   else if (document.layers) {
      document.write('<link rel="stylesheet" type="text/css" href="MACNN.css">');
      document.close();
   }
}
else if (navigator.userAgent.indexOf("Win") != -1) {
   if (document.all) {
      document.write('<link rel="stylesheet" type="text/css" href="WINIE.css">');
      document.close();
   }
   else if (document.layers) {
      document.write('<link rel="stylesheet" type="text/css" href="WINNN.css">');
      document.close();
   }
}

ここでは、はっきりとMac IE4 / Mac NN4 / Win IE4 / Win NN4　を
特定して、それぞれで呼びこむ外部CSSファイルを分けてます。
てきとー 2000/03/22(水) 03:26:32
そもそも環境によって使い分ける必要があるのかどうかも議論の余地がありますが（謎）
まあ、その辺はAuthorの望む世界ならOKでしょう。
とりあえず、HEAD要素に以下のものを入れるとそれなりに動作します。

<meta http-equiv="Content-Script-Type" content="type">
<script type="text/javascript">
<!--
var stylesheet ="";
var brVersion = navigator.appVersion.charAt(0);

if(navigator.platform == "Win32"){
if((navigator.appName == "Microsoft Internet Explorer") && (brVersion >=4)){
stylesheet = "ie_win";
} else if(navigator.appName == "Netscape") {
stylesheet = "nn_win";
}
} else if(navigator.platform == "MacPPC"){
if(navigator.appName == "Netscape"){
stylesheet = "nn_mac";
} else if(navigator.appName == "Microsoft Internet Explorer") {
stylesheet = "ie_mac";
}
}

if(stylesheet != ""){
document.write('<meta http-equiv="Content-Style-Type" content="text/css">\n');
document.write('<link rel="stylesheet" type="text/css" href="'+stylesheet+'.css">');
}
//-->
</script>
クミコ 2000/03/22(水) 11:56:17
tkyさん、てきとーさん、お早いお返事本当にありがとうございます。
ひとつお聞きしたいのですが、これはバージョンは4にのみ対応
ということになるのでしょうか？
お返事の中で「-1」とか「4」、「32」などいろいろな数字があるのですが
これは何かバージョンに関係あるものなのでしょうか？
例えば、バージョン3のブラウザで以上のページを見るとスタイルシートが
対応されないということになるのですか？
申し訳有りませんが教えていただけませんか？
てきとー 2000/03/23(木) 03:21:20
MSIE3はCSSの実装があれなので除外してます。
NN3はスタイルシートが使えないので安心です。
にゃあ 2000/03/23(木) 07:19:50
-1について、補足です。

if (navigator.userAgent.indexOf("Mac") != -1) {
というのは、userAgentという部分に「Mac」が含まれているか
を判断しています。

a.indexOf(b) は「a」のどこに「b」が含まれているかを求めますが、
もし含まれていないときには「-1」を与えます。

また、！＝　は「そうでないとき」という条件文なので

含まれていないときで無いとき　には…ということになります。
（要するに、含まれているとき）
クミコ 2000/03/23(木) 15:49:25
てきとーさん、にゃあさん。本当にありがとうございます。感謝してます。
初心者のわたしにここまで親切に教えていただいて嬉しいかぎりです。
特ににゃあさんにはとても基本的なところまで教えていただき、少しスクリプトの意味がわかりました。
実はこの部分の意味がよくわからなくてのどに魚の骨がささっている感じでした。
ただ、スクリプトの意味はわかったのですが、なぜ-1を入れるのかが疑問です。
すごく基本的なことだとは思うのですが、よろしくお願いします。
にゃあ 2000/03/24(金) 06:43:39
a.indexOf(b)は、

「a」という文字のなかの「b」の位置を返しますが、見つかった場所が
１文字目なら、0
２文字目なら、1
３文字目なら、2
　・
　・
　・
という感じで答えを出します。（11文字目なら、10ですね）
ですから、aの中にbがあるなら、この答えがマイナスにはなりません。
なら、どこにも見つからないときはマイナス1にでもしておこう、
ということだと思います。
クミコ 2000/03/25(土) 15:20:08
[[解決]]
tkyさん、てきとーさん、にゃあさん、本当にいろいろありがとうございました。
これでなんとかできそうです。
お世話になりました。
[上に] [前に] [次に]