スタイルシート

JavaScriptで、ユーザーエージェント別に読みこむCSSを変えたいのですがインターネット上にそういうスクリプトがありません。

具体的には、IE5.5以上とN6以上はstandard.cssを読みこみ、IE5以下やNN4.xはCSSを"読みこまない"というようにするのはどうすればいいのかよくわかりません。

よろしくお願いします。

No.2 回答者： cntshinji 回答日時： 2001/12/02 06:36

ちょっと長いですが，こんなものを書いてみました。

あんまりいろいろ見ずに書いたから，どこか間違ってるかも。
表示上，変なところで改行されちゃってるかもしれないので，
気をつけてくださいね。
・・・って，もう解決してたりして。
念のため全角の"＜"や"＞"で書いていますので，半角に直してください。

～～～～～～～～～～～～～

＜HTML＞
＜HEAD＞
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--

// このへんから
var Navi = navigator.appName;
alert(Navi.charAt(0));
if (Navi.charAt(0) == 'M'){
document.write(' ＜link REL="StyleSheet" TYPE="text/css" href="test1.css"＞');
}
else if (Navi.charAt(0) == 'N') {
document.write(' ＜link REL="StyleSheet" TYPE="text/css" href="test2.css"＞');
}
// このへんまで


//--＞
＜/SCRIPT＞

＜/HEAD＞
＜BODY＞
＜P＞test＜/P＞

＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
// これを参考に文字列の検索（バージョンの取得）を考えてください。
document.write('userAgent :' + navigator.userAgent + '＜br＞');
document.write('appName :' + navigator.appName + '＜br＞');
document.write('appCodeName:' + navigator.appCodeName + '＜br＞');
document.write('appVersion :' + navigator.appVersion + '＜br＞');
document.write('language :' + navigator.language + '＜br＞');
document.write('platform :' + navigator.platform + '＜br＞');

//--＞
＜/SCRIPT＞

＜/BODY＞
＜/HTML＞

～～～～～～～～～～～～～
ちょっと古いですが，バージョンチェックのやり方は参考URLみたいなものがあります。

ページを２つ用意しておいて，バージョンチェックをしてから別々のページに飛ぶのもひとつの解決策ですかね。

参考URL：http://www.ueda.info.waseda.ac.jp/~gaku/js/how03 …

No.1 回答者： Adams2001 回答日時： 2001/11/13 10:32

スクリプトではないんですが（しかもNetscape4.x対策のみですが）。

Netscape4.xは@mediaにscreen以外を指定すると、その部分を丸々無視しちゃういことを利用して、スタイルシートを書くときに

@media screen, print {
＜ここにスタイルを書く＞
}

とやれば、このスタイルはNetscape4.xでは適用されません（@mediaがサポートされているブラウザ、IE5.5、IE6、Netscape6などでは画面表示と印刷の時に適用されます）。

実際には、Netscape4.xでも問題なく動作するスタイルは@mediaの外に書き（これは他のブラウザでも有効）、Netscape4.xでは上手く動作しないものを@mediaの中に入れてやるとよいでしょう。

body {background-color:#D3D3D3;color:#000000 }
@media screen, print {
body {background:#FFFFFF url('clie.gif') no-repeat;color:#000000}
}

上の例は一旦背景色と文字色を与えておいて、@mediaでNetscape4.x以外に別の背景色と背景画像を与えています。実際にどう変わるかは参考URLを見て確認して見てください。

参考URL：http://homepage1.nifty.com/dma/clie600/