4 La syntaxe de CSS2 et les types de données de base

4.1 La syntaxe

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 soit 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-RANGE	U\+[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 macro-commandes 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és 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 :

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 censé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 :

  1. 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 ;
  2. en fournissant exactement 6 chiffres hexadécimaux : "\000026B" ("&B").

  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.

@import "subs.css";
H1 { color: blue }
@import "list.css";

@import "subs.css";
H1 { color: blue }

@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.

{ causta: "}" + ({7} * '\'') }

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 points-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 apparaissait valide pour CSS2.

H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }

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 points-virgules (;).

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

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 points-virgules en dehors d'une chaîne doivent être échappés. 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.

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 }

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.

4.2 Les règles de traitement des erreurs d'interprétation

Dans certains cas, les agents utilisateurs doivent ignorer une partie d'une feuille de style invalide. Cette spécification définit le terme ignorer, qui signifie l'examen de cette partie invalide par l'agent utilisateur (pour déterminer où celle-ci commence et se termine), tout en agissant comme si cette partie n'avait pas été là.

Pour permettre l'ajouts futurs de nouvelles propriétés et valeurs, les agents utilisateurs doivent suivre les règles suivantes en fonction des scénarios décrits ici :

• Propriétés inconnues. Les agents utilisateurs doivent ignorer une déclaration dont la propriété est inconnue. Par exemple, pour cette feuille de style :

  H1 { color: red; rotation: 70minutes }
  

  l'agent utilisateur la traitera comme si elle était :

  H1 { color: red }
  

• Valeurs invalides. Les agents utilisateurs doivent ignorer une déclaration qui comporte une valeur invalide. Par exemple :

  IMG { float: left }       /* valide pour CSS2 */
  IMG { float: left here }  /* "here" n'est pas une valeur de 'float' */
  IMG { background: "red" } /* les mots-clés ne sont pas entre guillemets en CSS2 */
  IMG { border-width: 3 }   /* on doit spécifier une unité à une valeur numérique */
  

  un interpréteur CSS2 honorerait la première règle de la feuille de style et en ignorerait les suivantes, comme si celle-ci avait été :

  IMG { float: left }
  IMG { }
  IMG { }
  IMG { }
  

  L'agent utilisateur qui voudrait aller vers une conformité avec une future spécification CSS peut aussi suivre une, ou plusieurs, de ces autres règles-ci.

• Mots-clés-at invalides. Les agents utilisateurs doivent ignorer un mot-clé-at invalide ainsi que tout ce qui le suit jusqu'au point-virgule (;) inclus ou jusqu'au {bloc} prochains, selon celui qui survient en premier. Par exemple, considérons la feuille de style suivante :

  @three-dee {
    @background-lighting {
      azimuth: 30deg;
      elevation: 190deg;
    }
    H1 { color: red }
  }
  H1 { color: blue }
  

  La règle-at '@three-dee' n'est pas définie en CSS2. Ainsi, la règle-at (jusqu'à la troisième accolade droite incluse) est ignorée, et la feuille de style est réduite dans les faits à :

  H1 { color: blue }
  

4.3 Les valeurs

4.3.1 Les entiers et les nombres

Quelques valeurs peuvent avoir le type entier (dénoté par <integer>) ou le type nombre (dénoté par <nombre>). Les nombres et les entiers sont seulement spécifiés en notation décimale. Un <entier> consistent un, ou plusieurs, chiffres de "0" à "9". A <nombre> peut être un <entier> ou encore zéro, ou plusieurs chiffres, suivi par un point (.) et un, ou plusieurs, chiffres. Les deux types pouvant être précédés par le signe "-" ou "+".

Noter que plusieurs propriétés, qui admettent comme valeur un entier ou un nombre, limitent en fait leurs valeurs dans une plage donnée, souvent à une valeur positive.

4.3.2 Les longueurs

Les longueurs s'appliquent aux mesures horizontales et verticales.

