| ポイント |
<![CDATA[
os = getOSType();
browser = getBrowserName();
version = getBrowserVersion();
if (os == "MacOS") dirName = "mac/";
if (os == "Windows") dirName = "win/";
if (os == "UNIX") dirName = "unix/";
if (browser == "Firefox") dirName += "ff";
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";
if ((version >= 8) && (version < 8.5)) dirName += "8.css";
if ((version >= 8.5) && (version < 9)) dirName += "8.5.css";
document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>");
]]>
|
| 説 明 |
より細かくスタイルシートを分けるにはOS、ブラウザ、バージョンを取得します。外部スタイルシートは「OS名/ブラウザ名スタイルシート名」としてディレクトリに分けて格納しておきます（例：win/ie5.css）。OS、ブラウザ、バージョンから読み込むURLを求めdocument.writeでlinkタグごと出力します。OS、ブラウザ、バージョンを求めるスクリプトを外部JavaScriptファイルとして使い回せば効率よくページを作成することができます。
Opera 8, 8.5およびFirefox 1.0に対応する場合にはブラウザ判別を処理するenv.jsを改良します。Safariの場合はuserAgentの文字列からバージョンを探し出し400以上ならver 2、それ以下ならばver 1として処理します。
またサンプルでは、どのフォルダ／ディレクトリの、どのスタイルファイルが読み込まれるかが分かるようにダイアログを表示するようにしてあります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>ブラウザ／OS／バージョン別にスタイルシートを読み込む（Safari2, Opera 8/8.5, Firefox 1対応版）</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 == "Firefox") dirName += "ff";
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";
if ((version >= 8) && (version < 8.5)) dirName += "8.css";
if ((version >= 8.5) && (version < 9)) dirName += "8.5.css";
document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>");
alert(dirName);
// --></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 "";
}
// Firefox -> Firefox
// 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 (uName.indexOf("FIREFOX") >= 0) return "Firefox";
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")
{
s = uName.indexOf("SAFARI/",0);
version = (uName.substring(s+7,s+99));
if (version < 400) version = 1;
if ((version >= 400) < (version <= 499)) version = 2;
if (version >= 500) version = 3;
}
if (browser == "Opera")
{
s = uName.indexOf("OPERA",0) + 6;
e = uName.indexOf(" ",s);
version = parseFloat(uName.substring(s,e));
}
if (browser == "Firefox")
{
s = uName.indexOf("FIREFOX/",0);
version = parseFloat(uName.substring(s+8,s+8+3));
}
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／バージョン別にスタイルシートを読み込む（Safari2, Opera 8/8.5, Firefox 1対応版）