| ポイント |
<![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 ((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";
document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>");
]]>
|
| 説 明 |
より細かくスタイルシートを分けるにはOS、ブラウザ、バージョンを取得します。外部スタイルシートは「OS名/ブラウザ名スタイルシート名」としてディレクトリに分けて格納しておきます（例：win/ie5.css）。OS、ブラウザ、バージョンから読み込むURLを求めdocument.writeでlinkタグごと出力します。OS、ブラウザ、バージョンを求めるスクリプトを外部JavaScriptファイルとして使い回せば効率よくページを作成することができます。 |
| サンプル |
<![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 ((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";
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 -> 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
function getBrowserName()
{
var aName = navigator.appName.toUpperCase();
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;
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!
|
ブラウザ別にスタイルシートを読み込む