JavaScript
スタイルシート
Netscape

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-letterfirst-lineはプロパティとして取れたようです。

動的スタイルシート

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

普及状況

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

外部リンク