JavaScript Style Sheetをご存知ですか

JavaScript Style Sheetをご存知ですか:

まずはじめにお断りしておきますが、タイトルだけを見て、「Reactなどで、JavaScriptとCSSを融合させる」ような技術を連想した方は…大外れです。

カレンダーのとおり、これは現代には伝わっていないロストテクノロジーです。

JavaScript Style Sheet（JSSS）とは

HTML5では<style>のtype="text/css"を省略できるようになりましたが、現実問題としてブラウザで直接使う、他のスタイルシート言語は存在しないように思えます。

…と思いきや、かつてtype="text/javascript"で書くスタイルシート言語が存在しました。これが、JavaScript Style Sheet、略してJSSSです。

文法概要

現代でもJavaScriptで要素ごとにCSSを指定する際にelement.style.marginLeft = '20px';のように書けますが、そういうことをグローバルにできるオブジェクトが存在している、というのがJSSSの環境です。なお、用語は現代の読者の理解を優先するためにCSSのものを借用する場面もあります。

• 
  tags.TAGNAME…タグセレクタ
• 
  classes.class_name.all…クラスセレクタ
• 
  ids.id_value…IDセレクタ

なお、同じセレクタに複数のプロパティを指定する場合、これまた現代JavaScriptから消滅したwith構文を使っています。

子孫セレクタ

CSSでいう「複合セレクタ」として使えるのは子孫セレクタだけで、contextual(親オブジェクト, 子オブジェクト…)のような形で指定します。また、first-letterやfirst-lineはプロパティとして取れたようです。

動的スタイルシート

JavaScriptということで、当然プロパティに代入する値は計算して出すことが可能です。また、applyというプロパティがあって、ここに関数を入れておくと、スタイルシートの評価のたびに関数が呼び出されて評価されるという、意外と高度な仕組みがあります。

普及状況

JSSSはNetscapeの4系列で採用されましたが、IEで採用されることはなく、Netscapeも6系列では対応を打ち切っています。

外部リンク

• 英語版Wikipedia
• W3Cへの提案