Google Blogoscoped

Wednesday, September 16, 2009

Syntax Samples of "Cascading HTML Style Sheets" (CHSS), a 1994 Work in Progress Predating Today’s CSS

The following are excerpts from Håkon W. Lie’s Cascading HTML style sheets – a proposal from October 1994 (also see some historical background; note today, Håkon works for Opera Software):


h1.font.size = 24pt 100%

Explanation: “A one-statement style sheet that sets the font size of the h1 element ... The percentage at the end of the line indicates what degree of influence that is requested (here 100%). If this is the initial style sheet (i.e. the one under user control), this request can be fulfilled, i.e. all headline elements will be rendered using helvetica. If the statement comes in a later style sheet, any unclaimed influence is granted.”


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

Explanation: “In this example, parameters from the user’s environment is taken into account when determining the style sheet values. The C-style syntax of the first statement reads: If the document is older than three days, the background color should be pale yellow, else the backgound color should be white.”


RELEVANCE > 80 ? h1.font.size *= 1.5

Explanation: “In newspapers, the size of the headlines tell us how important the editor believes the article is. As digital agents and personalized information filters become available, the typography of HTML documents should also be influenced by the relevance of each document for each individual user. Given a relevance factor, the above statement multiplies the font size of h1 by 1.5.”


speech.*.weight = 35db
speech.em.weight = 40db

Explanation: “Current browsers consider the computer screen to be the primary presentation target, but HTML – different from the page description languages – has the potential of supporting many output media, e.g. paper, speech and braille ... The example above sets values for the speech medium.”


font.size *= 2 100%

Explanation: “This single statement style sheet will, if given the influence, double the font size of all paragraphs. A style sheet like this could conveniently be merged in when the user selects ’double font size’ from a pulldown menu.”


space.left = 0pt
space.right = 0pt
space.above = 4pt
space.below = 4pt

Explanation: “[S]et the white space surrounding paragraphs”


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

No specific explanation was given for this bit, but the window foreground may be the text color. = left = center = right

Explanation: “[T]he first statement establishes a default left alignment for all elements in all media. The second statement changes the setting for headline elements (h1 .. h6) in all media. The last statement is more specific; it requests headlines to be right-aligned when printed. print is itself a group consisting of e.g. print_color and print_mono.”


Blog  |  Forum     more >> Archive | Feed | Google's blogs | About


This site unofficially covers Google™ and more with some rights reserved. Join our forum!