NOTE-stts2
Ce document est une NOTE publiée par le Consortium W3 à seule fin de discussion. Ceci ne signifie en rien que le Consortium s'engage sur son contenu, ou qu'il a alloué, alloue ou allouera des ressources sur les sujets mentionnés dans cette NOTE.
Ce document est une soumission au W3C par Electricité de France. Prière de se réferer aux soumissions officielles au W3C pour les conditions d'usage. Ce document est une spécification propriétaire développée par ELECTRICITE DE FRANCE partiellement sur la base des spécifications des Cascading Style Sheets (feuilles de style). Ce document a été rédigé en HTML 3.2 standard avec un éditeur HTML du commerce puis transformé par le logiciel CSSize pour tirer parti des feuilles de styles CSS.
L'introduction des Feuilles de Styles CSS dans l'univers du World Wide Web depuis le 17 décembre 1996 constitue une évolution majeure de la distribution documentaire sur le Web. En effet, pour la première fois dans les logiciels de navigation les plus communs du marché, il est possible de différencier le contenu d'un document de sa présentation. A tout élément HTML peut être appliqué des styles régissant cette présentation.
Cette évolution a pour principal effet la dépréciation de certains éléments et attributs HTML. Il est donc nécessaire de pouvoir décrire les transformations que devrait subir un document HTML contenant ces éléments et attributs dépréciés pour pouvoir être conforme à HTML Clean et tirer parti des CSS.
Le but de cette spécification n'est aucunement de réinventer la roue et implémenter/réaliser ce que DSSSL fait déjà parfaitement. Il s'agit seulement de fournir un moyen extrêmement simple, intégrable rapidement, de transformation légère d'un document HTML, éventuellement à la volée par un serveur HTTP.
Un ensemble de transformation STTS est composée de règles . Chaque règle est elle-même composée de deux parties : les sélecteurs et les déclarations .
Lorsqu'un ensemble de règles est contenu dans un fichier et que le système d'exploitation régissant ce fichier le permet, l'extension communément associée à un tel fichier est *.tts
Un sélecteur est une condition sur la structure du document HTML sur lequel on applique la règle STTS. Si la condition est vraie, les déclarations attachées seront alors appliquées à l'élément sélectionné le plus profond dans la structure du document.
Une déclaration est composée de deux données : la propriété et la valeur de la propriété. C'est la propriété qui définit la transformation que va subir l'élément sur lequel s'applique la déclaration.
Toute propriété STTS est définie dans le présent
document au moins par un résumé du type :
| Valeur | valeurs possibles ou types de valeurs possibles |
| Applicable à | éléments sur lesquels peut s'appliquer la propriété |
Un sélecteur est un lien conditionnel entre les déclarations définies
dans la règle STTS qui le contient et l'arbre de structure représentant
le document HTML sur lequel on applique la règle en question.
Il est possible de regrouper plusieurs sélecteurs ouvrant sur le même ensemble de déclarations en les séparant par des virgules.
Ainsi
H1 { add-class : "centered" }
H2 { add-class : "centered" }
H3 { add-class : "centered" }
a pour équivalent strict
H1, H2, H3 { add-class : "centered" }
Deux sélecteurs séparés par un espace indiquent une structure HTML. Par exemple :
DIV TT
indique que les déclarations correspondantes seront appliquées à tout élément TT contenu dans un élément DIV ou dans un élément de sa descendance.
Ces séparateurs contextuels sont compatibles avec les groupes de sélecteurs :
P TT I, P TT EM
Une séquence de sélecteurs encadrée par des slash / indique une séquence de conditions sur une structure correspondante. Par exemple
DIV /IMG UL/ { ... }
s'appliquera aux listes UL suivant une image IMG et ayant le même parent qu'elle, les deux étant contenus dans un DIV ou un élément de sa descendance.
Un double slash initial (respectivement final) indique que le sélecteur suivant (resp. précédent) porte une condition supplémentaire : l'élément sélectionné doit être le premier (resp. le dernier) fils de son élément-parent. Par exemple :
DL ~ //DT/ { ... }
s'appliquera aux éléments DT premier fils d'une liste de définition DL.
Un sélecteur hiérarchique d'unicite est un cas spécial d'un sélecteur filial, la séquence se terminant et se finissant par un double slash et ne contenant qu'un seul sélecteur.
UL ~ //LI// { ... }
s'appliquera aux LI fils unique d'une liste sans ordre UL.
Deux sélecteurs séparés par un tilda indiquent une relation directe père-fils ou précédent-suivant. Par exemple :
DIV ~ TT { ... }
s'appliquera aux éléments TT directement contenus dans un élément DIV. Sans le tilda, les déclarations seraient appliquées aux éléments TT contenus dans un DIV ou tout élément de sa descendance.
/EM ~ TT/ { ... }
s'appliquera aux éléments TT suivant immédiatement un élément EM (ils ont le même élément père). Sans le tilda, les déclarations seront appliquées aux éléments TT appartenant à la chaîne des éléments suivant un élément EM (ils ont le même élément père)
Un sélecteur contextuel d'attribut est une condition sur l'existence ou sur la valeur d'un attribut porté par un élément HTML. Cette condition est décrite entre crochets [ ... ] . Par exemple :
P[ALIGN=CENTER] { ... }
La règle sera appliquée aux paragraphes P portant l'attribut ALIGN de valeur CENTER .
TABLE[BORDER] { ... }
La règle sera appliquée aux tables TABLES portant l'attribut BORDER quelle que soit sa valeur.
SPAN[CLASS=="abstract"] { ... }
Attention : noter le double signe égal. Cette notation signifie que la règle sera appliquée aux éléments SPAN portant l'attribut , cet attribut devant nécessairement être une cdata-list , dont une des valeurs est égale à CLASS .
Les règles STTS utilisant de tels sélecteurs peuvent accèder, dans la partie déclarative d'une règle, aux valeurs sélectionnées des attributs (ou aux valeurs des attributs sélectionnés si aucune sélection de valeur n'est effectuée). Ces valeurs sont disponibles sous forme de variables d'environnement $$1$ $$2$ ... . Deux autres valeurs sont accessibles : $$N$ contient le nom de l'élément sur lequel est appliquée la règle et $$P$ contient le nom de son élément parent, s'il en a un.
Par exemple :
BODY[^BGCOLOR][^TEXT] {
add-style : "background-color : $$1$";
add-style : "color : $$2$";
}
Attention : des groupes de sélecteurs peuvent utiliser des sélecteurs d'attributs différents et peuvent donc être incompatibles avec cet usage des valeurs d'attributs.
Il existe deux types de sélecteurs explosifs, tous deux notés par un accent circonflexe ^ :
Un sélecteur explosif d'élément indique que le contenu de l'élément sur lequel s'applique la règle remplace l'élément lui-même, et que les déclarations de la règle doivent être appliquées à l'élément parent de l'élément initial, s'il existe. Par exemple
P ~ //^CENTER// { add-class : centered }
appliqué à
<P><CENTER>coucou</CENTER></P>
génèrera
<P CLASS=centered>coucou</P>
alors que
P ~ //CENTER// { add-class : centered }
(sans ^ ) génèrera
<P><CENTER CLASS=centered>coucou</CENTER></P>
Un sélecteur explosif d'attribut est un sélecteur d'attribut indiquant que l'attribut en question doit être retiré de l'élément sur lequel s'applique la règle. Avant cette opération, la valeur de l'attribut doit être sauvegardée pour la partie déclarative de la règle.
Par exemple :
P[^ALIGN] { add-style : "text-align : $$1$ }" }
Un sélecteur contextuel de classe est une condition sur l'attribut CLASS porté par l'élément sélectionné. Le nom de la classe sélectionnée suit toujours un point . . Un seul sélecteur contextuel de classe est autorisé par élément. Par exemple :
DIV ~ //P.abstract// { ... }
s'appliquera aux éléments P portant la classe abstract et étant l'unique contenu d'un élément DIV .
Un sélecteur contextuel d'identificateur est une condition sur l'attribut ID porté par l'élément sélectionné. Le nom de l'ID sélectionné suit toujours un dièse # . Un seul sélecteur contextuel d'ID est autorisé par élément, bien sûr. Par exemple :
TD#a12 { ... }
s'appliquera aux cellules de table TD ayant pour ID a12 .
L'ensemble des déclarations d'une règle suivent les sélecteurs et sont encadrés par des accolades
{ ... }
Si l'ensemble des déclarations contient plusieurs déclarations, elles sont séparées par un point-virgule ; .
Important : l'ordre des déclarations est sans importance.
| Valeur | un nom d'élément HTML. Encadré par des guillemets ou non. |
| Applicable à | tout élément HTML |
Cette propriété change le nom de l'élément sur lequel s'applique la règle.
Par exemple, la règle :
P#a12 { transform-element : DIV }
appliquée à
<P ID=a12>bonjour à tous </P>
génèrera
<DIV ID=a12>bonjour à tous </DIV>
Attention : cette transformation est effectuée sans vérification de conformité à la DTD HTML.
| Valeur | un ensemble de déclarations CSS, dans une chaîne de caractères |
| Applicable à | tout élément HTML |
Cette propriété ajoute un attribut STYLE à l'élément courant s'il n'existe pas déjà. Elle ajoute également le contenu de la valeur de la propriété aux styles déjà définis dans cet attribut.
Par exemple, la règle :
H1[^ALIGN] { add-style : "text-align : $$1$"
}
appliquée à
<H1 ALIGN=CENTER>Chapitre 1</H1>
génèrera
<H1 STYLE="text-align : CENTER">Chapitre 1</H1>
| Valeur | un nom de classe ou une chaîne de caractères contenant une liste de classes CSS |
| Applicable à | tout élément HTML |
Cette propriété transforme l'élément courant en ajoutant à son attribut CLASS la ou les classes fournies en argument. Cet attribut est créé si nécessaire.
Par exemple, la règle :
H1[^ALIGN] { add-class : "$$1$justif"
}
appliquée à
<H1 ALIGN=CENTER>Chapitre 1</H1>
génèrera
<H1 CLASS=CENTERjustif>Chapitre 1</H1>
| Valeur | la valeur est composée de deux parties :
|
| Applicable à | HEAD seulement |
Cette propriété ajoute au contenu de HEAD soit un élément LINK pointant vers la feuille de styles désignée soit un élément STYLE contenant le contenu textuel de la feuille de styles en question.
Par exemple, la règle :
HEAD { add-css : link "http://www.edf.fr/styles/default.css" }
appliquée à
... <HEAD> <TITLE>titre de ce document</TITLE></HEAD> ...
génèrera
...
<HEAD>
<TITLE>titre de ce document</TITLE>
<LINK REL=stylesheet TYPE="text/css"
HREF="http://www.edf.fr/styles/default.css">
</HEAD>
...
| Valeur | la définition d'une règle CSS, dans une chaîne de caractères |
| Applicable à | tout élément HTML |
Cette propriété ajoute au document courant, dans un élément STYLE déja existant ou créé à cette occasion dans l'en-tête HEAD du document, la règle CSS fournie en valeur. Si cette définition doit contenir des guillemets " , ceux-ci seront précédés d'un backslash \ .
Par exemple :
BODY[^LINK] {
add-rule : "A:LINK { color : $$1$ } "
}
Attention : cette propriété génère l'ajout d'une règle pour chaque élément rendant vraie la condition exprimée par les sélecteurs. Pour ne générer la règle qu'une seule fois pour tout le document, utiliser la propriété add-unique-rule au lieu de add-rule. Par exemple, pour créer une règle CSS correspondant à une classe seulement si cette certaine classe est utilisée :
.cetteClasse {
add-unique-rule : ".autreClasse { color : red }"
}
Nota Bene : la factorisation de règles CSS, soit par groupement de sélecteurs si les déclarations sont identiques, soit par ajout de déclarations si les sélecteurs sont identiques, peut être difficile à implémenter mais n'est aucunement insurmontable. La manière dont doivent être implémentées les propriétés add-rule et add-unique-rule est laissée libre aux logiciels.
| Valeur | la définition d'un attribut HTML |
| Applicable à | tout élément HTML |
Cette propriété ajoute la définition d'attribut passée en valeur à l'élément sélectionné.Si cette définition doit contenir des guillemets " , ceux-ci seront précédés d'un backslash \. Par exemple : association dynamique d'une classe à un langage
[LANG] { add-attribute : "CLASS=$$1$Output" }
appliquée à
<H1 LANG=fr>Titre de la section</H1>
génèrera
<H1 LANG=fr CLASS=frOutput>Titre de la section</H1>
Attention : cette transformation est effectuée sans vérification de conformité à la DTD HTML.
Les STTS sont implémentées dans le logiciel CSSize, preuve de concept. CSSize est un nouveau logiciel développé par l'auteur du présent document à la Direction des Etudes et Recherches d'ELECTRICITE DE FRANCE, membre du Consortium W3C.
Pour plus d'information sur CSSize, contacter
< cssize-t@cli51ak.der.edf.fr >
ou consulter les données en ligne disponibles en
<URL:http://lara0.exp.edf.fr/glazman/cssize.fr.htm >
(à partir du 1er Novembre 1997).
La version actuellement disponible sur ce serveur est conforme aux STTS 1.
Vous trouverez ici un exemple d'ensemble de règles STTS applicables à un document HTML 3.2 pour déprécier certains éléments/attributs et tirer parti des feuilles de styles CSS. Attention : cet ensemble est incomplet et aucune garantie d'aucune sorte n'est attachée à sa présence dans ce document.
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$ }"
}
le fichier standard.css contient les règles CSS suivantes :
.centered { text-transform : center }
.monospace { font-family : monospace }
.italicized { font-style : italic }
Je remercie
Chris Lilley, W3C
les auteurs des CSS 1 et 2
Je remercie également, pour m'avoir au nom de mon employeur accueilli dans leur antre, tous les membres du HTML Working Group et du CSS+FP Working Group du Consortium W3C. Le foisonnement d'idées et de discussion qui y règne est le meilleur ferment d'imagination et de créativité qui soit.