NOTE-stts2
This document is a NOTE made available by the W3 Consortium for discussion only. This indicates no endorsement of its content, nor that the Consortium has, is, or will be allocating any resources to the issues addressed by the NOTE.
This document is a submission to W3C from Electricité de France. Please see Acknowledged Submissions to W3C regarding its disposition. This document is a proprietary specification developed by ELECTRICITE DE FRANCE partly based on the Cascading Style Sheets specification. This document has been writen using a HTML 3.2 editor and then transformed by CSSize to take advantage of CSS.
The release of the Cascading Style Sheets in the World Wide Web universe the 17 december 1996 is a major evolution of Web publishing. For the first time in very common software tools, it is possible to separate content and presentation in data. This old dream of SGML gurus, fighting against the rest of the world to make them realize this is important, is now a reality. Each HTML element can carry presentation styles.
The main effect of this evolution is the deprecation of several HTML elements and attributes. It is then necesssary to describe the set of transformations that should been applied to a HTML document containing these deprecated informations in order to make it conformant to HTML Clean and take advantage of CSS.
The current specification does not want to re-invent the wheel and it should not be extended to a very large set of operations. DSSSL is recommended for large applications. The goal of the current specification is only providing a very simple, easy, quickly implementable of a transformation algorithm of HTML documents that a HTTP server could handle on the fly for instance.
A set of STTS transformations is made of rules . Each rule is itself made of two parts : selectors and declarations .
Whenever a set of STTS rules is contained in a file and the operating system ruling this file allows it, the common extension associated to this file should be *.tts
A selector is a condition attached to a HTML structure. If this condition is true, the declarative part of the corresponding rule will be applied to the deepest selected element in the document's structure.
A declaration is made of tho parts : a property and the value of this property. This property rules the transformation applied to the element making the selector condition true.
The definition of each STTS property in this document contains a summary table like the following one :
| Value | possible values or possible set of values |
| Applies to | elements this property applies to |
A selector is conditional link between the structure of a HTML document and a set of STTS declarations.
It is possible to group selectors having the same declarative section separating them with commas.
The following example
H1 { add-class : "centered" }
H2 { add-class : "centered" }
H3 { add-class : "centered" }
is then strictly equivalent to
H1, H2, H3 { add-class : "centered" }
Two selectors separated by a space specify a condition on a HTML subtree (a hierarchical selector). For instance
DIV TT
specifies that the corresponding declarations are to be applied to all TT elements contained in a DIV element or in its descendance. Hierarchical selectors are compatible with groups of selectors
P TT I, P TT EM
A sequence of selectors surrounded by slashes / indicates a sequence of conditions on a corresponding sequence of HTML elements. For instance
DIV /IMG UL/ { ... }
is to be applied to UL lists following an image IMG and having the same parent, both of them contained in a DIV or in its descendance.
A double starting (respectively ending) slash indicates that the following (resp. preceeding) selector holds an additionnal condition : the corresponding selected element has to be the first (resp. last) child of its parent. For instance :
DL ~ //DT/ { ... }
is to be applied to DT elements being the first child of a DL definition list..
A unique hierarchical selector is a special case of a sequential selector.
UL ~ //LI// { ... }
is to be applied to LI list items being the unique child of a UL unordered list..
Two selectors separated by a tilda specify a direct relationship. For instance
DIV ~ TT { ... }
is to be applied to all TT elements directly contained in a DIV element. Without the tilda, declarations are to be applied to all TT contained in a DIV or any element of its descendance.
/EM ~ TT/ { ... }
is to be applied to all TT directly following a EM (they have the same parent). Without the tilda, declarations are to be applied to all TT in the chain of elements following a EM (they have the same parent).
An attribute addressing selector is a condition on the existence or on the value of an attribute carried by a HTML element. This condition is described between square brackets. For instance
P[ALIGN=CENTER] { ... }
is to be applied to P elements carrying the ALIGN attribute having CENTER for value.
TABLE[BORDER] { ... }
is to be applied to TABLES elements carrying the BORDER attribute regardless to its value.
SPAN[CLASS=="abstract"] { ... }
Important : please note the double equal sign.
This
rule is to be applied to
SPAN elements carrying the
CLASS attribute,
this attribute being defined as
cdata-list
, one of its values being
abstract .
STTS rules using an attribute adressing selector can use the selected values of these attributes (or the values of these attributes if no value selection is specified) in the declarative section of the rule. These values are available as environment variables $$1$ $$2$ ... . Two other variables are available : $$N$ which contains the name of the element the rule is applied to and $$P$ which contains the name of its parent element, if any.
For instance :
BODY[BGCOLOR][TEXT] {
add-style : "background-color : $$1$";
add-style : "color : $$2$";
}
[align=CENTER] { add-class : "centered" }
Warning : groups of selectors can use different attribute addressing selectors. Using these variables may then be incompatible with groups of selectors.
There are two kinds of explosive selectors, both specified by the circumflex accent ^ :
Explosive selectors are only meaningful on the deepest selector.
An explosive element selector indicates that the content of the element must replace the element itself and that the declarative part of the rule is to be applied to the parent element. For instance :
P ~ //^CENTER// { add-class : centered }
applied to
<P><CENTER>coucou</CENTER></P>
will result in
<P CLASS=centered>coucou</P>
while
P ~ //CENTER// { add-class : centered }
(without ^ ) will result in
<P><CENTER CLASS=centered>coucou</CENTER></P>
An explosive attribute addressing selector is an attribute addressing selector indicating that this existing attribute has to be removed from the HTML structure after storing internally its value and before applying the declarative part of the rule.
P[^ALIGN] { add-style : "text-align : $$1$ }" }
A class addressing selector is a condition on one of the values of the CLASS attribute carried by a HTML element. This condition follows a dot . . Only one class addressing selector is allowed per element. For instance
DIV ~ //P.abstract// { ... }
is to be applied to P elements carrying the abstract class and being the unique content of a DIV element.
An ID addressing selector is a condition on the existence on the value of the ID attribute carried by a HTML element. This condition follows a pound # . Only one ID addressing selector is allowed per element, of course. For instance
TD#a12 { ... }
is to be applied to TD table cells having ID a12 .
The declarative part of a STTS rule follows the selectors and is described between round brackets
{ ... }
If this section contains more than one declaration, a semi-column ; separator is used between declarations.
Important : order of declarations does not matter.
| Value | name of a HTML element, between quoted or not. |
| Applies to | all HTML elements |
This property changes the name of the element the current rule is applied to.
For instance, the rule
P#a12 { transform-element : DIV }
applied to
<P ID=a12>bonjour à tous </P>
will result in
<DIV ID=a12>bonjour à tous </DIV>
Warning : this transformation is performed regardless to the HTML DTD.
| Value | a set of CSS declarations between quotes |
| Applicable à | all HTML elements |
This property adds the STYLE attribute to the current element if necessary. It adds the contents of the declared value to the contents of this attribute.
For instance, the rule
H1[^ALIGN] { add-style : "text-align : $$1$"
}
applied to
<H1 ALIGN=CENTER>Chapitre 1</H1>
will result in
<H1 STYLE="text-align : CENTER">Chapitre 1</H1>
| Value | name of a class, or a string containing a list of classes |
| Applies to | all HTML elements |
This property changes the current element adding the declared class(es) to its CLASS attribute, which is created if necessary.
For instance, the rule
H1[^ALIGN] { add-class : "$$1$justif"
}
applied to
<H1 ALIGN=CENTER>Chapitre 1</H1>
will result in
<H1 CLASS=CENTERjustif>Chapitre 1</H1>
| Value | value is made of two data :
|
| Applies to | HEAD only |
This property adds to HEAD a LINK to a CSS style sheet or a new STYLE containing the contents of the style sheet.
For instance, the rule
HEAD { add-css : link "http://www.edf.fr/styles/default.css" }
applied to
... <HEAD> <TITLE>title of this document</TITLE></HEAD> ...
will result in
...
<HEAD>
<TITLE>title of this document</TITLE>
<LINK REL=stylesheet TYPE="text/css"
HREF="http://www.edf.fr/styles/default.css">
</HEAD>
...
| Value | the definition of a CSS rule |
| Applies to | all HTML elements |
This property adds to the current document, in an existing or created STYLE element in HEAD document's header, the specified CSS rule. If its definition contains double-quotes " , these quotes have to be preceeded by a backslash \ .
For instance :
BODY[^LINK] {
add-rule : "A:LINK { color : $$1$ } "
}
Important warning : this rule will be added each time selectors are matching the internal HTML structure. Replace add-rule by add-unique-rule if you want this declaration to be applied only once over the whole document. For instance, if you want to define a CSS rule only if a certain CLASS exists in the document :
.thisClass {
add-unique-rule : ".otherClass { color : red }"
}
Note : factorization of CSS rules if they have the same selector, and factorization of CSS rules having the same declarative part but different selectors is a more complex job, but is implementable. The way add-rule and add-unique-rule add CSS rules to the document depends only on the implementation of the User Agent.
| Value | definition of a HTML attribute |
| Applies to | all HTML elements |
This property adds to the selected element the attribute defined in property's value. If this value has to contain quotes ", they should be preceeded by a backslash \. For instance : dynamic association of a CLASS to a language
.french { add-attribute : "LANG=fr" }
applied to
<H1 CLASS=french>Titre de la section</H1>
will result in
<H1 LANG=fr CLASS=french>Titre de la section</H1>
Warning : this transformation is performed regardless to the HTML DTD.
STTS 2 are implemented in CSSize, proof of concept. CSSize is a new software developed by the author of the current document at the Research and Development Division of ELECTRICITE DE FRANCE, which is a W3C member.
For more information about CSSize, please contact
< cssize-t@cli51ak.der.edf.fr >
or consult the on-line data
<URL:http://lara0.exp.edf.fr/glazman/cssize.en.htm >
(after 1st November 1997).
A version of CSSize based on CSS 1 selectors (STTS 1) is already available.
Here is an example of a set of STTS rules one can apply to a HTML 3.2 document in order to replace some deprecated or old attributes and elements by CSS rules. Warning : this set is provided as is without any garanty of any kind !.
XMP, PLAINTEXT, LISTING { transform-element : PRE }
APPLET { transform-element : OBJECT }
CENTER { transform-element : DIV ;
add-class : centered
}
TT { transform-element : SPAN ;
add-class : monospace
}
I { transform-element : SPAN ;
add-class : italicized
}
DIR, MENU { transform-element : UL }
HEAD { add-css : style "standard.css" }
BODY[^BGCOLOR][^TEXT][^LINK][^ALINK][^VLINK] {
add-style : "background-color : $$1$" ;
add-style : "color : $$2$" ;
add-unique-rule : "A:link { color : $$3$ }" ;
add-unique-rule : "A:actived { color : $$4$ }" ;
add-unique-rule : "A:visited { color : $$5$ }"
}
the standard.css file contains the following CSS rules :
.centered { text-align : center }
.monospace { font-family : monospace }
.italicized { font-style : italic }
Special thanks to
Chris Lilley, W3C
CSS 1 and 2 authors
I also wish to thank the HTML Working Group and CSS+FP Working Group chairmen and members who welcomed me in their Ali-Baba magic cave on behalf of Electricité de France. The permanent brainstorming and discussions happening there are the best seeds for imagination and creativity.