Home > Personal | サイト制作記録 > CSSの振り分け（JavaScript編）

CSSの振り分け（JavaScript編）

2004-08-11 (水) 6:38
Personal | サイト制作記録

JavaScriptでCSSを振り分けるスプリクト。
やり方はいろいろあるけど、ウチはこんな感じです。
IEだけFontSizeが違うからそれを回避するために、IE用にCSSを1枚作ってます。

//ブラウザの名前とバージョンを取得&代入
var detect = navigator.userAgent.toLowerCase();

//各変数の宣言
var OS,browser,version,total,thestring;

//取得した値から判別したいブラウザの名前が入っているか判別
function checkIt(string){
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}

//ブラウザチェック
if (checkIt(‘konqueror’)){
browser = "Konqueror";
OS = "Linux";
}
else if (checkIt(‘safari’)) browser = "Safari";
else if (checkIt(‘omniweb’)) browser = "OmniWeb";
else if (checkIt(‘opera’)) browser = "Opera";
else if (checkIt(‘webtv’)) browser = "WebTV";
else if (checkIt(‘icab’)) browser = "iCab";
else if (checkIt(‘msie’)) browser = "InternetExplorer";
else if (!checkIt(‘compatible’)){
browser = "Netscape Navigator";
version = detect.charAt(8);
}
else browser = "An unknown browser";

//各ブラウザのバージョンチェック
if (!version) version = detect.charAt(place + thestring.length);

//OSチェック
if (!OS){
if (checkIt(‘linux’)) OS = "Linux";
else if (checkIt(‘x11′)) OS = "Unix";
else if (checkIt(‘mac’)) OS = "Mac";
else if (checkIt(‘win’)) OS = "Windows";
else OS = "an unknown operating system";
}

//ユーザーの環境に合わせてCSS書き出し
//WindowsのIEを使っている人はIE用のCSS
if((OS=="Windows") && (browser=="InternetExplorer")){
document.write(" <link href=\"http://blog.grayash.com/css/ie.css\" rel=\"stylesheet\" type=\"text/css\" /> ");
}
//それ以外は普通のCSS
else{
document.write(" <link href=\"http://blog.grayash.com/css/default.css\" rel=\"stylesheet\" type=\"text/css\" /> ");
}