NOTE-stts2
Ce document est une NOTE publiée par leConsortium W3 à seule fin de discussion. Ceci ne signifie enrien que le Consortium s'engage sur son contenu, ou qu'il aalloué, alloue ou allouera des ressources sur les sujetsmentionnés dans cette NOTE.
Ce document est une soumission au W3C parElectricité de France. Prière de se réfererauxsoumissionsofficielles au W3C pour les conditions d'usage. Ce document estune spécification propriétaire développéepar ELECTRICITE DE FRANCE partiellement sur la base desspécifications desCascading StyleSheets (feuilles de style). Ce document a étérédigé en HTML 3.2 standard avec un éditeur HTMLdu commerce puis transformé par le logicielCSSize pour tirer parti des feuilles de stylesCSS.
L'introduction des Feuilles de Styles CSS dans l'univers du World Wide Webdepuis le 17 décembre 1996 constitue une évolution majeure de ladistribution documentaire sur le Web. En effet, pour la première foisdans les logiciels de navigation les plus communs du marché, il estpossible de différencier le contenu d'un document de sa présentation.A tout élément HTML peut être appliqué des styles régissantcette présentation.
Cette évolution a pour principal effet la dépréciationde certains éléments et attributs HTML. Il est donc nécessairede pouvoir décrire les transformations que devrait subir un document HTMLcontenant ces éléments et attributs dépréciéspour pouvoir être conforme àHTML Clean et tirer parti des CSS.
Le but de cette spécification n'est aucunement de réinventerla 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'undocument HTML, éventuellement à la volée par un serveurHTTP.
Un ensemble de transformation STTS est composée derègles . Chaque règle est elle-mêmecomposée de deux parties : lessélecteurs et lesdéclarations .
Lorsqu'un ensemble de règles est contenu dansun fichier et que le système d'exploitation régissant ce fichierle permet, l'extension communément associée à un telfichier est*.tts
Un sélecteur est une condition sur la structure du document HTML surlequel on applique la règle STTS. Si la condition est vraie, les déclarationsattachées seront alors appliquées à l'élémentsélectionné le plus profond dans la structure du document.
Une déclaration est composée de deux données : lapropriété et lavaleur de la propriété. C'est lapropriété qui définit la transformation que va subir l'élémentsur lequel s'applique la déclaration.
Toute propriété STTS est définie dans le présentdocument 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éfiniesdans la règle STTS qui le contient et l'arbre de structure représentantle document HTML sur lequel on applique la règle en question.
Il est possible de regrouper plusieurs sélecteurs ouvrant sur le mêmeensemble 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 unestructure HTML. Par exemple :
DIV TT
indique que les déclarations correspondantes seront appliquéesà tout élémentTT contenu dans un élémentDIV ou dans un élément de sadescendance.
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 surune structure correspondante. Par exemple
DIV /IMG UL/ { ... }s'appliquera aux listesUL suivant une imageIMG et ayant le même parent qu'elle, lesdeux étant contenus dans unDIV ou un élément de sadescendance.
Un double slash initial (respectivement final) indique que le sélecteursuivant (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émentsDT premier fils d'une liste de définitionDL.
Un sélecteur hiérarchique d'unicite est un cas spéciald'un sélecteur filial, la séquence se terminant et se finissantpar un double slash et ne contenant qu'un seul sélecteur.
UL ~ //LI// { ... }s'appliquera auxLI fils unique d'une liste sans ordreUL.
Deux sélecteurs séparés par un tilda indiquent unerelation directe père-fils ou précédent-suivant. Parexemple :
DIV ~ TT { ... }s'appliquera aux élémentsTT directement contenus dans un élémentDIV. Sans le tilda, les déclarationsseraient appliquées aux élémentsTT contenus dans unDIV ou tout élément de sadescendance.
/EM ~ TT/ { ... }s'appliquera aux élémentsTT suivant immédiatement un élémentEM (ils ont le même élémentpère). Sans le tilda, les déclarations seront appliquéesaux élémentsTT appartenant à la chaîne des élémentssuivant un élémentEM (ils ont le même élémentpère)
Un sélecteur contextuel d'attribut est une condition sur l'existenceou 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 paragraphesP portant l'attributALIGN de valeurCENTER .
TABLE[BORDER] { ... }La règle sera appliquée aux tablesTABLES portant l'attributBORDER 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émentsSPAN portant l'attribut ,cet attribut devant nécessairement être unecdata-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éesdes attributs (ou aux valeurs des attributs sélectionnés si aucunesélection de valeur n'est effectuée). Ces valeurs sont disponiblessous forme de variables d'environnement$$1$ $$2$ ... . Deux autres valeurs sontaccessibles :$$N$ contient le nom de l'élémentsur lequel est appliquée la règle et$$P$ contient le nom de son élémentparent, s'il en a un.
Par exemple :
BODY[^BGCOLOR][^TEXT] { add-style : "background-color : $$1$"; add-style : "color : $$2$"; }Attention : des groupes de sélecteurspeuvent utiliser des sélecteurs d'attributs différents et peuventdonc être incompatibles avec cet usage des valeurs d'attributs.
Il existe deux types de sélecteurs explosifs, tous deux notéspar un accent circonflexe^ :
Un sélecteur explosif d'élément indique que le contenude l'élément sur lequel s'applique la règle remplace l'élémentlui-même, et que les déclarations de la règle doivent êtreappliquées à l'élément parent de l'élémentinitial, 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'attributindiquant que l'attribut en question doit être retiré de l'élémentsur lequel s'applique la règle. Avant cette opération, la valeurde l'attribut doit être sauvegardée pour la partie déclarativede la règle.
Par exemple :
P[^ALIGN] { add-style : "text-align : $$1$ }" }Un sélecteur contextuel de classe est une condition sur l'attributCLASS porté par l'élémentsélectionné. Le nom de la classe sélectionnée suittoujours un point. .Un seul sélecteur contextuel de classe est autorisépar élément. Par exemple :
DIV ~ //P.abstract// { ... }s'appliquera aux élémentsP portant la classeabstract et étant l'unique contenu d'un élémentDIV .
Un sélecteur contextuel d'identificateur est une condition surl'attributID 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'IDest autorisé par élément, bien sûr. Par exemple :
TD#a12 { ... }s'appliquera aux cellules de tableTD ayant pourIDa12 .
L'ensemble des déclarations d'une règle suivent les sélecteurset 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 estsans importance.
| Valeur | un nom d'élément HTML. Encadré par des guillemets ounon. |
| Applicable à | tout élément HTML |
Cette propriété change le nom de l'élément surlequel 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éesans 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 attributSTYLE à l'élément courants'il n'existe pas déjà. Elle ajoute également le contenu dela valeur de la propriété aux styles déjà définisdans 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 uneliste de classes CSS |
| Applicable à | tout élément HTML |
Cette propriété transforme l'élément courant enajoutant à son attributCLASS 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 deHEAD soit un élémentLINK pointant vers la feuille de styles désignéesoit un élémentSTYLE contenant le contenu textuel de lafeuille 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 decaractères |
| Applicable à | tout élément HTML |
Cette propriété ajoute au document courant, dans un élémentSTYLE déja existant ou crééà cette occasion dans l'en-têteHEAD du document, la règle CSS fournieen valeur. Si cette définition doit contenir des guillemets" , ceux-ci seront précédésd'un backslash\ .
Par exemple :
BODY[^LINK] { add-rule : "A:LINK { color : $$1$ } " }Attention : cette propriété génèrel'ajout d'une règle pour chaque élément rendant vraie lacondition exprimée par les sélecteurs. Pour ne générerla règle qu'une seule fois pour tout le document, utiliser la propriétéadd-unique-rule au lieu deadd-rule. Par exemple, pour créer une règleCSS correspondant à une classe seulement si cette certaine classe estutilisé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 sontidentiques, soit par ajout de déclarations si les sélecteurs sontidentiques, peut être difficile à implémenter mais n'estaucunement insurmontable. La manière dont doivent être implémentéesles propriétésadd-rule etadd-unique-rule est laissée libre auxlogiciels.
| Valeur | la définition d'un attribut HTML |
| Applicable à | tout élément HTML |
Cette propriété ajoute la définition d'attribut passéeen valeur à l'élément sélectionné.Si cette définitiondoit contenir des guillemets" , ceux-ci seront précédésd'un backslash\. Par exemple : association dynamique d'uneclasse à 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éesans vérification de conformité à la DTD HTML.
Les STTS sont implémentées dans le logiciel CSSize, preuve deconcept. CSSize est un nouveau logiciel développé par l'auteur du présent document à la Direction desEtudes 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 estconforme 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/attributset tirer parti des feuilles de styles CSS.Attention : cet ensemble est incomplet et aucunegarantie d'aucune sorte n'est attachée à sa présence dansce 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 fichierstandard.css contient les règles CSSsuivantes :
.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 accueillidans leur antre, tous les membres du HTML Working Group et du CSS+FP WorkingGroup du Consortium W3C. Le foisonnement d'idées et de discussion qui y règneest le meilleur ferment d'imagination et de créativité qui soit.