| ポイント |
<![CDATA[
os = getOSType();
browser = getBrowserName();
version = getBrowserVersion();
if (os == "MacOS") dirName = "mac/";
if (os == "Windows") dirName = "win/";
if (os == "UNIX") dirName = "unix/";
if (browser == "Netscape") dirName += "nn";
if (browser == "Explorer") dirName += "ie";
if (browser == "Safari") dirName += "saf";
if (browser == "Opera") dirName += "op";
if ((version >= 1) && (version < 2)) dirName += "1.css";
if ((version >= 2) && (version < 3)) dirName += "2.css";
if ((version >= 3) && (version < 4)) dirName += "3.css";
if ((version >= 4) && (version < 5)) dirName += "4.css";
if ((version >= 5) && (version < 5.5)) dirName += "5.css";
if ((version >= 5.5) && (version < 6)) dirName += "5.5.css";
if ((version >= 6) && (version < 7)) dirName += "6.css";
if ((version >= 7) && (version < 8)) dirName += "7.css";
document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>");
]]>
|
| 説 明 |
より細かくスタイルシートを分けるにはOS、ブラウザ、バージョンを取得します。外部スタイルシートは「OS名/ブラウザ名スタイルシート名」としてディレクトリに分けて格納しておきます（例：win/ie5.css）。OS、ブラウザ、バージョンから読み込むURLを求めdocument.writeでlinkタグごと出力します。OS、ブラウザ、バージョンを求めるスクリプトを外部JavaScriptファイルとして使い回せば効率よくページを作成することができます。
Opera 6, 7およびSafari 1.0に対応する場合にはブラウザ判別を処理するenv.jsを改良します。Opera 6, 7の場合はこのサンプルで問題ありませんが、Safariの場合1.0以後のバージョンによっては正常に動作しない可能性がありますので注意してください。
またサンプルでは、どのフォルダ／ディレクトリの、どのスタイルファイルが読み込まれるかが分かるようにダイアログを表示するようにしてあります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>ブラウザ／OS／バージョン別にスタイルシートを読み込む</title>
<script Language="JavaScript" src="env.js"></script>
<script Language="JavaScript"><!--
os = getOSType();
browser = getBrowserName();
version = getBrowserVersion();
if (os == "MacOS") dirName = "mac/";
if (os == "Windows") dirName = "win/";
if (os == "UNIX") dirName = "unix/";
if (browser == "Netscape") dirName += "nn";
if (browser == "Explorer") dirName += "ie";
if (browser == "Safari") dirName += "saf";
if (browser == "Opera") dirName += "op";
if ((version >= 1) && (version < 2)) dirName += "1.css";
if ((version >= 2) && (version < 3)) dirName += "2.css";
if ((version >= 3) && (version < 4)) dirName += "3.css";
if ((version >= 4) && (version < 5)) dirName += "4.css";
if ((version >= 5) && (version < 5.5)) dirName += "5.css";
if ((version >= 5.5) && (version < 6)) dirName += "5.5.css";
if ((version >= 6) && (version < 7)) dirName += "6.css";
if ((version >= 7) && (version < 8)) dirName += "7.css";
alert(dirName);
document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>");
// --></script>
</head>
<body>
<div class="txt">ブラウザとOS別にスタイルシートを分ける</div>
</body>
</html>
]]>
|
| 補足説明 |
外部JavaScriptファイル(env.js)は以下の通りです。
<![CDATA[
// Macintosh -> MacOS
// Windows95/98/NT/2000/XP -> Windows
// UNIX -> UNIX
function getOSType()
{
var uAgent = navigator.userAgent.toUpperCase();
if (uAgent.indexOf("MAC") >= 0) return "MacOS";
if (uAgent.indexOf("WIN") >= 0) return "Windows";
if (uAgent.indexOf("X11") >= 0) return "UNIX";
return "";
}
// Netscape Navigator -> Netscape
// Internet Explorer -> Explorer
// Safari -> Safari
// Opera -> Opera
function getBrowserName()
{
var aName = navigator.appName.toUpperCase();
var uName = navigator.userAgent.toUpperCase();
if (uName.indexOf("SAFARI") >= 0) return "Safari";
if (uName.indexOf("OPERA") >= 0) return "Opera";
if (aName.indexOf("NETSCAPE") >= 0) return "Netscape";
if (aName.indexOf("MICROSOFT") >= 0) return "Explorer";
return "";
}
function getBrowserVersion()
{
var browser = getBrowserName();
var version = 0;
var s = 0;
var e = 0;
var appVer = navigator.appVersion;
var uName = navigator.userAgent.toUpperCase();
if (browser == "Safari")
{
version = eval(appVer.substring(0,3)) - 4;
}
if (browser == "Opera")
{
s = uName.indexOf("OPERA ",0) + 6;
e = uName.indexOf(" ",s);
version = eval(uName.substring(s,e));
}
if (browser == "Netscape")
{
s = appVer.indexOf(" ",0);
version = eval(appVer.substring(0,s));
if (version >= 5) version++;
}
if (browser == "Explorer")
{
appVer = navigator.userAgent;
s = appVer.indexOf("MSIE ",0) + 5;
e = appVer.indexOf(";",s);
version = eval(appVer.substring(s,e));
}
return version;
}
]]> |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
ブラウザ／OS／バージョン別にスタイルシートを読み込む（Opera 6,7, Safari 1.0対応版）