ブラウザーによって動作が異なるCSSですが、JavaScript経由でその設定をすることによってIE/Netscape4.x/6.x完全互換のCSS設定が可能になります。
巷ではNetscape4.xや最新のNetscape6.1PR2は、CSS非対応ばかりか、予想外の奇妙な動作をするクソブラウザーとされていますが、それは全くのデタラメです。
単にほとんどの人達が何も知らないだけです。大手のmacromediaさえも、「CSSはIE、Netscape非互換である」としています。
しかしNetscape社は、かなり前にJavaScriptによるCSS制御の方法をWEBプログラマー向けに開発しています。それがこのJASSです。
以下にサンプルコードを提示します。普通にCSSで設定すると、
BODY{font-size:12px;}
TD{font-size:12px;}
.classa{font-size:12px;}
TD.classb{font-size:12px;}
TD B.classc3foo{font-size:12px;}
ですが、これをJASSで記述すると以下のようになります。
<STYLE ID="tssxyz" TYPE="text/css"></STYLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
pFontSize = 12px;
var agt=navigator.userAgent.toLowerCase();
/* 以下はNetscape4.x用スクリプト */
if ( (parseInt(navigator.appVersion)==4) &&
(agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) ) {
document.tags.BODY.fontSize=pFontSize;
document.tags.TD.fontSize="12px";
document.classes.classa.all.fontSize="12px";
document.classes.classb.TD.fontSize="12px";
document.contextual(document.tags.TD, document.classes.classc#foo.B).fontSize="12px";}
/* 以下はNetscape6.x用スクリプト */
else if (agt.indexOf('gecko') != -1) {
document.getElementById('tssxyz').sheet.insertRule('BODY { font-size:
' + pFontSize + ' }', document.getElementById('tssxyz').sheet.cssRules.length
)
document.getElementById('tssxyz').sheet.insertRule('TD { font-size:
12px }', document.getElementById('tssxyz').sheet.cssRules.length )
document.getElementById('tssxyz').sheet.insertRule('.classa { font-size:
12px }', document.getElementById('tssxyz').sheet.cssRules.length )
document.getElementById('tssxyz').sheet.insertRule('TD.classb { font-size:
12px }', document.getElementById('tssxyz').sheet.cssRules.length )
document.getElementById('tssxyz').sheet.insertRule('TD B.classc#foo
{ font-size: 12px }', document.getElementById('tssxyz').sheet.cssRules.length
)}
/* 以下はIE用スクリプト */
else if ( (parseInt(navigator.appVersion)>=4) &&
(agt.indexOf('msie') != -1) ) {
document.styleSheets["tssxyz"].addRule ("BODY", "font-size:" + pFontSize);
document.styleSheets["tssxyz"].addRule ("TD", "font-size:12px");
document.styleSheets["tssxyz"].addRule (".classa", "font-size:12px");
document.styleSheets["tssxyz"].addRule ("TD.classb", "font-size:12px");
document.styleSheets["tssxyz"].addRule ("TD B.classc#foo", "font-size:12px");}
//-->
</SCRIPT> |
Nightscape
