Help us understand the problem. What is going on with this article?

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系列では対応を打ち切っています。

外部リンク

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away