まずはじめにお断りしておきますが、タイトルだけを見て、「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系列では対応を打ち切っています。