Une valeur de longueur (dénotée par <longueur> dans cette spécification) est formée d'un caractère de signe facultatif ('+' ou '-', '+' étant le défaut), suivi immédiatement par un <nombre> (avec un point décimal ou non) et suivi immédiatement par un identifiant d'unité (ex. px, deg, etc.). Pour une valeur de longueur '0', l'identifiant d'unité est facultatif.

[Errata: Cependant, le type <nombre> admettant déjà le signe "+" ou "-", la définition précédente implique la possibilité de mettre deux caractères pour le signe. Bien que les types de valeurs suivants puissent en accepter deux, on considère qu'ils n'admettent qu'un caractère de signe :

• Longueur
• Pourcentage
• Angle]

Certaines propriétés autorisent des valeurs de longueur négatives, mais cela peut compliquer le modèle de mise en forme, cela peut aussi dépendre des limites spécifiques des agents utilisateurs. Dans le cas où une valeur de longueur négative n'est pas reconnue, elle devrait être convertie à la valeur la plus proche qui le soit.

Il existe deux types d'unité de longueur : les relatives et les absolues. Les unités de longueurs relatives se rapportent à une autre propriété de longueur. Les feuilles de style qui en emploient seront plus facilement adaptable d'un média à un autre (par exemple d'un moniteur vers une imprimante laser).

Voici les unités relatives :

• em : la valeur de 'font-size' pour la police concernée
• ex : la valeur de 'x-height' pour la police concernée
• px : une quantité de pixels, en fonction de l'appareil de visualisation.

H1 { margin: 0.5em }      /* em */
H1 { margin: 1ex }        /* ex */
P  { font-size: 12px }    /* px */

L'unité 'em' correspond à la valeur calculée pour la propriété 'font-size' d'un élément donné. Sauf quand cette unité est spécifiée dans la propriété 'font-size' elle-même, auquel cas, elle se réfère à la taille de la police de l'élément parent. On peut l'utiliser pour des mesures de quantités verticales ou horizontales. (En typographie, on l'appelle aussi carré typographique ou corps).

L'unité 'ex' est définie par rapport à la valeur de la propriété 'x-height'. Cette valeur correspond à la hauteur du caractère "x" minuscule. Elle est définie même pour les polices qui n'en contiennent pas.

H1 { line-height: 1.2em }

H1 { font-size: 1.2em }

Les valeurs en 'em' et 'ex' se réfèrent à la valeur initiale de la propriété quand on les spécifie pour la racine de l'arbre du document (ex. "HTML" pour le langage HTML).

Les valeurs exprimées en pixel s'entendent relativement à la résolution de l'appareil de visualisation, c.à.d. le plus souvent un moniteur. Dans le cas où la densité de pixels de l'appareil de sortie est trop éloignée de celle d'un moniteur typique, l'agent utilisateur devrait redimensionner les valeurs en pixel. On recommande une valeur pour le pixel de référence qui soit égale à l'angle visuel d'un pixel sur un appareil de densité 96dpi (96 ppp) situé à une longueur de bras du spectateur. Pour une longueur de bras nominale de 28 pouces (71 cm), l'angle visuel serait de 0.0213 degrés.

À cette distance, un pixel correspond à une taille d'environ 0.26 mm (soit 1/96 pouce). Une fois retranscrit par une imprimante laser, pour une lecture à moins d'une longueur de bras (55 cm ou 21 pouces), celui-ci a une taille d'environ 0.21 mm. Avec une imprimante de résolution 300 ppp (point par pouce), il serait rendu en 3 points (0.25 mm) et, avec imprimante de 600 ppp, en environ 5 points.

Les deux illustrations suivantes montrent les conséquences de la distance de lecture et de la résolution d'un appareil sur la perception d'un pixel. Dans la première, une distance de lecture de 71 cm (28 pouce) correspond à un pixel de 0.26 mm, et une distance de 3.5 m (12 pied) à un pixel de 1.3 mm.

Dans la seconde, une aire de 1px par 1px est recouverte avec un seul point pour un appareil en basse résolution (un moniteur), alors que cette même surface nécessite 16 points pour un appareil en haute résolution (comme une imprimante laser en 400 ppp).

Les éléments enfants n'héritent pas des valeurs relatives spécifiées pour leur parent ; ils en héritent (généralement) des valeurs calculées.

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* i.e., 36pt */
}
H1 { font-size: 15pt }

Les unités de longueurs absolues ne sont utiles que si les propriétés physiques du média de sortie sont connues. Voici les unités absolues :

• in : pouce (inch) -- un pouce est égal à 2.54 cm.
• cm : centimètre
• mm : millimètre
• pt : point -- le point de CSS2 est égal à 1/72 de pouce.
• pc : pica -- un pica est égal à 12 points.

H1 { margin: 0.5in }      /* pouces  */
H2 { line-height: 3cm }   /* centimètres */
H3 { word-spacing: 4mm }  /* millimètres */
H4 { font-size: 12pt }    /* points */
H4 { font-size: 1pc }     /* picas */

Si la valeur de longueur spécifiée n'est pas reconnue, les agents utilisateurs doivent en donner une valeur approchante

4.3.3 Les pourcentages

Une valeur de pourcentage (dénotée par <pourcentage> est formée d'un caractère facultatif pour le signe ('+' ou '-', '+' étant par défaut) immédiatement suivi par un <nombre> et immédiatement suivi par le caractère '%'.

Les valeurs de pourcentage sont toujours relatives à une autre valeur, par exemple une longueur. Chacune des propriétés qui admettent des pourcentages définit aussi la valeur à laquelle le pourcentage se rapporte. Cette valeur peut être celle d'une autre propriété du même élément, d'une propriété d'un ancêtre ou de la valeur issue du contexte de formatage (ex. la largeur d'un bloc conteneur). Quand une valeur de pourcentage est spécifiée pour une propriété de l'élément racine et que celle-ci est définie par rapport à la valeur héritée d'une propriété donnée, alors la valeur résultante est égale au produit de la valeur de pourcentage par la valeur initiale de cette propriété.

P { font-size: 10pt }
P { line-height: 120% }  /* 120% de 'font-size' */

4.3.4 URL + URN = URI

Les URLs (Uniform Resource Locators, voir [RFC1738] et [RFC1808]) indiquent l'adresse d'une ressource sur le Web. Une nouvelle appellation destinée à identifier une ressource est l'URN (Uniform Resource Name). Les deux réunis forment ce qu'on nomme les URIs (Uniform Resource Identifiers, voir [URI]).

Les valeurs d'URI dans cette spécification sont dénotées par <uri>. On utilise la notation fonctionnelle "url()" pour désigner les URIs dans les valeurs de propriétés, comme ici :

BODY { background: url("http://www.bg.com/pinkish.gif") }

Une valeur d'URI est formée par les caractères 'url(' suivis par un blanc facultatif, suivi par un guillemet facultatif simple (') ou double ("), suivis par l'URI lui-même, suivi par un guillemet fermant simple ou double, s'il y a lieu, suivi par un blanc facultatif et enfin par ')'. Les guillemets doivent être de la même sorte.

LI { list-style: url(http://www.redballs.com/redball.png) disc }

Les parenthèses, les virgules, les blancs et les guillemets simples ou doubles qui apparaissent dans un URI doivent être échappés avec une barre oblique inverse, ex. '\(', '\)', '\,', etc.

Selon le type d'URI, il doit aussi être possible d'écrire les caractères précédents sous forme d'échappement URI, où "(" = %28, ")" = %29, etc., tel que décrit dans [URI].

Pour créer des feuilles de style modulaires indépendantes de l'adresse absolue d'une ressource, les auteurs peuvent employer des URIs relatifs. Les URIs relatifs (décrits dans [RFC1808]) sont résolus en URIs complets à partir d'un URI de base. L'algorithme normatif de ce processus est défini au chapitre 3 de RFC 1808. Pour les feuilles de style CSS, l'URI de base correspond à celui de la feuille de style, et non à celui du document source.

BODY { background: url("yellow") }

http://www.myorg.org/style/basic.css

http://www.myorg.org/style/yellow

La manière de gérer les URIs qui pointent vers des ressources non disponibles ou inappropriées peut varier d'un agent utilisateur à l'autre.

4.3.5 Les compteurs

Les compteurs sont dénotés par des identifiants (voir les propriétés 'counter-increment' et 'counter-reset'). On se réfère à la valeur d'un compteur au travers des notations 'counter(<identifiant>)' ou 'counter(<identifiant>, <list-style-type>)'. La valeur par défaut étant 'decimal'.

Pour référencer une séquence de compteurs imbriqués, on utilise les notations 'counters(<identifiant>, <chaîne>)' ou 'counters(<identifiant>, <chaîne>, <list-style-type>)'. Voir "Les compteurs imbriqués et leur portée" dans le chapitre sur le contenu généré.

En CSS2, on ne peut se référer aux valeurs des compteurs qu'avec la propriété 'content'. Noter que la valeur 'none' est admise pour <list-style-type> : 'counter(x, none)' résulte en une chaîne vide.

P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}

Les compteurs qui sont hors du champ d'action d'une propriété 'counter-reset' sont considérés avoir été remis à zéro par la propriété 'counter-reset' de l'élément racine.

4.3.6 Les couleurs

La liste des noms de mots-clés de couleur est : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow. Ces 16 couleurs sont définies dans la spécification HTML 4.0 ([HTML40]). En complément de ces couleurs, les utilisateurs peuvent spécifier des mots-clés qui correspondent aux couleurs utilisées par certains objets de l'environnement de l'utilisateur. Consulter le chapitre sur les couleurs système pour plus d'informations.

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

On utilise le modèle de couleur RGB pour la spécification numérique des couleurs. Les exemples ci-dessous indiquent tous la même couleur :

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }
EM { color: rgb(100%, 0%, 0%) }

Une valeur RGB en notation hexadécimale est formée d'un caractère '#' immédiatement suivi par trois ou bien six caractères hexadécimaux. La notation RGB en trois chiffres (#rgb) est convertie dans celle en six chiffres (#rrggbb) par réplication, et non par ajout de zéros. Par exemple, #fbo se transforme en #ffbb00. Ceci assure que la couleur blanche (#ffffff) puisse être spécifiée avec la notation courte (#fff) et que celle-ci soit indépendante de la profondeur de couleur de l'écran.

Une valeur RGB en notation fonctionnelle est formée par les caractères 'rgb(', suivis par une liste de trois valeurs numériques (soit trois entiers, soit trois pourcentages) séparées par des virgules et suivi par ')'. La valeur entière 255 correspond à 100% et à f ou ff en notation hexadécimale : rgb(255,255,255) = rgb(100%,100%,100%) = #fff. Les blancs sont permis autour de chacune des valeurs.

Toutes les couleurs RGB sont spécifiées dans l'espace de couleur sRGB (voir [SRGB]). La fidélité du rendu des couleurs peut varier d'un agent utilisateur à l'autre, mais l'emploi de sRGB définit une mesure objective et sans ambiguïté des couleurs, en accord avec des standards internationaux (voir [COLORIMETRY]).

Les agents utilisateurs conformes peuvent se limiter à appliquer une correction gamma dans leurs efforts à rendre les couleurs. L'espace sRGB spécifie un gamma d'affichage de 2.2 dans certaines conditions spécifique de vision. Les agents utilisateurs devraient adapter les couleurs données en CSS, en conjonction avec le rendu "naturel" du gamma d'un appareil de sortie, de manière, à produire un gamma effectif de 2.2. Voir le chapitre sur la correction gamma pour plus de détails. Noter que seules les couleurs spécifiées en CSS sont concernées, les images, par exemple, sont censées emporter leurs propres informations de couleur.

Les valeurs situées hors du gamut de l'appareil devraient être rognées : les valeurs de rouge, vert et bleu doivent être modifiées pour rester dans les limites supportées par l'appareil. Pour un moniteur CRT typique, dont le gamut est le même que celui de sRGB, ces trois règles sont équivalentes :

EM { color: rgb(255,0,0) }       /* entier de 0 à 255 */
EM { color: rgb(300,0,0) }       /* ramené à rgb(255,0,0) */
EM { color: rgb(255,-10,0) }     /* ramené à rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) }  /* ramené à rgb(100%,0%,0%) */

4.3.7 Les angles

Les valeurs d'angles (dénotées par <angle> dans le texte) sont employées avec les feuilles de style auditives.

Elles sont formées d'un caractère de signe facultatif ('+' ou '-', '+' étant par défaut) immédiatement suivi par un <nombre> et immédiatement suivi par un identifiant d'unité d'angle.

[Errata : Comme pour les longueurs, l'unité peut être omise si la valeur est "0" : on peut écrire "0deg" simplement "0".]

Les identifiants d'unité d'angle sont :

• deg : degrés
• grad : grades
• rad : radians

Les valeur d'angle peuvent être négatives. L'agent utilisateur devrait les normaliser dans la plage de 0 à 360 degrés. Par exemple, -10deg et 350deg sont équivalents.

Un angle droit, par exemple, fait '90deg' ou '100grad' ou '1.570796326794897rad'.

4.3.8 Les durées

Les valeurs de durée (dénotées par <durée> dans ce texte) sont employées avec les feuilles de style auditives.

Elles sont formées d'un <nombre> immédiatement suivi par un identifiant d'unité de durée.

[Errata : Comme pour les longueurs, l'unité peut être omise si la valeur est "0" : on peut écrire "0ms" simplement "0".]

Les identifiants d'unité de durée sont :

• ms : millisecondes
• s : secondes

Les valeurs de durée ne peuvent pas être négatives.

4.3.9 Les fréquences

Les valeurs de fréquence (dénotées par <fréquence> dans le texte) sont employées avec les feuilles de style auditives.

Elles sont formées d'un <nombre> immédiatement suivi par un identifiant d'unité de fréquence.

[Errata : Comme pour les longueurs, l'unité peut être omise si la valeur est "0" : on peut écrire "0Hz" simplement "0".]

Les identifiants d'unité de fréquence sont :

• Hz: Hertz
• kHz: kilo Hertz

Les valeurs de fréquence ne peuvent pas être négatives.

Par exemple, 200Hz (ou 200hz) est un son grave et 6kHz (ou 6khz) est un son aigu.

4.3.10 Les chaînes

Les chaînes s'inscrivent entre des guillemets simples ou doubles. On ne peut pas mettre de guillemets doubles entre d'autres guillemets doubles, à moins de les échapper (ainsi, '\"' ou "\22"). De la même façon pour les guillemets simples ("\'" ou "\27").

"voici une 'chaîne'"
"voici une \"chaîne\""
'voici une "chaîne"'
'voici une \'chaîne\''

Une chaîne ne peut pas contenir directement un caractère nouvelle ligne. Pour cela, on emploie le caractère échappé "\A" (en notation hexadécimale, A est le caractère Unicode pour une nouvelle ligne, celui-ci est donc la représentation générique pour "nouvelle ligne" en CSS). Voir la propriété 'content' pour un exemple.

Il est possible de couper les chaînes pour les répartir sur plusieurs lignes, pour des raisons esthétiques ou autres, mais il faut dans ce cas échapper la nouvelle ligne elle-même avec une barre oblique inverse (\). Par exemple, les deux sélecteurs qui suivent sont les mêmes :

A[TITLE="un titre qui\
est assez court"] {/*...*/}
A[TITLE="un titre qui est assez court"] {/*...*/}

4.4 La représentation du documents par CSS

Une feuille de style CSS est une séquence de caractères issus du Jeu de Caractères Universel, Universal Character Set (voir [ISO10646]). Pour leur transport et leur stockage, ces caractères doivent être encodés selon un codage compatible avec le jeu de caractères disponibles en US-ASCII (ex. ISO 8859-x, SHIFT JIS, etc.). Pour une bonne introduction aux jeux de caractères et leurs codages, consulter la spécification HTML 4.0 ([HTML40], chapitre 5). Voir aussi la spécification XML 1.0 ([XML10], chapitres 2.2 et 4.3.3, et l'Appendice F.

Quand une feuille de style est incorporée dans un document, comme avec l'élément STYLE ou l'attribut "style" en HTML, celle-ci partage le même codage de caractères que ce document.

Quand une feuille de style réside dans un fichier séparé, les agents utilisateurs doivent observer les priorités suivantes pour déterminer le codage des caractères du document (par ordre de priorité décroissant) :

1. Un paramètre HTTP "charset" dans un champ "Content-Type" ;
2. La règle-at @charset ;
3. Des mécanismes du langage du document appelant (ex. l'attribut "charset" de l'élément LINK en HTML).

Il ne peut y avoir qu'une règle @charset dans une feuille de style externe et elle doit survenir au tout début de celle-ci, aucun caractère ne devant précéder. Cette règle ne doit pas apparaître dans une feuille de style incorporée. Les auteurs spécifient le nom d'un codage après "@charset". Ce nom doit correspondre à celui d'un jeu de caractère inscrit dans les registres de l'IANA (voir [IANA] et aussi [CHARSETS] pour une liste complète de ceux-ci). Par exemple :

Cette spécification ne précise pas lesquels des codages de caractères un agent utilisateur doit reconnaître.

Noter que compter sur la construction avec @charset pose un problème théorique car on ne sait pas a priori la façon dont celle-ci est encodée. En pratique, cependant, les codages les plus répandus sur Internet sont basés sur ASCII, UTF-16, UCS-4 ou (rarement) sur EBCDIC. Cela signifie en général que l'agent utilisateur est capable de détecter de façon sûre la famille des codages d'un document à partir de ses octets initiaux, ce qui lui permet ensuite d'en déterminer le codage exact.

4.4.1 La référence aux caractères absents d'un codage

Une feuille de style peut faire appel à des caractères qui n'ont pas de représentation dans un codage donné. Ceux-ci doivent être écrits sous la forme de références échappées des caractères ISO 10646. C'est la même façon de faire que pour les références des caractères numériques dans les documents HTML ou XML (voir [HTML40], chapitres 5 et 25).

On ne devrait employer ce mécanisme que si on a affaire à un petit nombre seulement de ces caractères à échapper. Si la plus grande part du document y fait appel, alors les auteurs devraient employer un codage plus approprié pour celui-ci (ex. avec un document qui contient beaucoup de caractères grecs, les auteurs pourraient utiliser "ISO-8859-7" ou "UTF-8").

Les processeurs intermédiaires qui utilisent un codage différent peuvent traduire ces séquences d'échappement en des séquences d'octets pour ce même codage. Néanmoins, il ne doivent pas modifier celles qui annulent le sens spécial d'un caractère ASCII.

Les agents utilisateurs conformes doivent faire correspondre correctement avec Unicode tous les caractères d'un codage donné qui sont reconnus (ou se comporter comme s'ils le faisaient).

Par exemple, un document transmis en ISO-8859-1 (Latin-1) ne peut pas contenir des lettres greques telles quelles : "κουρος" ("kouros" en grec) doit être écrit "\3BA\3BF\3C5\3C1\3BF\3C2".

<SPAN style="voice-family: D\FC rst">...</SPAN>

<SPAN style="voice-family: D&#252;rst">...</SPAN>