Virgo - JavaScript Diary

知ってる方もいるかも知れませんが、NN4 は style="～" というような書き方でスタイルを埋め込み JavaScript で出力すると思わぬエラーが発生します。
なので普通は（STYLEタグ内でクラス名を付けたルールを作成し）class="～" という形でスタイルを埋め込むことになります。これだとエラーは発生しません。しかし、この場合 CSS は変数が使用できないため、汎用的なスクリプトは作成できなくなります。
では、STYLEタグごと JavaScript で出力してしまおうと考えますが、これは NN4 がすさまじく不安定になる原因になります（エラー個所がさっぱり分からないという、とんでもなくヤバい状態）。
結局、NC4用のSTYLEを普通（静的）に作成し、NN4の汎用化はなくなくあきらめてしまうものですが、STYLE の動的な生成方法がありました。
それは JavaScriptStyleSheets( JSSS ) です。
知ってはいたものの、普及していない、覚えるのがダルいとかで、今まで使用する機会は全くなかったのですが、
少なくとも NN4 を考慮したクロスブラウザDHTMLでは非常に役に立ちそうです。

CSS の宣言は

<style type="text/css"><!--
    ...
-->
</style>

です。JSSS の場合は

<style type="text/JavaScript"><!--
    ...
//-->
</style>

となりますが、今回僕が言いたいことはこの書き方ではありません。
僕が思う JSSS の一番の利点は SCRIPTタグ内でも書ける ということです。つまり、JavaScript で使用する変数が STYLE にそのまま適用できるということになります。

では、実際にそのスクリプトを書いてみたいと思います。先ず、雛型です。

if( document.layers !== void 0 ){
    with( document ){
        ...
    }
}

JSSS は NN4 が対応しているため、if 文で判定します。次に JSSS のルートオブジェクトは document オブジェクトであるため、with 文で括っておきます。
さて、実際の処理ですが、至って簡単です。その例を数個書いておきたいと思います。CSSと見比べながら確認して下さい。

if( document.layers !== void 0 ) with( document ){
    
    // H1{ font-size:20px; } と同じ
    tags.H1.fontSize = "20px" ;
    
    // .voo{ font-weiht:bold; } と同じ
    classes.voo.all.fontWeight = "bold" ;
    
    // #HOGE{ text-align:center } と同じ
    ids.HOGE.textAlign = "center" ;
    
    // P.voo{ color:#ff0000; } と同じ
    classes.voo.P.color = "#ff0000" ;
    
    // .voo A{ text-decoration:none; } と同じ
    contextual( classes.voo.all, tags.A ).textDecoration = "none" ;
    
    // DIV.voo P{ padding-top:3px; } と同じ
    contextual( classes.voo.DIV, tags.P ).paddingTop = "3px" ;
    
}

キーワードは all, tags, classes, ids, contextual ぐらいだと思います。

実際使用するのは以下のような感じになるでしょうか（HTMLだけで代用できるのであまり良い例ではありませんが）。
フォントサイズに依らず、TABLE項目（TH）の必ず中央に位置したい場合（paddingの値をうまく計算する）

var class_id = "cname" ; // THに適用するクラス名

var height = 50 ; // 項目の高さ
var fontSize = 13 ; // フォントサイズ

var padding = Math.floor( ( height-fontSize )/2 ); // 上下余白の値

// JSSSルール定義
if( document.layers !== void 0 ) with( document ){
    // 設定する項目が多い場合、さらに with で括ると良い
    classes[ class_id ].TH.fontSize = fontSize+"px" ;
    classes[ class_id ].TH.paddingTop = padding ;
    classes[ class_id ].TH.paddingBottom = padding ;
}

// HTML出力
document.writeln(
    "<table border='0' cellPadding='0' cellSpacing='0' height='"+height+"'><tr>",
    "<th class='"+class_id+"'> SAMPLE <\/th>",
    "<\/tr><\/table>"
);

CSS使いにとっては、CSS ではなく JSSS が普及した方が良かったのかも知れませんね。

JavaScript Diary

クロスDHTML使い達よ、JSSSを覚えよ [ 2001/10/03 ]