Ce chapitre décrit une grammaire (avec les règles d' interprétation pour la compatibilité ascendante) commune à chaque version de CSS (y compris CSS2). Les versions futures adhéreront à cette syntaxe de base, même si d'autres contraintes syntaxiques puissent s'y ajouter.
Ces descriptions sont normatives. Un complément des règles de grammaire normatives est aussi présenté dans l'appendice D.
4.1.1 L'atomisation
Tous les niveaux de CSS, que ce soient les niveaux 1, 2 et les futurs niveaux, emploient la même syntaxe de base.
Ceci permet une interprétation (mais alors incomplète) des feuilles de style produites selon des niveaux de CSS postérieurs à leur implémentation dans les agents utilisateurs. Les auteurs peuvent utiliser cette caractéristique pour créer des feuilles de style fonctionnant sur des agents utilisateurs plus anciens tout en employant les fonctionnalités apportées par les derniers niveaux de CSS.
Du point de vue lexical, les feuilles de style CSS consistent en une série de jetons. Leur liste pour CSS2 suit. Les définitions utilisent des expressions régulières à la façon de Lex. Les codes octaux se réfèrent à ISO 10646 ([ISO10646]). Tout comme pour Lex, en cas de correspondances multiples, la plus longue détermine le jeton.
Jeton Définition
IDENT {ident}
ATKEYWORD @{ident}
STRING {string}
HASH #{name}
NUMBER {num}
PERCENTAGE {num}%
DIMENSION {num}{ident}
URI url\({w}{string}{w}\)
|url\({w}([!#$%&*−~]|{nonascii}|{escape})*{w}\) UNICODE−RANGEU\+[0−9A−F?]{1,6}(−[0−9A−F]{1,6})?
CDO <!−−
CDC −−>
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM tout autre caractère ainsi que le guillemet, simple ou double, qui n'est pas retenu par les règles précédentes
Ci−dessus, les macrocommandes entre accolades ({}) sont définies ainsi :
Macrocommande Définition
ident {nmstart}{nmchar}*
name {nmchar}+
nmstart [a−zA−Z_]|{nonascii}|{escape}
nonascii [^\0−\177]
unicode \\[0−9a−f]{1,6}[ \n\r\t\f]?
escape {unicode}|\\[ −~\200−\4177777]
nmchar [a−zA−Z0−9−_]|{nonascii}|{escape}
num [0−9]+|[0−9]*\.[0−9]+
string {string1}|{string2}
string1 \"([\t !#$%&(−~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2 \'([\t !#$%&(−~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl \n|\r\n|\r|\f
w [ \t\r\n\f]*
Vient ensuite la syntaxe de base de CSS. Les paragraphes suivants indiquent la façon de les employer.
L'appendice D décrit une grammaire plus restrictive et plus proche du langage de CSS2.
feuille de style : [ CDO | CDC | S | déclaration ]*;
déclaration : jeu de règles | règle−at;
règles−at : ATKEYWORD S* tous* [ bloc | ';' S* ];
bloc : '{' S* [ tous | bloc | ATKEYWORD S* | ';' ]* '}' S*;
jeu de règles : sélecteur? '{' S* déclaration? [ ';' S* déclaration? ]* '}' S*;
sélecteur : tous+;
déclaration : propriété ':' S* valeur;
propriété : IDENT S*;
valeur : [ tous | bloc | ATKEYWORD S* ]+;
tous : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING | DELIM | URI | HASH | UNICODE−RANGE | INCLUDES
| FUNCTION tous* ')' | DASHMATCH | '(' tous* ')' | '[' tous* ']' ] S*;
Les jetons COMMENT n'apparaissent pas dans la grammaire (par souci de lisibilité), mais on peut les placer n'importe où entre les autres jetons.
Le jeton S dans la grammaire au−dessus signifie un blanc. Seuls les caractères "espace" (Code Unicode 32),
"tabulation" (9), "nouvelle ligne" (10), "retour chariot" (13) et "nouvelle page" (12) peuvent en tenir lieu. Les autres caractères d'espacement similaires, comme "l'espace em" (8195) et "l'espace idéographique" (12288), n'en font pas partie.
[Errata : Les propriétés raccourcies prennent comme valeur une liste composée des valeurs de leurs sous−propriétés ou sinon la valeur 'inherit'. On ne peut pas mélanger la valeur 'inherit' avec d'autres valeurs des sous−propriétés car il ne serait alors plus possible de déterminer laquelle de ces sous−propriétées est concernée.
Les définitions d'un certain nombre de propriétés raccourcies ne respectent pas cette règle : 'border−top', 'border−right', 'border−bottom', 'border−left', 'border', 'background', 'font', 'list−style', 'cue' et 'outline'.]
4.1.2 Les mots−clés
Les mots−clés ont des points communs avec les identifiants. On ne doit pas les mettre entre guillemets ("..." ou '...'). Ainsi :
red
est un mot−clé, mais :
"red"
n'en est pas un (c'est une chaîne). D'autres exemples à proscrire : Exemple(s) INTERDIT(s) :
width: "auto";
border: "none";
font−family: "serif";
background: "red";
4.1.3 Les caractères et la casse Les règles suivantes sont toujours vraies :
Toutes les feuilles de style CSS sont insensibles à la casse, sauf leurs parties qui ne sont pas régies par CSS. Ainsi celles qui sont sensibles à la casse, comme les valeurs des attributs de HTML "id" et "class", les noms des polices et les URIs qui sont hors du cadre de cette spécification. Noter en particulier que les noms des éléments ne sont pas dépendants de la casse pour HTML, alors qu'en XML ils le sont.
•
En CSS2, les identifiants (ainsi que les noms des éléments et ceux des classes et des IDs des sélecteurs) ne peuvent contenir que les caractères parmi [A−Za−z0−9] et ISO 10646 supérieurs à 161, ainsi que le tiret (−) et le souligné (_) ; ils ne peuvent commencer ni par un tiret ni par un chiffre. On peut aussi employer des caractères échappés ainsi que tous les caractères Unicode sous leur forme numérique (voir ci−après). Par exemple, l'identifiant "B&W?" peut s'écrire "B\&W\?" ou "B\26 W\3F".
•
Noter que Unicode est équivalent code−à−code à ISO 10646 (voir [UNICODE] et [ISO10646]).
En CSS2, la barre oblique inverse (\) détermine trois types d' échappements de caractère.
•
Premièrement, dans une chaîne, une barre oblique inverse suivie d'un caractère "nouvelle ligne" est ignorée (une chaîne n'est pas sensée contenir la barre oblique inverse ni le caractère "nouvelle ligne").
Deuxièmement, elle annule le sens des caractères spéciaux pour CSS. Tout caractère (sauf un nombre hexadécimal) peut être échappé ce qui neutralise sa signification particulière. Par exemple, "\"" est une chaîne constituée d'un seul guillemet double. Les préprocesseurs de feuilles de style ne devraient pas les supprimer des feuilles de style car celles−ci en seraient changées.
Troisièmement, elle permet aux auteurs une référence à des caractères qui autrement serait difficile à insérer dans un document. Dans ce cas, la barre oblique inverse s'emploie suivie d'au plus six chiffres hexadécimaux (0..9A..F) qui correspondent au code numérique d'un caractère ISO 10646 ([ISO10646]).
Si à son tour un chiffre ou une lettre vient après ce nombre hexadécimal, il convient de préciser où celui−ci se termine. Deux façons d'y parvenir :
avec un espace (ou un autre blanc) : "\26 B" ("&B"). Dans ce cas, l'agent utilisateur devrait considérer une paire "CR/LF" (13/10 en Unicode) comme un seul blanc ;
1.
en fournissant exactement 6 chiffres hexadécimaux : "\000026B" ("&B").
2.
En fait, on peut combiner ces deux méthodes. Un seul blanc est ignoré après un échappement
hexadécimal. Noter que, pour obtenir un "vrai" espace après la séquence d'échappement, il faudra aussi l'échapper ou le doubler.
On considère toujours les caractères échappés comme faisant partie d'un identifiant ou d'une chaîne (ex.
"\7B" n'est pas un signe de ponctuation, alors que "{" en est un, tout comme "\32" est permis au début du nom d'une classe et "2" ne l'est pas).
•
4.1.4 Les déclarations
Quelle que soit la version de CSS, une feuille de style CSS consiste en une liste de déclarations (voir la grammaire plus haut). Elles sont de deux sortes : les règles−at et les jeux de règles. Les blancs sont autorisés autour des déclarations.
Quand on utilise, dans cette spécification, des expressions comme "immédiatement avant" ou "immédiatement après", cela veut dire sans blancs ou commentaires intermédiaires.
4.1.5 Les règles−at
Les règles−at commencent par un mot−clé−at, composé du caractère "@" immédiatement suivi par un identifiant (ex. '@import', '@page').
Une règle−at consiste en tout ce qu'il y a jusqu'au premier point−virgule (;), celui−ci inclus, ou jusqu'au bloc suivant, selon le premier qui survient. Devant une règle−at inconnue de lui, un agent utilisateur CSS doit l'ignorer entièrement et poursuivre l'interprétation après celle−ci.
Les agents utilisateurs CSS2 doivent ignorer toute règle '@import' qui survient dans un bloc ou qui ne précède pas l'ensemble des jeux de règles.
Exemple(s) INTERDIT(s) :
Supposons, par exemple, un interpréteur CSS2 face à cette feuille de style :
@import "subs.css";
H1 { color: blue }
@import "list.css";
Le deuxième '@import' est invalide pour CSS2. L'interpréteur ignore celui−ci en entier, et la feuille de style se réduit dans les faits à :
@import "subs.css";
H1 { color: blue }
Exemple(s) INTERDIT(s) :
Dans l'exemple suivant, la deuxième règle '@import' n'est pas recevable parce qu'elle survient dans le bloc d'une règle '@media'.
@import "subs.css";
@media print {
@import "print−main.css";
BODY { font−size: 10pt } }
H1 {color: blue }
4.1.6 Les blocs
Un bloc commence par une accolade gauche ({) et se termine par l'accolade droite (}) correspondante. On peut y mettre toutes sortes de caractères, sous la réserve que certains caractères aillent toujours par paires, celles−ci pouvant être imbriquées. Il s'agit des parenthèses ( ), des crochets [ ] et des accolades { }. Les guillemets simples (') et double (") doivent aussi aller par paires, leur contenu étant considéré alors comme une chaîne. Voir Atomisation plus haut pour la définition d'une chaîne.
Exemple(s) INTERDIT(s) :
Voici en exemple un bloc. Noter que l'accolade droite entre les guillemets doubles ne correspond pas à l'accolade ouvrante du bloc et que le deuxième guillemet simple est échappé, ce qui annule ainsi la correspondance avec le premier guillemet simple :
{ causta: "}" + ({7} * '\'') }
Noter que cette règle n'est pas valide pour CSS2, bien que correspondant à la définition d'un bloc donnée ci−dessus.
4.1.7 Les jeux de règles, les blocs de déclaration et les sélecteurs
Un jeu de règles (qualifié aussi de "règle") se compose d'un sélecteur suivi par un bloc de déclaration.
Un bloc de déclaration (qui est représenté dans la suite du texte par {bloc}) commence par une accolade gauche ({) et se termine par l'accolade droite (}) correspondante. On doit placer entre celles−ci une liste de déclarations séparées par des point−virgules (;) ou, sinon, ne rien y mettre.
Un sélecteur (voir aussi le chapitre sur les sélecteurs) consiste en tout ce qu'il y a jusqu'à la première accolade gauche, celle−ci exclue. Un sélecteur est toujours accompagné d'un {bloc}. Quand un agent utilisateur ne peut interpréter un sélecteur (par exemple, parce que celui−ci est invalide pour CSS2), il doit de ce fait en ignorer le {bloc}.
En CSS2, la virgule (,) placée dans un sélecteur a un sens particulier. Cependant, comme on ne sait pas si celle−ci va prendre d'autres significations dans les versions ultérieures de CSS, si une partie du sélecteur comportait une quelconque erreur, la déclaration entière devrait être ignorée, même si le reste de celui−ci apparaîssait valide pour CSS2.
Exemple(s) INTERDIT(s) :
Par exemple, comme le caractère "&" n'est pas un jeton valide en CSS2, un agent utilisateur CSS2 doit ignorer la totalité de la deuxième ligne, et les éléments H3 ne prendront pas la couleur rouge :
H1, H2 {color: green } H3, H4 & H5 {color: red } H6 {color: black }
Exemple(s):
Voici un exemple plus complexe. Les deux premières paires d'accolades se trouvent dans une chaîne, elles ne délimitent pas la fin du sélecteur. Cette déclaration est donc valide pour CSS2 :
P[example="public class foo\
{\
private int x;\
\
foo(int x) {\
this.x = x;\
}\
\
}"] { color: red }
4.1.8 Les déclarations et propriétés
Une déclaration est : soit vide ; soit constituée d'une propriété, suivie du caractère deux−points (:) puis d'une valeur. Il peut y avoir des blancs autour de chacun de ceux−ci.
En raison du mode de fonctionnement des sélecteurs, on peut regrouper les multiples déclarations qui se rapportent à un même sélecteur en les séparant par des point−virgules (;).
Exemple(s):
Ainsi, les règles suivantes :
H1 { font−weight: bold } H1 { font−size: 12pt } H1 { line−height: 14pt } H1 { font−family: Helvetica } H1 { font−variant: normal } H1 { font−style: normal }
sont équivalentes à celle−ci :
H1 {
font−weight: bold;
font−size: 12pt;
line−height: 14pt;
font−family: Helvetica;
font−variant: normal;
font−style: normal }
Une propriété est un identifiant. On peut utiliser pour sa valeur toutes sortes de caractères, sous réserve des parenthèses ("( )"), des crochets ("[ ]"), des accolades ("{ }") et des guillemets simples (') ou doubles (") qui doivent toujours aller par paires, les point−virgules en dehors d'une chaîne doivent être échappées. Les parenthèses, les crochets et les accolades peuvent être imbriqués. Les caractères entre des guillemets sont interprétés comme une chaîne.
La syntaxe des valeurs est spécifiée pour chacune des propriétés ; dans tous les cas, les valeurs sont construites à partir d'identifiants, de chaînes, de nombres, de longueurs, de pourcentages, d'URIs, de couleurs, d'angles, de durées et de fréquences.
Un agent utilisateur doit ignorer une déclaration dont le nom de la propriété ou sa valeur est invalide. Chacune des propriétés CSS2 a ses propres restrictions syntaxiques et sémantiques sur les valeurs qu'elle accepte.
Exemple(s) INTERDIT(s) :
Prenons par exemple un interpréteur CSS2 et cette feuille de style :
H1 { color: red; font−style: 12pt } /* valeur invalide : 12pt */
P { color: blue; font−vendor: any; /* propriété invalide : font−vendor */
font−variant: small−caps } EM EM { font−style: normal }
Dans la première ligne, la seconde déclaration comporte une valeur de '12pt' invalide, et dans la deuxième ligne, la deuxième déclaration contient une propriété non définie 'font−vendor'. L'interpréteur va ignorer celles−ci, réduisant la feuille de style dans les faits à la suivante :
H1 { color: red; }
P { color: blue; font−variant: small−caps } EM EM { font−style: normal }
4.1.9 Les commentaires
Les commentaires commencent par les caractères "/*" et se terminent par "*/". On peut les placer partout entre les jetons, leur contenu n'a aucune influence sur le rendu. On ne peut pas les imbriquer.
CSS permet aussi l'utilisation des délimiteurs SGML ("<!−−" et "−−>") à certains endroits, mais ne délimitent pas un commentaire en CSS. On les emploie aussi pour masquer les feuilles de style dans un document source HTML (dans l'élément STYLE) aux agents utilisateurs antérieurs à HTML 3.2. Voir la spécification HTML 4.0 ([HTML40]) pour plus d'informations.