NOTE-stts2
This document is a NOTE made available by the W3Consortium for discussion only. This indicates no endorsement of itscontent, nor that the Consortium has, is, or will be allocating anyresources to the issues addressed by the NOTE.
This document is a submission to W3C fromElectricité de France. Please seeAcknowledged Submissions toW3C regarding its disposition. This document is a proprietaryspecification developed by ELECTRICITE DE FRANCE partly based on theCascading Style Sheetsspecification. This document has been writen using a HTML 3.2 editorand then transformed byCSSize to take advantageof CSS.
The release of the Cascading Style Sheets in the World Wide Web universe the17 december 1996 is a major evolution of Web publishing. For the first time invery common software tools, it is possible to separate content and presentationin data. This old dream of SGML gurus, fighting against the rest of the world tomake them realize this is important, is now a reality. Each HTML element cancarry presentation styles.
The main effect of this evolution is the deprecation of several HTMLelements and attributes. It is then necesssary to describe the set oftransformations that should been applied to a HTML document containing thesedeprecated informations in order to make it conformant toHTML Clean and take advantage of CSS.
The current specification does not want to re-invent the wheel and it shouldnot be extended to a very large set of operations. DSSSL is recommended forlarge applications. The goal of the current specification is only providing avery simple, easy, quickly implementable of a transformation algorithm of HTMLdocuments that a HTTP server could handle on the fly for instance.
A set of STTS transformations is made ofrules . Each rule is itself made of two parts :selectors anddeclarations .
Whenever a set of STTS rules is contained in a fileand the operating system ruling this file allows it, the common extensionassociated to this file should be*.tts
A selector is a condition attached to a HTML structure. If this condition istrue, the declarative part of the corresponding rule will be applied to thedeepest selected element in the document's structure.
A declaration is made of tho parts : aproperty and thevalue of this property. This property rules thetransformation applied to the element making the selector condition true.
The definition of each STTS property in this document contains a summarytable 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 anda set of STTS declarations.
It is possible to group selectors having the same declarative sectionseparating 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 (ahierarchical selector). For instance
DIV TT
specifies that the corresponding declarations are to be applied to allTT elements contained in aDIV element or in its descendance. Hierarchicalselectors 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 acorresponding sequence of HTML elements. For instance
DIV /IMG UL/ { ... }is to be applied toUL lists following an imageIMG and having the same parent, both of them contained in aDIV or in its descendance.
A double starting (respectively ending) slash indicates that the following(resp. preceeding) selector holds an additionnal condition : the correspondingselected element has to be the first (resp. last) child of its parent. Forinstance :
DL ~ //DT/ { ... }is to be applied toDT elements being the first child of aDL definition list..
A unique hierarchical selector is a special case of a sequential selector.
UL ~ //LI// { ... }is to be applied toLI list items being the unique child of aUL unordered list..
Two selectors separated by a tilda specify a direct relationship. Forinstance
DIV ~ TT { ... }is to be applied to allTT elements directly contained in aDIV element. Without the tilda, declarationsare to be applied to allTT contained in aDIV or any element of its descendance.
/EM ~ TT/ { ... }is to be applied to allTT directly following aEM (they have the same parent). Without thetilda, declarations are to be applied to allTT in the chain of elements following aEM (they have the same parent).
An attribute addressing selector is a condition on the existence or on thevalue of an attribute carried by a HTML element. This condition is describedbetween square brackets. For instance
P[ALIGN=CENTER] { ... }is to be applied toP elements carrying theALIGN attribute havingCENTER for value.
TABLE[BORDER] { ... }is to be applied toTABLES elements carrying theBORDER attribute regardless to its value.
SPAN[CLASS=="abstract"] { ... }Important : please note the double equal sign.
Thisrule is to be applied toSPAN elements carrying theCLASS attribute,this attribute being defined ascdata-list , one of its values beingabstract .
STTS rules using an attribute adressing selector can use the selected valuesof these attributes (or the values of these attributes if no value selection isspecified) in the declarative section of the rule. These values are available asenvironment variables$$1$ $$2$ ... . Two other variables areavailable :$$N$ which contains the name of the element therule is applied to and$$P$ which contains the name of its parentelement, 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 differentattribute addressing selectors. Using these variables may then be incompatiblewith groups of selectors.
There are two kinds of explosive selectors, both specified by the circumflexaccent^ :
Explosive selectors are only meaningful on the deepest selector.
An explosive element selector indicates that the content of the element mustreplace the element itself and that the declarative part of the rule is to beapplied 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 addressingselector indicating that this existing attribute has to be removed from the HTMLstructure after storing internally its value and before applying the declarativepart of the rule.
P[^ALIGN] { add-style : "text-align : $$1$ }" }A class addressing selector is a condition on one of the values of theCLASS attribute carried by a HTML element. Thiscondition follows a dot. .Only one class addressing selector is allowed per element.For instance
DIV ~ //P.abstract// { ... }is to be applied toP elements carrying theabstract class and being the unique content ofaDIV element.
An ID addressing selector is a condition on the existence on the value oftheID attribute carried by a HTML element. Thiscondition follows a pound# . Only one ID addressing selector is allowedper element, of course. For instance
TD#a12 { ... }is to be applied toTD table cells having IDa12 .
The declarative part of a STTS rule follows the selectors and is describedbetween round brackets
{ ... }
If this section contains more than one declaration, a semi-column; separator is used between declarations.
Important : order of declarations does notmatter.
| 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 appliedto.
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 performedregardless to the HTML DTD.
| Value | a set of CSS declarations between quotes |
| Applicable à | all HTML elements |
This property adds theSTYLE attribute to the current element ifnecessary. It adds the contents of the declared value to the contents of thisattribute.
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) toitsCLASS 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 toHEAD aLINK to a CSS style sheet or a newSTYLE containing the contents of the stylesheet.
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 createdSTYLE element inHEAD document's header, the specified CSS rule.If its definition contains double-quotes" , these quotes have to be preceeded by abackslash\ .
For instance :
BODY[^LINK] { add-rule : "A:LINK { color : $$1$ } " }Important warning : this rule will be added eachtime selectors are matching the internal HTML structure. Replaceadd-rule byadd-unique-rule if you want this declaration tobe applied only once over the whole document. For instance, if you want todefine 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 sameselector, and factorization of CSS rules having the same declarative part butdifferent selectors is a more complex job, but is implementable. The wayadd-rule andadd-unique-rule add CSS rules to the documentdepends 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 inproperty's value. If this value has to contain quotes", they should be preceeded by a backslash\. For instance : dynamic association of a CLASSto 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 performedregardless to the HTML DTD.
STTS 2 are implemented in CSSize, proof of concept. CSSize is a new softwaredeveloped by theauthor of the current document at theResearch and Development Division of ELECTRICITE DE FRANCE, which is a W3Cmember.
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.2document in order to replace some deprecated or old attributes and elements byCSS rules.Warning : this set is provided as is without anygaranty 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$ }" }thestandard.css file contains the following CSSrules :
.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 Groupchairmen and members who welcomed me in their Ali-Baba magic cave on behalf ofElectricité de France. The permanent brainstorming and discussionshappening there are the best seeds for imagination and creativity.