Cascading Style Sheetの記法はなぜあのような形になったのか。

公開:2016-03-06 12:14
更新:2020-02-15 04:37
カテゴリ:web,css

CSSの記法ってなぜこんな風になったのだろうとちょっと疑問に思った。なんとなくJSON風でだけどそうではない独特の記法だ。セレクタにマッチするスタイルの内容をブレス({})中に記述するという記法はどのようにして生み出されたのか。

h1 {
  font-size:10pt;
  text-align:center;
  border:1px solid black;
}

W3Cの「https://www.w3.org/Style/LieBos2e/history/」という記事を読んだり、そこからのリンクをたどってみたところ、誰かが最初からこの記法を提案したのではなく、1つの提案ををたたきに議論の末決まったものであることがわかった。

CSSの検討が始まったのは1994年から。CERNがWebを電子出版のプラットフォームとして使うために始めたとある。ただスタイルシートという概念は1990年ころからあり、ティム・バーナーズ・リーがNEXT上で作ったブラウザ・エディタ上には簡単なスタイルシートの仕組みが実装されていたのだ。でもティム・バーナーズ・リーはブラウザ側で利用者にとってベストな表示方法を決めればよいと考えていたので、あえてスタイルシートのことは公表しなかった。

ViolaやHarmonyという初期のブラウザはスタイル記述言語に相当するものを持っていた。Vioraというのは、あのNCSA Mosaicが登場するまでは最も人気のあるWebブラウザであった。このブラウザは簡単なスタイルシート機構を持っていたそうだ。

https://ja.wikipedia.org/wiki/ViolaWWW

スタイルシートは以下のようなものだ。確かにCSSに近い気がするね。

(BODY,INPUT,P   FGColor=black 
                 BGColor=grey70 
                 BDColor=grey70 
                 align=left

 (H1             FGColor=white 
                 BGColor=red 
                 BDColor=black 
                 align=center

このブラウザはさらにはスクリプト言語を有していたようだ。なかなか先進的なブラウザであったが、X Windowでしか動作しなかったのでNCSA Mosaicとの競争に敗れてしまったらしい。 NCSA MosaicはWWWの普及には貢献したが、スタイルシート機構はもっていなかったので、スタイルシートの歴史から見れば一歩後退してしまった。このブラウザはフォントと色の指定しかできなかった。

そして1994年、Håkon さんによって最初のスタイルシートの提案が行われた。

https://www.w3.org/People/howcome/p/cascade.html

上記のドキュメントのAppendixには記載例が書いてある。それを引用する。

#
# This is an initial style sheet. It should provide fallback values
# with low influence. Also, at the end, the user has added some
# favorite settings
#

0%            # 0% impact, i.e. fallbacks

# first, set some common defaults

font.family = times    
font.size = 12pt        # alternative units are px, mm, cm
font.slant = normal
font.weight = normal

h1.font.size = font.size * 3
h2.font.size = font.size * 2.5
h3.font.size = font.size * 2

strong.font.weight = bold
em.font.slant = italics
tt.font.spacing = proportional


align.style = left        # paragraph alignment
h1.align.style = center


space.left = 0pt        # set the white space surrounding paragraphs
space.right = 0pt
space.above = 4pt
space.below = 4pt
space.first = space.left + 0.5cm     # i.e. some extra indentation

head.space.above = 15pt            # straying from the 4pt default above

list.space.left = 1cm            # extra indentation for all lists
list.space.first = 1cm

# window-wide settings

AGE > 3d ? window.background = pale_yellow : window.background = white

window.foreground = black

window.width = 400px
window.height = REAL_HEIGHT - 50px

window.margin.left = 2cm
window.margin.right = 2cm
window.margin.above = 2cm
window.margin.below = 2cm

#
# paper works different
#

print.font.size = 10pt

#
# The user has redefined some of the default values below
#

100%    # first, redefine influence to dictatorship

font.family = helvetica 

#
# after this, the rest of the influence is handed over to the style
# sheets of the incoming documents
#

なんとなく、DOMのスタイル指定方法に似ていなくもないね。この提案は未完成な部分が多かったけれども、議論のネタとして非常に有効に機能した。この提案の中で重要なのが「cascade」という概念であり、それは今のCSSの規格にも生きている。<link>タグで複数のスタイルシートを指定すると、カスケードされマージされた結果が反映されるというところね。

でこの提案の議論が進んでいる中、ArgoというブラウザがBert Bosという方によって作られた。このArgoというブラウザは「Stream-based Style sheet Proposal」によって提案されたスタイルシート機構を有していた。

https://www.w3.org/People/Bos/stylesheets.html

この「Stream-based Style sheet Proposal」中でのスタイルの記述例が以下である。

! Style sheet for HTML documents
! -----------------------------

*id: !ID
*language: !LANG
*target: !ID

! Create a default margin of 3 em
!
HTML.leftindent: 3.0
HTML.justify: full

! <H1> is bold, centered, 2 sizes larger than the surrounding text,
! with lines above and below.
!
*H1.size: 2
*H1.bold: true
*H1.justify: center
*H1.rulebefore: 1.0
*H1.ruleafter: 1.0
*H1.prebreak: 2.0
*H1.postbreak: 1.0
*H1.noindent: true

むむ、かなりCSSに近づいてきた感じがする。

Bert BosさんとHåkonさんは協力してワーキング・グループの中で議論を勧め、そこでの成果をCSSドラフトとしてまとめ、Argoで実際にテスト実装することを繰り返し、規格を固めていったようである。

その履歴はW3Cのメーリングリストhttps://lists.w3.org/Archives/Public/www-style/にある。

ほぼ現在の記法になったのは1995年11月くらいのようだが、メーリングリストに記載されているドラフト版「https://www.w3.org/Style/CSS/draft.html」にはアクセスすることができなかった。

で、ググると下記サイトにドラフト版へのリンクが記載され、読むことができた。

Suika wiki CSS Level 1

ほぼ現在の表記スタイルになったのは「fifth draft specification」のバージョンからのようである。

(続く)