ブラウザ別にスタイルシートを読み込む


動作ブラウザ 【 IE:3.0  NN:2.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows - × × - × -
Macintosh × - × × - - ×
UNIX - - - - - × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント str = navigator.appName.toUpperCase(); if (str.indexOf("NETSCAPE") >= 0) fName = "nn.css"; if (str.indexOf("EXPLORER") >= 0) fName = "ie.css"; document.write("<link rel='stylesheet' href='"+fName+"' type='text/css'>");
説  明 ブラウザ別(IE,NN)にスタイルシートを指定するには、あからじめ別々にスタイルシートファイルを用意しておきます。ブラウザ判別後にdocument.write()でlinkタグごと出力することで別々のスタイルシートファイルを読み込むことができます。
サンプル <html> <head> <title>ブラウザ別にスタイルシートを読み込む</title> <script Language="JavaScript"><!-- fName = ""; str = navigator.appName.toUpperCase(); if (str.indexOf("NETSCAPE") >= 0) fName = "nn.css"; if (str.indexOf("EXPLORER") >= 0) fName = "ie.css"; document.write("<link rel='stylesheet' href='"+fName+"' type='text/css'>"); // --></script> </head> <body> <div class="txt">ブラウザ別にCSS読み込み</div> </body> </html>
補足説明 navigator.userAgentで完全にブラウザを特定できるわけではありません。

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA