css2 PDF

RECCSS219980512
Traduction:
J.J SOLARI
PDF:
G.ACCAD
Logiciels utiliss*
HTMLDoc
Strata 3D
Code Edit
*gratuiciels
Table des matires

Recommandation CSS2 du W3C en version franaise..........................................................................................1
Statut du document traduit.............................................................................................................................1
Avertissement....................................................................................................................................1
Notes sur la traduction.......................................................................................................................1
Autres documents traduits..............................................................................................................................1
Notice lgale...................................................................................................................................................1
Les feuilles de style en cascade, niveau 2Spcification CSS2.................................................................................3
Rsum...........................................................................................................................................................3
Statut de ce document.....................................................................................................................................3
Formats disponibles........................................................................................................................................3
Langues disponibles..........................................................................................................................4
Errata.................................................................................................................................................4
1 propos de la spcification CSS2..............................................................................................................5
1.1 Lire la spcification.....................................................................................................................5
1.2 Organisation de la spcification..................................................................................................5
1.3 Conventions.................................................................................................................................5
1.3.1 Les conventions pour les lments et attributs dans le langage du document............5
1.3.2 Les dfinitions des proprits CSS..............................................................................5
1.3.3 Les proprits raccourcies...........................................................................................7
1.3.4 Les notes et les exemples............................................................................................7
1.3.5 Les images et les descriptions longues........................................................................7
1.4 Remerciements............................................................................................................................7
1.5 Notice de copyright.....................................................................................................................8
2 Introduction CSS2..................................................................................................................................10
2.1 Un bref tutoriel de CSS2 pour HTML.......................................................................................10
2.2 Un bref tutoriel de CSS2 pour XML.........................................................................................11
2.3 Le modle de traitement de CSS2.............................................................................................13
2.3.1 Le canevas.................................................................................................................13
2.3.2 Le modle d'adressage de CSS2................................................................................13
2.4 Les principes de construction de CSS.......................................................................................14
3 La conformit : obligations et recommandations......................................................................................16
3.1 Dfinitions.................................................................................................................................16
3.2 La conformit............................................................................................................................17
3.3 Les conditions d'erreur..............................................................................................................18
3.4 Le type de contenu text/css.......................................................................................................18
4 La syntaxe de CSS2 et les types de donnes de base................................................................................19
4.1 La syntaxe..................................................................................................................................19
4.1.1 L'atomisation.............................................................................................................19
4.1.2 Les motscls............................................................................................................20
4.1.3 Les caractres et la casse...........................................................................................21
4.1.4 Les dclarations.........................................................................................................21
4.1.5 Les rglesat.............................................................................................................21
4.1.6 Les blocs....................................................................................................................22
4.1.7 Les jeux de rgles, les blocs de dclaration et les slecteurs....................................22
4.1.8 Les dclarations et proprits....................................................................................23
4.1.9 Les commentaires......................................................................................................24
4.2 Les rgles de traitement des erreurs d'interprtation.................................................................24
4.3 Les valeurs.................................................................................................................................25
4.3.1 Les entiers et les nombres.........................................................................................25
4.3.2 Les longueurs............................................................................................................25
4.3.3 Les pourcentages.......................................................................................................27
4.3.4 URL + URN = URI...................................................................................................28
4.3.5 Les compteurs...........................................................................................................28
4.3.6 Les couleurs...............................................................................................................29
4.3.7 Les angles..................................................................................................................30
4.3.8 Les dures..................................................................................................................30
4.3.9 Les frquences...........................................................................................................30
4.3.10 Les chanes..............................................................................................................31
4.4 La reprsentation du documents par CSS..................................................................................31
4.4.1 La rfrence aux caractres absents d'un encodage..................................................32
5 Les slecteurs............................................................................................................................................33
5.1 La reconnaissance d'un motif....................................................................................................33
5.2 La syntaxe des slecteurs..........................................................................................................34
5.2.1 Le regroupement.......................................................................................................34
5.3 Le slecteur universel................................................................................................................34
Table des matires

5.4 Les slecteurs de type................................................................................................................34
5.5 Les slecteurs descendants........................................................................................................35
5.6 Les slecteurs d'enfant...............................................................................................................35
5.7 Les slecteurs d'enfants adjacents.............................................................................................36
5.8 Les slecteurs d'attribut.............................................................................................................36
5.8.1 La correspondance entre les attributs et leurs valeurs...............................................36
5.8.2 Les valeurs par dfaut des attributs dans les DTDs..................................................37
5.8.3 Les slecteurs de classe.............................................................................................38
5.9 Les slecteurs d'ID....................................................................................................................38
5.10 Les pseudolments et les pseudoclasses...........................................................................39
5.11 Les pseudoclasses.................................................................................................................40
5.11.1 La pseudoclasse :firstchild..................................................................................40
5.11.2 Les pseudoclasses d'ancre : :link et :visited..........................................................40
5.11.3 Les pseudoclasses dynamiques : :hover, :active et :focus....................................41
5.11.4 La pseudoclasse de langue : :lang.........................................................................42
5.12 Les pseudolments..............................................................................................................42
5.12.1 Le pseudolment :firstline.................................................................................42
5.12.2 Le pseudolment :firstletter..............................................................................43
5.12.3 Les pseudolments :before et :after.....................................................................45
6 L'assignation des valeurs des proprits, la cascade et l'hritage..............................................................46
6.1 Les valeurs spcifies, calcules et relles................................................................................46
6.1.1 Les valeurs spcifies................................................................................................46
6.1.2 Les valeurs calcules.................................................................................................46
6.1.3 Les valeurs relles.....................................................................................................46
6.2 L'hritage...................................................................................................................................46
6.2.1 La valeur 'inherit'.......................................................................................................47
6.3 La rgle @import......................................................................................................................47
6.4 La cascade.................................................................................................................................48
6.4.1 L'ordre de cascade.....................................................................................................48
6.4.2 Les rgles avec la valeur !important.........................................................................49
6.4.3 Le calcul de la spcifit d'un slecteur......................................................................49
6.4.4 L'ordre de priorit des indications de prsentation en dehors de CSS......................50
7 Les types de mdias...................................................................................................................................51
7.1 Introduction aux types de mdias..............................................................................................51
7.2 La spcification des feuilles de style en fonction du mdia......................................................51
7.2.1 La rgle @media.......................................................................................................51
7.3 Les types de mdias reconnus...................................................................................................51
7.3.1 Les groupes de mdias..............................................................................................52
8 Le modle des botes.................................................................................................................................54
8.1 Les dimensions des botes.........................................................................................................54
8.2 Exemples de marges, d'espacements et de bordures.................................................................55
8.3 Les proprits de marge : 'margintop', 'marginright', 'marginbottom', 'marginleft' et
'margin'...........................................................................................................................................56
8.3.1 Les marges de fusion.................................................................................................57
8.4 Les proprits d'espacement : 'paddingtop', 'paddingright', 'paddingbottom',
'paddingleft' et 'padding'...............................................................................................................57
8.5 Les proprits de bordure..........................................................................................................58
8.5.1 L'paisseur de bordure : les proprits 'bordertopwidth', 'borderrightwidth'
, 'borderbottomwidth', 'borderleftwidth' et 'borderwidth'........................................59
8.5.2 La couleur de bordure : les proprits 'bordertopcolor', 'borderrightcolor',
'borderbottomcolor', 'borderleftcolor' et 'bordercolor'............................................59
8.5.3 Le style de bordure : les proprits 'bordertopstyle', 'borderrightstyle',
'borderbottomstyle', 'borderleftstyle' et 'borderstyle'..............................................60
8.5.4 Les proprits raccourcies de bordure : 'bordertop', 'borderbottom',
'borderright', 'borderleft' et 'border'...............................................................................61
9 Le modle de mise en forme visuel...........................................................................................................63
9.1 Introduction au modle de mise en forme visuel......................................................................63
9.1.1 L'espace de visualisation...........................................................................................63
9.1.2 Les blocs conteneurs.................................................................................................63
9.2 Le contrle de la gnration de la bote....................................................................................64
9.2.1 Les lments de type bloc et leurs botes..................................................................64
9.2.2 Les lments de type enligne et leurs botes...........................................................65
9.2.3 Les botes compactes.................................................................................................65
9.2.4 Les botes en enfilade................................................................................................66
9.2.5 La proprit 'display'.................................................................................................67
9.3 Les schmas de positionnement................................................................................................68
Table des matires

9.3.1 Le choix d'un schma de positionnement : la proprit 'position'.............................68
9.3.2 Les dcalages des botes : les proprits 'top', 'right', 'bottom', 'left'.........................69
9.4 Le flux normal...........................................................................................................................70
9.4.1 Le contexte de mise en forme bloc............................................................................70
9.4.2 Le contexte de mise en forme enligne....................................................................70
9.4.3 Le positionnement relatif..........................................................................................72
9.5 Les flottants...............................................................................................................................72
9.5.1 Le positionnement des flottants : la proprit 'float'.................................................75
9.5.2 Le contrle du flux autour des flottants : la proprit 'clear'.....................................76
9.6 Le positionnement absolu..........................................................................................................76
9.6.1 Le positionnement fixe..............................................................................................76
9.7 Les relations entre les proprits 'display', 'position' et 'float'...................................................78
9.8 Comparaison entre les positionnements en flux normal, flottant et absolu...............................78
9.8.1 Le flux normal...........................................................................................................78
9.8.2 Le positionnement relatif..........................................................................................79
9.8.3 Faire flotter une bote................................................................................................80
9.8.4 Le positionnement absolu..........................................................................................81
9.9 La prsentation en couches........................................................................................................84
9.9.1 La spcification du niveau dans l'empilement : la proprit 'zindex'......................84
9.10 Le sens du texte : les proprits 'direction' et 'unicodebidi'..................................................85
10 Dtails du modle de mise en forme visuel.............................................................................................89
10.1 Dfinition du "bloc conteneur"................................................................................................89
10.2 La largeur du contenu : la proprit 'width'.............................................................................90
10.3 Le calcul des largeurs et des marges.......................................................................................90
10.3.1 Les lments de type enligne non remplacs........................................................91
10.3.2 Les lments de type enligne remplacs...............................................................91
10.3.3 Les lments de type bloc non remplacs dans un flux normal..............................91
10.3.4 Les lments de type bloc remplacs dans un flux normal.....................................91
10.3.5 Les lments flottants non remplacs......................................................................92
10.3.6 Les lments flottants remplacs.............................................................................92
10.3.7 Les lments non remplacs en position absolue....................................................92
10.3.8 Les lments remplacs en position absolue...........................................................92
10.4 Les largeurs minimales et maximales : 'minwidth' et 'maxwidth'.......................................93
10.5 La hauteur du contenu : la proprit 'height'...........................................................................93
10.6 Le calcul des hauteurs et des marges.......................................................................................94
10.6.1 Les lments de type enligne non remplacs........................................................94
10.6.2 Les lments de types enligne et bloc remplacs dans un flux normal et
lments flottants remplacs.............................................................................................95
10.6.3 Les lments de type bloc non remplacs dans un flux normal et lments
flottants non remplacs......................................................................................................95
10.6.4 Les lments non remplacs en position absolue....................................................95
10.6.5 Les lments remplacs en position absolue...........................................................95
10.7 Les hauteurs minimales et maximales : 'minheight' et 'maxheight'....................................96
10.8 Le calcul de la hauteur de ligne : les proprits 'lineheight' et 'verticalalign'.....................96
10.8.1 L'interlignage et le demiinterlignage....................................................................97
11 Les effets visuels...................................................................................................................................100
11.1 Le dbordement et le rognage...............................................................................................100
11.1.1 Le dbordement : la proprit 'overflow'..............................................................100
11.1.2 Le rognage : la proprit 'clip'...............................................................................101
11.2 La visibilit : la proprit 'visibility'......................................................................................102
12 Le contenu gnr, le numrotage automatique et les listes.................................................................104
12.1 Les pseudolments :before et :after...................................................................................104
12.2 La proprit 'content'.............................................................................................................105
12.3 L'interaction de :before et :after avec les lments ayant les valeurs 'compact' et 'runin'...106
12.4 Les guillemets........................................................................................................................107
12.4.1 Spcifier des guillemets avec la proprit 'quotes'................................................107
12.4.2 Insrer des guillemets avec la proprit 'content'..................................................108
12.5 Compteurs et numrotage automatiques...............................................................................109
12.5.1 Les compteurs imbriqus et leur porte................................................................110
12.5.2 Les styles des compteurs.......................................................................................111
12.5.3 Les compteurs dans les lments avec 'display: none'..........................................112
12.6 Les marqueurs et les listes.....................................................................................................112
12.6.1 Les marqueurs : la proprit 'markeroffset'.........................................................112
12.6.2 Les listes : les proprits 'liststyletype', 'liststyleimage',
'liststyleposition' et 'liststyle'.....................................................................................115
13 Les mdias pagins................................................................................................................................120
Table des matires

13.1 Introduction aux mdias pagins...........................................................................................120
13.2 Les botes de page : la rgle @page......................................................................................120
13.2.1 Les marges de la page...........................................................................................121
13.2.2 La taille de la page : la proprit 'size'..................................................................121
13.2.3 Les repres de coupe : la proprit 'marks'............................................................122
13.2.4 Les pages de gauche, de droite et de couverture...................................................123
13.2.5 Le contenu en dehors de la bote de page..............................................................123
13.3 Les coupures de page............................................................................................................124
13.3.1 Les proprits de coupure avant et aprs : 'pagebreakbefore',
'pagebreakafter', 'pagebreakinside'.........................................................................124
13.3.2 L'utilisation des pages nommes : 'page'...............................................................125
13.3.3 Les coupures l'intrieur des lments : 'orphans', 'widows'................................125
13.3.4 Les coupures de page permises.............................................................................126
13.3.5 Les coupures de page forces................................................................................126
13.3.6 Les coupures de page "au mieux".........................................................................126
13.4 La cascade dans un contexte de page....................................................................................127
14 Les couleurs et les arrireplans...........................................................................................................128
14.1 La couleur d'avantplan : la proprit 'color'........................................................................128
14.2 L'arrireplan........................................................................................................................128
14.2.1 Les proprits d'arrireplan : 'backgroundcolor', 'backgroundimage',
'backgroundrepeat', 'backgroundattachment', 'backgroundposition' et
'background'.....................................................................................................................128
14.3 La correction du gamma........................................................................................................132
15 Les polices.............................................................................................................................................133
15.1 Introduction...........................................................................................................................133
15.2 La spcification de police......................................................................................................133
15.2.1 Les proprits de spcification de police..............................................................134
15.2.2 La famille de polices : la proprit 'fontfamily'..................................................135
15.2.3 Le style de police : les proprits 'fontstyle', 'fontvariant', 'fontweight' et
'fontstretch'....................................................................................................................136
15.2.4 La taille de police : les proprits 'fontsize' et 'fontsizeadjust'.......................138
15.2.5 La proprit raccourcie de police : la proprit 'font'............................................141
15.2.6 Les familles de polices gnriques........................................................................143
15.3 La slection des polices.........................................................................................................144
15.3.1 Les descriptions des polices et @fontface..........................................................145
15.3.2 Les descripteurs de slection de police : 'fontfamily', 'fontstyle',
'fontvariant', 'fontweight', 'fontstretch' et 'fontsize'.................................................147
15.3.3 Le descripteur de qualification des donnes de police : 'unicoderange'..............148
15.3.4 Le descripteur des valeurs numriques : 'unitsperem'......................................149
15.3.5 Le descripteur de rfrencement : 'src'..................................................................149
15.3.6 Les descripteurs de correspondance : 'panose1', 'stemv', 'stemh', 'slope',
'capheight', 'xheight', 'ascent' et 'descent'....................................................................150
15.3.7 Les descripteurs de synthse : 'widths', 'bbox' et 'definitionsrc'..........................152
15.3.8 Les descripteurs d'alignement : 'baseline', 'centerline', 'mathline' et 'topline'........153
15.3.9 Exemples...............................................................................................................153
15.4 Les caractristiques des polices.............................................................................................154
15.4.1 Introduction aux caractristiques des polices........................................................154
15.4.2 Le nom entier d'une police....................................................................................155
15.4.3 Les units de coordonne dans le carr em...........................................................155
15.4.4 La ligne de base centrale.......................................................................................155
15.4.5 L'encodage des polices..........................................................................................155
15.4.6 Le nom de famille de polices................................................................................156
15.4.7 Les dimensions des glyphes..................................................................................156
15.4.8 L'paisseur de tige horizontale..............................................................................156
15.4.9 La hauteur des glyphes majuscules.......................................................................156
15.4.10 La hauteur des glyphes minuscules.....................................................................156
15.4.11 La ligne de base infrieure..................................................................................157
15.4.12 La ligne de base mathmatique...........................................................................157
15.4.13 La bote de circonscription maximale.................................................................157
15.4.14 La hauteur maximale sans accent........................................................................157
15.4.15 La profondeur maximale sans accent..................................................................157
15.4.16 Le nombre Panose1...........................................................................................158
15.4.17 L'tendue des caractres ISO 10646...................................................................158
15.4.18 La ligne de base suprieure.................................................................................158
15.4.19 L'paisseur de tige verticale................................................................................158
15.4.20 L'angle d'inclinaison vertical...............................................................................158
Table des matires

15.5 L'algorithme de correspondance de police............................................................................159
15.5.1 Les correspondances entre valeurs de graisse et les noms de police....................160
15.5.2 Exemples de correspondances de police...............................................................161
16 Le texte..................................................................................................................................................163
16.1 L'alina : la proprit 'textindent'........................................................................................163
16.2 L'alignement : la proprit 'textalign'..................................................................................163
16.3 La dcoration.........................................................................................................................164
16.3.1 Trait endessous, trait audessus, rayure et clignotement: la proprit
'textdecoration'..............................................................................................................164
16.3.2 Les ombrages de texte : la proprit 'textshadow'...............................................164
16.4 L'interlettrage et l'espacemot : les proprits 'letterspacing' et 'wordspacing'................166
16.5 La capitalisation : la proprit 'texttransform'.....................................................................167
16.6 Les blancs : la proprit 'whitespace'..................................................................................167
17 Les tables...............................................................................................................................................169
17.1 Introduction aux tables..........................................................................................................169
17.2 Le modle de table de CSS....................................................................................................170
17.2.1 Les objets de table anonymes................................................................................171
17.3 Les slecteurs de colonne......................................................................................................172
17.4 Les tables dans le modle de mise en forme visuel...............................................................173
17.4.1 La position et l'alignement de la lgende..............................................................173
17.5 La disposition visuelle des contenus de la table....................................................................175
17.5.1 Les couches de la table et la transparence.............................................................176
17.5.2 Les algorithmes de largeur de table : la proprit 'tablelayout'...........................177
17.5.3 Les algorithmes de la hauteur de table..................................................................179
17.5.4 L'alignement horizontal dans une colonne............................................................180
17.5.5 Les effets dynamiques des ranges et colonnes....................................................181
17.6 Les bordures..........................................................................................................................181
17.6.1 Le modle des bordures spares..........................................................................182
17.6.2 Le modle des bordures fusionnes......................................................................183
17.6.3 Les styles de bordure.............................................................................................185
17.7 Le rendu auditif des tables.....................................................................................................186
17.7.1 Les enttes parles : la proprit 'speakheader'................................................186
18 L'interface utilisateur.............................................................................................................................189
18.1 Les curseurs : la proprit 'cursor'.........................................................................................189
18.2 Les prfrences de couleur de l'utilisateur............................................................................189
18.3 Les prfrences de police de l'utilisateur...............................................................................191
18.4 Les contours dynamiques : la proprit 'outline'...................................................................191
18.4.1 Les contours et la slection [ndt. focus]................................................................192
18.5 La magnification....................................................................................................................192
19 Les feuilles de styles auditives..............................................................................................................193
19.1 Introduction aux feuilles de styles auditives.........................................................................193
19.2 La proprit de volume : 'volume'.........................................................................................193
19.3 La proprit de parole : 'speak'..............................................................................................194
19.4 Les proprits de pause : 'pausebefore', 'pauseafter' et 'pause'..........................................194
19.5 Les proprits de signal : 'cuebefore', 'cueafter' et 'cue'....................................................195
19.6 La proprit de mixage : 'playduring'..................................................................................196
19.7 Les proprits spatiales : 'azimuth' et 'elevation'...................................................................197
19.8 Les proprits des caractristiques des voix : 'speechrate', 'voicefamily', 'pitch',
'pitchrange', 'stress' et 'richness'..................................................................................................198
19.9 Les proprits de diction : 'speakpunctuation' et 'speaknumeral'......................................201
Appendices.............................................................................................................................................................203
Appendice A : Un exemple de feuille de style pour HTML 4.0................................................................203
Appendice B : Les changements depuis CSS1...........................................................................................205
B.1 Les nouvelles fonctionnalits.................................................................................................205
B.2 La mise jour des descriptions...............................................................................................205
B.3 Les changements smantiques depuis CSS1..........................................................................205
Appendice C : Les notes pour l'implmentation et la mise en uvre des polices......................................207
C.1 Un glossaire pour les polices..................................................................................................207
C.2 Le tlchargement des polices................................................................................................209
C.3 La signification des chiffres Panose.......................................................................................209
C.4 La dduction des tendues Unicode pour TrueType..............................................................212
C.5 La gnration automatique des descripteurs...........................................................................215
Appendice D : La grammaire de CSS2......................................................................................................216
D.1 La grammaire..........................................................................................................................216
D.2 Le scanner lexical...................................................................................................................217
Table des matires

D.3 La comparaison entre les atomisations de CSS2 et CSS1......................................................218
Appendice E : Rfrences..........................................................................................................................220
E.1 Les rfrences normatives.......................................................................................................220
E.2 Les rfrences informatives....................................................................................................221
Appendice F : Index des proprits............................................................................................................223
Appendice G : Index des descripteurs........................................................................................................231
Recommandation CSS2 du W3C en version franaise

Statut du document traduit
Ceci est une traduction de la Recommandation du W3C portant sur le deuxime niveau de l'implmentation des
feuilles de style pour le Web (Cascading Style Sheets, level 2).
Cependant ce n'est pas la version officielle en franais de la Recommandation. Seul le document original en
anglais a valeur de norme. On peut l'obtenir : http://www.w3.org/TR/1998/RECCSS219980512.
Avertissement
Des erreurs ont pu survenir malgr le soin apport ce travail.
Notes sur la traduction

Certains concepts sont difficiles rendre en franais ou peuvent ncessiter une explication, aussi les expressions
originales en anglais viennent parfois en renfort dans le texte sous cette forme :
ex. traduction [ndt. translation]
Cette version franaise intgre toutes les corrections survenues depuis la premire parution de la recommandation
en 1998. Elle est ainsi jour en date du 24 septembre 2001 (voir la liste des dernires modifications l'adresse
http://www.w3.org/Style/css2updates/RECCSS219980512errata.html).
Adresse : <http://www.yoyodesign.org/doc/w3c/css2/cover.html>
Date de traduction : 27 septembre 2001
Traducteur : J.J.SOLARI <jjsolari@pobox.com>
Relecteur :
Autres documents traduits

On peut consulter les traductions en franais d'autres documents du W3C
http://www.w3.org/Consortium/Translation/French
Notice lgale
Copyright 19942001 World Wide Web Consortium,
(Massachusetts Institute of Technology,
Institut National de Recherche en Informatique et en Automatique,
Keio University).
Tous droits rservs. Consulter la notice de copyright pour les productions du W3C.
RECCSS219980512
Feuilles de style en cascade, niveau 2
Les feuilles de style en cascade, niveau 2

Spcification CSS2
Recommandation du W3C du 12 mai 1998
Cette version :
http://www.w3.org/TR/1998/RECCSS219980512
Dernire version :
http://www.w3.org/TR/RECCSS2
Version prcdente :
http://www.w3.org/TR/1998/PRCSS219980324
diteurs :
Bert Bos <bbos@w3.org>
Hkon Wium Lie <howcome@w3.org>
Chris Lilley <chris@w3.org>
Ian Jacobs <ij@w3.org>
Rsum
Cette spcification dfinit CSS2 : les feuilles de style en cascade, niveau 2. CSS2 est un langage de feuille de style
qui permet aux auteurs et aux lecteurs de lier du style (ex. les polices de caractres, l'espacement et un signal
auditif) aux documents structurs (ex. documents HTML et applications XML). En sparant la prsentation du
style du contenu des documents, CSS2 simplifie l'dition pour le Web et la maintenance d'un site.
CSS2 est construit sur CSS1 (voir [CSS1]), ainsi toute feuille de style valide en CSS1 est galement valide en
CSS2 trs peu d'exceptions prs. CSS2 prvoit des feuilles de style lies un mdia spcifique ce qui autorise
les auteurs prsenter des documents sur mesure pour les navigateurs visuels, les appareils auditifs, les
imprimantes, les lecteurs en Braille, les appareils portatifs, etc. Cette spcification introduit aussi les notions de
positionnement du contenu, de tlchargement des polices, de mise en forme des tables, de fonctions
d'internationalisation, de compteurs et de numrotage automatiques et quelques proprits concernant l'interface
utilisateur.
Statut de ce document
Ce document a t corrig par les membres du W3C et d'autres parties intresses et le Directeur l'a approuv
comme Recommandation du W3C. C'est un document stable qui peut tre utilis comme matriel de rfrence ou
cit comme norme de rfrence par un autre document. En produisant cette Recommandation, le W3C entend
attirer l'attention sur une spcification et en promouvoir un large dploiement. Ceci multiplie la fonctionnalit et
l'interoprabilit du Web.
Une liste des Recommandations actuelles du W3C et d'autres documents techniques peut tre trouve
http://www.w3.org/TR.
Les discussions publiques sur les fonctions de CSS ont lieu sur la liste wwwstyle@w3.org.
Formats disponibles
La spcification CSS2 est disponible dans les formats suivants :
HTML :
http://www.w3.org/TR/1998/RECCSS219980512
fichier texte entier :
http://www.w3.org/TR/1998/RECCSS219980512/css2.txt,
HTML sous la forme d'un fichier compress .tgz :
http://www.w3.org/TR/1998/RECCSS219980512/css2.tgz,
HTML sous la forme d'un fichier .zip (ce n'est pas un fichier '.exe') :
http://www.w3.org/TR/1998/RECCSS219980512/css2.zip,
sous la forme d'un fichier PostScript .ps.gz :
http://www.w3.org/TR/1998/RECCSS219980512/css2.ps.gz,
et sous la forme d'un fichier PDF :
http://www.w3.org/TR/1998/RECCSS219980512/css2.pdf.

Pour toute contestation sur les diverses formes de la spcification, on considre
http://www.w3.org/TR/1998/RECCSS219980512 le lieu de la version dfinitive.
Langues disponibles
La version anglaise de la spcification est la seule version officielle. Cependant, pour des versions traduites en
d'autres langues voir http://www.w3.org/Style/css2updates/translations.html.
Errata
La liste des erreurs connues de cette spcification se trouve
http://www.w3.org/Style/css2updates/RECCSS219980512errata.html. Merci de faire part d'erreurs
ventuelles dans ce document css2editors@w3.org.
Copyright 1998 W3C (MIT, INRIA, Keio ), Tous droits rservs.
1 propos de la spcification CSS2

1.1 Lire la spcification
La rdaction de cette spcification tient compte de deux types de lecteurs : les auteurs de feuilles de style et les
personnes charges de leur implmentation. Nous esprons que la spcification fournira aux auteurs les moyens
d'crire des documents efficaces, attractifs et accessibles, sans pour autant les noyer dans le dtail de la mise en
uvre des CSS. Cependant, les matres d'uvre devraient y trouver le ncessaire pour construire des agents
utilisateurs conformes.
Le document commence par une prsentation gnrale des feuilles de style pour devenir de plus en plus technique
et spcifique vers la fin. L'accs rapide aux informations est facilit au travers d'un sommaire gnral, de
sommaires spcifiques en dbut de chacun des chapitres et d'un index, la fois dans les versions lectroniques et
imprimes.
La spcification tient galement compte de ces deux modes de prsentation. Bien que cellesci soient sans doute
similaires, le lecteur remarquera quelques nuances. Par exemple, les liens ne fonctionnent (videmment) pas dans
la version imprime et la numrotation des pages n'apparat pas dans la version lectronique. En cas de doute, la
version lectronique du document fait autorit.
1.2 Organisation de la spcification

Le document est organis selon le dcoupage suivant :
Chapitre 2 : Une introduction CSS2
L'introduction inclut un bref tutoriel de CSS2 et une discussion des principes de construction sousjacents
CSS2.
Chapitre 3 20 : Manuel de rfrence de CSS2.
Le corps de ce manuel reprsente le langage de rfrence de CSS2. On y dfinit ce qu'on peut mettre dans
une feuille de style (syntaxe, proprits, valeurs de proprits) et comment les agents utilisateurs doivent
interprter les feuilles de style pour prtendre la conformit.
Appendices :
Les appendices contiennent des renseignements sur un exemple de feuille de style pour HTML 4.0, les
changements depuis CSS1, la mise en uvre et les notes d'valuation, la grammaire de CSS2, une liste de
rfrences normatives et informatives et trois index : un pour les proprits, un autre pour les descripteurs.
1.3 Conventions
1.3.1 Les conventions pour les lments et attributs dans le langage du document
Les noms des proprits CSS, des descripteurs et des pseudoclasses sont placs entre guillemets simples.
Les valeurs de CSS sont places entre guillemets simples.
Les noms des lments du langage du document sont en majuscules.
Les noms des attributs du langage du document sont en minuscules et entre guillemets doubles.
1.3.2 Les dfinitions des proprits CSS
Chaque dfinition d'une proprit CSS commence par un rsum des informations cls comme dans ce qui suit :
'nom de la proprit'
Valeur :
Valeur initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
valeurs et syntaxe lgales

valeur initiale
les lments sur lesquels agit la proprit
si oui ou non la proprit est hrite
comment interprter les valeurs en pourcentage
quels groupes de mdias s'adresse la proprit
Valeur
Cette partie spcifie le jeu de valeurs valides pour la proprit. On dsigne les types de valeur de plusieurs faons
avec :
5

1. des valeurs de motcl (ex. auto, disc, etc.) ;
2. les types de donnes de base entre "<" et ">" (ex. <longueur>, <pourcentage>, etc.). Dans la version
lectronique, chaque instance d'un type de donnes offre un lien vers sa dfinition ;
3. les types dont les valeurs lgales sont les mmes que celles des proprits qui portent le mme nom (ex.
<'borderwidth'>, <'backgroundattachment'>, etc.). Dans ce cas, on donne le nom de ce type (complet
avec guillemets) entre "<" et ">" (ex. <'borderwidth'>). Dans la version lectronique, chaque instance de
ce type des nonterminaux offre un lien vers la proprit correspondante ;
4. des nonterminaux qui n'ont pas le mme nom que celui de la proprit. Dans ce cas, le nom
nonterminal se met entre "<" et ">" comme dans <borderwidth>. Remarquer la distinction entre
<borderwidth> et <'borderwidth'>, le dernier tant dfini selon le premier. La dfinition d'un
nonterminal se trouve ct de sa premire apparition dans la spcification. Dans la version
lectronique, chaque instance de ce type offre un lien vers la dfinition de la valeur correspondante.
D'autres mots sont des motscls qui doivent apparatre littralement sans guillemets (ex. red) tout comme les
caractres barre oblique (/) et virgule.
Les valeurs sont ranges comme suit :
Plusieurs mots juxtaposs signifient que tous doivent survenir dans l'ordre donn ;
Une barre (|) distingue deux ou plusieurs alternatives : l'une seulement doit survenir ;
Une double barre (||) distingue deux ou plusieurs options : l'une ou plusieurs doivent survenir quel que soit
l'ordre ;
Les crochets ([ ]) servent au regroupement.
La juxtaposition a plus de poids que la double barre et la double barre que la barre. Les lignes suivantes sont ainsi
quivalentes :
a b
|
c || d e
[ a b ] | [ c || [ d e ]]
Chaque type, motcl ou groupe entre crochets peut tre suivi par l'un des modificateurs suivants :
Une astrisque (*) : ce qui prcde survient zro ou plusieurs fois ;
Un plus (+) : ce qui prcde survient une ou plusieurs fois ;
Un point d'interrogation (?) : ce qui prcde est facultatif ;
Une paire de nombres entre accolades ({A,B}) : ce qui prcde survient au moins A fois et au plus B fois.
L'exemple qui suit illustre diffrents types de valeur :
Valeur : N | NW | NE
Valeur : [ <longueur> | thick | thin ]{1,4}
Valeur : [<famillenom> , ]* <famillenom>
Valeur : <uri>? <couleur> [ / <couleur> ]?
Valeur : <uri> || <couleur>
Valeur initiale
Cette partie spcifie la valeur initiale de la proprit. Si la proprit est hrite, c'est la valeur donne l'lment
racine de l'arborescence du document. Concernant l'interaction entre les valeurs spcifies dans la feuille de style,
celles hrites et celles initiales, consulter le chapitre sur la cascade.
S'applique
Cette partie donne la liste des lments concerns par la proprit. Chacun des lments est suppos avoir toutes
les proprits, mais quelques unes d'entre elles ne produisent aucun effet sur certains types d'lments. Par
exemple, 'whitespace' ne touche que les lments de type bloc.
Hrite
Cette partie indique si la valeur de la proprit est hrite d'un lment anctre. Concernant l'interaction entre les
valeurs spcifies dans la feuille de style, celles hrites et celles initiales, consulter le chapitre sur la cascade.
Pourcentage
Cette partie indique comment interprter les valeurs exprimes en pourcentage, le cas chant, de la proprit. La
mention "sans objet" signifie que la proprit n'admet pas de valeurs en pourcentage.
6

Mdias
Cette partie indique les groupes de mdias qui sont concerns par la proprit. Les conditions de conformit
obligent les agents utilisateurs respecter cette proprit si ceuxci supportent les types de mdia indiqus par ces
groupes de mdias.
1.3.3 Les proprits raccourcies
Quelques proprits sont des proprits raccourcies, les auteurs pouvant spcifier en une seule proprit, les
valeurs de plusieurs autres proprits.
Ainsi, la proprit 'font' est une proprit raccourcie qui permet de fixer en une seule fois les valeurs de
'fontstyle', 'fontvariant', 'fontweight', 'fontsize', 'lineheight' et 'fontfamily'.
Quand des valeurs sont absentes de la forme raccourcie, chacune des proprits "manquantes" revt sa valeur
intiale (voir le chapitre sur la cascade).
Exemple(s) :
Soient les multiples rgles de style de cet exemple :
H1 {
fontweight: bold;
fontsize: 12pt;
lineheight: 14pt;
fontfamily: Helvetica;
fontvariant: normal;
fontstyle: normal;
fontstretch: normal;
fontsizeadjust: none
}
on peut les rcrire en une seule proprit raccourcie :

H1 { font: bold 12pt/14pt Helvetica }
Ici, 'fontvariant', 'fontstretch', 'fontsizeadjust' et 'fontstyle' prennent leur valeur initiale.

1.3.4 Les notes et les exemples
Tous les exemples qui illustrent un usage interdit sont reprs avec l'expression "NON ADMIS".
Tous les exemples HTML sont conformes au DTD HTML 4.0 strict (tel que dfini dans [HTML40]), moins
qu'une autre Dclaration de Type de Document soit prcise.
Les notes sont seulement informatives.
Les exemples et les notes sont indiqus dans la source HTML de la spcification pour un rendu particulier par les
agents utilisateurs CSS1.
1.3.5 Les images et les descriptions longues
La plupart des illustrations de la version lectronique sont accompagns de "descriptions longues" de leur
reprsentation. Un "[D]" droite de l'image signale un lien vers une description longue.
Les images et descriptions longues sont seulement informatives.
1.4 Remerciements
Cette spcification est le produit du Groupe de Travail du W3C sur les feuilles de style en cascade et les proprits
de formatage. En plus des diteurs du prsent document, voici les membres de ce groupe : Brad Chase
(Bitstream), Chris Wilson (Microsoft), Daniel Glazman (Electricit de France), Dave Raggett (W3C/HP), Ed
Tecot (Microsoft), Jared Sorensen (Novell), Lauren Wood (SoftQuad), Laurie Anna Kaplan (Microsoft), Mike
Wexler (Adobe), Murray Maloney (Grif), Powell Smith (IBM), Robert Stevahn (HP), Steve Byrne (JavaSoft),
Steven Pemberton (CWI), Thom Phillabaum (Netscape), Douglas Rand (Silicon Graphics), Robert Pernett
(Lotus), Dwayne Dicks (SoftQuad), et Sho Kuwamoto (Macromedia). Nous les remercions de leurs efforts
assidus.
7

Un certains nombre d'experts invits par le Groupe de Travail ont galement contribu : George Kersher, Glenn
Rippel (Bitstream), Jeff Veen (HotWired), Markku T. Hakkinen (The Productivity Works), Martin Drst (W3C,
anciennement Universitt Zrich), Roy Platon (RAL), Todd Fahrner (Verso), Tim Boland (NIST), Eric Meyer
(Case Western Reserve University) et Vincent Quint (W3C).
Le chapitre des polices sur le web a t fortement marqu par Brad Chase (Bitstream), David Meltzer (Microsoft
Typography) et Steve Zilles (Adobe). Les personnes suivantes ont aussi fait des apports ce chapitre : Alex
Beamon (Apple), Ashok Saxena (Adobe), Ben Bauermeister (HP), Dave Raggett (W3C/HP), David Opstad
(Apple), David Goldsmith (Apple), Ed Tecot (Microsoft), Erik van Blokland (LettError), Franois Yergeau (Alis),
Gavin Nicol (Inso), Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf (Reuters), Paul Haeberli (SGI) et le
dernier Phil Karlton (Netscape).
Le chapitre sur les mdias pagins est en grande partie d Robert Stevahn (HP) et Stephen Waters (Microsoft).
Robert Stevahn (HP), Scott Furman (Netscape) et Scott Isaacs (Microsoft) furent des interlocuteurs cls pour le
positionnement en CSS.
Mike Wexler (Adobe) a crit la version prliminaire qui dcrit plusieurs des nouvelles fonctions de CSS2.
T.V. Raman (Adobe) a fait des contributions essentielles pour les feuilles de styles auditives [Aural Cascading
Style Sheets (ACSS)] et les concepts de prsentation auditive partir de ses travaux chez AsTeR (Audio System
For Technical Readings). Il a produit le premier jet de la spcification ACSS qui rgit la prsente spcification.
Les valeurs des proprits auditives dans l'exemple de feuille de style pour HTML 4.0 sont de son fait ; il les
utilise quotidiennement sur sa machine audio en conjonction avec Emacspeak et le navigateur Emacs du W3 (dont
l'auteur est William Perry, celuici a dj mis en uvre les extensions auditives pour le compte du W3).
Todd Fahrner (Verso) a examin les navigateurs anciens et modernes pour dvelopper l'exemple de feuille de style
de l'appendice.
Merci Jan Krrman, auteur de html2ps pour l'aide apporte la cration de la version PostScript de la
spcification.
Les personnes suivantes ont contribu au dveloppement de CSS2 via des rencontres lectroniques ou physiques :
Alan Borning, Robert Cailliau, Liz Castro, James Clark, Dan Connolly, Donna Converse, Daniel Dardailler, Al
Gilman, Daniel Greene, Scott Isaacs, Geir Ivarsy, Vincent Mallet, Kim Marriott, Brian Michalowski, Lou
Montulli, Henrik Frystyk Nielsen, Jacob Nielsen, Eva von Pepel, William Perry, David Siegel, Peter Stuckey et
Jason White.
Les discussions sur wwwstyle@w3.org ont influenc plusieurs questions capitales de CSS. Nous voudrions
remercier spcialement Bjorn Backlund, Todd Fahrner, Lars Marius Garshol, Sue Jordan, Ian Hickson, Susan
Lesch, Andrew Marshall, MegaZone, Eric Meyer, Russell O'Connor, David Perrell, Liam Quinn, Jon Seymour,
Neil St. Laurent, Taylor, Brian Wilson et Chris Wilson de leur participation.
Beaucoup de remerciements au Groupe de Travail de Correction Technique de l'Initiative pour l'Accessibilit au
Web, Protocoles et Formats [Web Accessibility Initiative Protocols and Formats Technical Review (WAI PF)]
pour son aide amliorer l'accessibilit dans CSS2.
Un grand merci Philippe Le Hgaret, dont le validateur CSS a permis de fournir des exemples corrects et une
grammaire raisonnable.
Remerciement spcial Arnaud Le Hors, dont l'apport technique fait que ce document fonctionne.
Adam Costello a amlior cette spcification grce une relecture dtaille.
Enfin, merci Tim BernersLee sans qui rien de tout ceci n'aurait t possible.
1.5 Notice de copyright

Copyright 1997 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de
Recherche en Informatique et en Automatique, Keio University). Tous droits rservs.
Les documents sur le site du W3C sont prsents par les dtenteurs du copyright sous la licence suivante. Par
l'obtention, l'usage et/ou la copie de ce document ou bien du document du W3C auquel cette dclaration est lie,
vous reconnaissez avoir lu, compris et vous soumettre aux termes et conditions suivantes :
8

La permission d'utiliser, copier et distribuer le contenu de ce document ou du document du W3C auquel cette
dclaration est lie, est prsentement accorde pour tout medium, dans tout but et sans redevance ni royalties,
condition d'inclure ce qui suit sur TOUTES les copies du document ou parties de celuici que vous utilisez :
1. Un lien ou URI vers le document original du W3C
2. La notice de copyright prexistante de l'auteur original, et s'il n'y en a pas, une notice de la forme :
"Copyright World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de
Recherche en Informatique et en Automatique, Keio University). Tous droits rservs."
3. S'il existe, le STATUT du document du W3C.
Si l'espace le permet, le texte complet de cette NOTICE devrait tre fourni. Ainsi que les crdits envers les
dtenteurs du copyright pour tout logiciel, documents ou autres articles ou produits que vous crez suivant
l'implmentation de tout ou partie de ce document.
Aucun droit de crer des modifications ou drivs n'est autoris conformment cet accord.
CE DOCUMENT EST FOURNI "TEL QUEL", ET LES DTENTEURS DU COPYRIGHT NE FONT
AUCUNE DCLARATION NI GARANTIE, EXPRESSE OU IMPLICITE, EN PARTICULIER, MAIS
NON LIMITATIVEMENT, DE GARANTIE DE COMMERCIABILIT, D'ADQUATION UN
USAGE PARTICULIER, DE NONINFRACTION OU D'AUTORISATION ; QUE LE CONTENU DE
CE DOCUMENT SOIT ADAPT QUELQUE USAGE QUE CE SOIT ; NI QUE LES
IMPLMENTATIONS DE CE CONTENU N'ENFREINDRONT LES BREVETS, COPYRIGHTS,
MARQUES DPOSES OU AUTRES DROITS DE TIERCES PARTIES.
LES DTENTEURS DU COPYRIGHT NE SERONT RESPONSABLES D'AUCUN DOMMAGE
DIRECT OU INDIRECT, NI DES CONSQUENCES RSULTANT DE TOUTE UTILISATION DE CE
DOCUMENT OU DE L'EXCUTION OU IMPLMENTATION DE SON CONTENU.
Le nom des personnes ou des marques dtentrices du copyright ne doivent PAS tre utilis pour la publicit ou
pour faire connatre ce document ou son contenu sans une permission crite spcifique au pralable. Les droits de
reproduction de ce document restent acquis aux dtenteurs du copyright.
2 Introduction CSS2
2.1 Un bref tutoriel de CSS2 pour HTML
Nous allons montrer dans ce tutoriel combien il est facile de raliser des feuilles de style simples. Pour cela, vous
devrez connatre un peu HTML (voir [HTML40]) et une terminologie de base de l'impression numrique.
Commenons par un petit document HTML :
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>La page personnelle de Bach</TITLE>
</HEAD>
<BODY>
<H1>La page personnelle de Bach</H1>
<P>JeanSbastien Bach tait un compositeur prolifique.
</BODY>
</HTML>
Pour rendre la couleur du texte des lments H1 bleu, vous pouvez crire la rgle de feuille de style suivante :
H1 { color: blue }
Une rgle CSS consiste en deux parties principales : un slecteur ('H1') et une dclaration ('color: blue'). Celleci
se compose son tour de deux parties : une proprit ('color') et une valeur ('blue'). Bien que cet exemple n'agit
que sur une seule des proprits ncessaires au rendu d'un document HTML, cela suffit pour qu'elle soit qualifie
de feuille de style. Combine avec d'autres feuilles de styles (la combinaison de feuilles de style est une fonction
fondamentale des CSS), elle agira sur la prsentation finale du document.
La spcification HTML 4.0 dfinit la faon de relier les feuilles de style un documents HTML : soit par
incorporation dans celuici, soit par appel une feuille de style externe. Pour l'incorporation, on utilise l'lment
STYLE :
<HTML>
<HEAD>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Pour une souplesse d'utilisation maximale, on recommande aux auteurs l'usage de feuilles de style externes. On
peut en changer sans modifier la source HTML du document et les partager entre plusieurs documents. Pour faire
le lien vers une feuille de style externe, on emploie l'lment LINK :
<HTML>
<HEAD>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
</BODY>
</HTML>
L'lment LINK spcifie :

le type de lien : vers une "feuille de style".
la location de celleci au travers de l'attribut "href"
10

le type de la feuille de style lie : "text/css".
Pour montrer la relation troite entre feuille de style et balisage structur, nous utiliserons l'lment STYLE pour
ce tutoriel. Ajoutons des couleurs :
<HTML>
<HEAD>
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Deux rgles composent maintenant la feuille de style : la premire spcifie la couleur rouge ('red') pour l'lment
BODY et la seconde la couleur bleu ('blue') pour l'lment H1. Comme aucune valeur de couleur n'est spcifie
pour l'lment P, celuici hrite de la couleur de son lment parent, ici BODY. L'lment H1 est aussi un
lment enfant de BODY, mais la seconde rgle prvaut sur la valeur hrite. En CSS il y a souvent de tels
conflits entre diffrentes valeurs, cette spcification dcrit leur rsolution.
CSS2 comporte plus de 100 diffrentes proprits, dont 'color'. Voyons quelques unes d'entre elles :
<HTML>
<HEAD>
BODY {
fontfamily: "Gill Sans", sansserif;
fontsize: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
En premier lieu, on remarque plusieurs dclarations qui sont runies l'intrieur d'un bloc dlimit par des
accolades ({...}), qu'elles sont spares par des pointvirgules (;), la dernire pouvant aussi se terminer par un
pointvirgule.
La premire dclaration sur l'lment BODY spcifie la famille de police "Gill Sans". Si celleci n'tait pas
disponible, l'agent utilisateur (souvent un "navigateur") utilisera la famille de polices 'sansserif' qui est l'une des
cinq familles de polices gnriques reconnues pour chacun des agents utilisateurs. Les lments enfants de BODY
hritent de la valeur de la proprit 'fontfamily'.
La seconde dclaration fixe la taille de la police de BODY 12 points. L'unit "point" est couramment employe
en typographie d'impression pour mesurer le corps d'une police et d'autres longueurs. C'est un exemple d'unit
absolue qui ne varie pas en fonction de l'environnement.
La troisime dclaration s'appuie sur une unit relative qui varie en fonction de son entourage. L'unit "em" se
rfre la taille de la police de l'lment. Le rsultat, dans ce cas, sera que les marges autour de l'lment BODY
seront trois fois plus grandes que la taille de la police.
2.2 Un bref tutoriel de CSS2 pour XML

On peut utiliser CSS avec chaque format de document structur, par exemple avec des applications de eXtensible
Markup Language [XML10]. En fait, XML est plus dpendant des feuilles de style que HTML, car les auteurs
peuvent introduire des lments propres que les agents utilisateurs ne savent pas interprter.
Voici un fragment XML simple :
11

<ARTICLE>
<HEADLINE>La rencontre de Frdric le Grand et de Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
Un soir, alors qu'il prparait sa
<INSTRUMENT>flte</INSTRUMENT> et que ses
musiciens taient runis, un officier lui apporta
la liste des trangers qui venaient d'arriver.
</PARA>
</ARTICLE>
Pour rendre ce fragment la manire d'un document, nous devons d'abord dclarer lesquels de ces lments sont
de type enligne (c.d. qui ne provoquent pas de fins de lignes) et de type bloc (c.d. qui provoquent des fins
de lignes).
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
La premire rgle stipule que INSTRUMENT est de type enligne et la seconde, avec une liste de slecteurs
spars par des virgules, que tous les autres lments sont de type bloc.
Pour lier une feuille de style un document XML, l'une des propositions consiste utiliser une instruction de
traitement :
<?xmlstylesheet type="text/css" href="bach.css"?>
<ARTICLE>
<HEADLINE>La rencontre de Frdric le Grand et de Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
Un soir, alors qu'il prparait sa
<INSTRUMENT>flte</INSTRUMENT> et que ses
musiciens taient runis, un officier lui apporta
la liste des trangers qui venaient d'arriver.
</PARA>
</ARTICLE>
Ce qu'un agent visuel pourrait rendre par :
Remarquer que le mot "flte" reste dans le paragraphe puisqu'il s'agit du contenu de l'lment de type enligne
INSTRUMENT.
Cependant, le texte n'est pas format de la faon souhaite. Par exemple, le corps de la police du titre devrait tre
plus grand que celui du reste du texte et aussi le nom de l'auteur pourrait tre en italique :
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { fontsize: 1.3em }
AUTHOR { fontstyle: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
Ce qu'un agent visuel pourrait rendre ainsi :
12

Plus on ajoute de rgles la feuille de style, plus on peut amliorer la prsentation du document.
2.3 Le modle de traitement de CSS2

Ce chapitre prsente un modle de fonctionnement possible pour un agent supportant CSS. Ce n'est qu'un modle
conceptuel, les implmentations effectives pouvant varier.
Dans ce modle l'agent utilisateur traite une source en parcourant les tapes suivantes :
1. Parcourir le document source en crant une arborescence de ce document.
2. Identifier le type de mdia cible.
3. Rechercher toutes les feuilles de style associes au document et spcifies pour le type de mdia cible.
4. Annoter chacun des lments de l'arborescence du document et assigner une valeur unique chacune des
proprits en rapport avec le type de mdia cible. On assigne des valeurs aux proprits selon le
mcanisme dcrit dans le chapitre sur la cascade et l'hritage.
Le calcul de ces valeurs dpend en partie du choix de l'algorithme de formatage appropri au type de
mdia cible. Par exemple, si le medium cible est un cran, les agents utilisateurs appliquent le le modle
de formatage visuel. Si le medium de destination est une page imprimer, ils appliquent le modle de la
page. S'il s'agit d'un appareil de rendu auditif (ex. synthtiseur de parole), ils appliquent alors le modle
pour un rendu auditif.
5. Gnrer une structure de formatage partir de l'arborescence annote du document. Souvent, la
structure de formatage ressemble beaucoup celle de l'arborescence du document, mais elle peut aussi en
diffrer de faon significative, notamment quand les auteurs font usage de pseudolments et de contenu
gnr. Premirement, il n'est pas indispensable que la structure de formatage revte "l'aspect d'un arbre",
la nature de la structure dpendant de l'implmentation. Deuximement, la structure de formatage peut
contenir plus ou moins d'informations que l'arborescence du document. Par exemple, si la proprit
'display' d'un lment de l'arborescence a la valeur 'none', cet lment ne gnrera rien dans la structure de
formatage. l'inverse, un lment de liste peut gnrer plus d'informations : le contenu de l'lment de
liste et l'information de son style (ex. une puce, une image).
Noter que le client CSS ne modifie pas l'arborescence du document pendant cette phase. En particulier, le
contenu gnr par les feuilles de styles ne repasse pas dans le processeur du langage du document (ex.
pour un nouveau traitement).
6. Transfrer la structure de formatage vers le medium cible (ex. imprimer le rsultat, l'afficher sur un cran,
le transformer en parole, etc.).
L'tape 1 n'entre pas dans le cadre de cette spcification (voir, par exemple, [DOM]).
Les tapes 2 5 constituent le principal objet de cette spcification.
L'tape 6 n'entre pas non plus dans ce cadre.
2.3.1 Le canevas
Quel que soit le mdia, le terme canevas dsigne "l'espace dans lequel s'inscrit la structure de formatage". Le
canevas est infini pour chacune des dimensions de cet espace, mais le rendu a lieu gnralement dans une rgion
finie du canevas. Celleci est tablie par l'agent utilisateur selon le medium cible. Ainsi, un rendu sur cran
impose en gnral aux agents utilisateurs une largeur minimum qui est initialement dtermine partir de l'espace
de visualisation. Un rendu sur une page leur impose des contraintes de largeur et de hauteur. Les agents
utilisateurs auditif peuvent imposer des limites dans un espace audio mais pas de temps.
2.3.2 Le modle d'adressage de CSS2
Grce aux slecteurs et proprits de CSS2, les feuilles de style permettent une rfrence aux parties d'un
document ou d'un agent utilisateur, soit :
aux lments dans l'arborescence du document et certaines de leurs relations (voir le chapitre sur les
slecteurs) ;
aux attributs des lments dans l'arborescence du document et leurs valeurs (voir le chapitre sur les
slecteurs d'attributs) ;
certaines parties du contenu d'un lment (voir les pseudolments :firstline et :firstletter) ;
13

aux lments de l'arborescence du document qui sont dans un tat donn (voir le chapitre sur les
pseudoclasses) ;
certains aspects du canevas o interviendra le rendu du document ;
certaines informations du systme (voir le chapitre sur l'interface utilisateur).
2.4 Les principes de construction de CSS

CSS2, comme CSS1 avant lui, est fond sur un ensemble de principes de construction :
Compatibilit ascendante et descendante. Les agents utilisateurs seront capable d'interprter des feuilles
de style CSS1. Dans l'autre sens, les agents utilisateurs CSS1 seront capables de lire une feuille de style
CSS2 en passant outre les instructions qui leur seront inconnues. galement, ceux qui n'ont aucun support
des feuilles de style seront capables d'afficher les documents pourvus de style. Bien sr, les amliorations
lies au style ne seront pas rendues, mais tout le contenu sera prsent ;
Complmentarit avec les documents structurs. Les feuilles de style compltent les documents
structurs (exp; HTML et XML) en fournissant des informations de style au texte balis. Un changement
dans la feuille de style ne devrait avoir que peu ou pas d'impact sur le balisage ;
Indpendance visvis de l'diteur, de la plateforme ou de l'appareil. Les feuilles de style autorisent une
indpendance des documents d'avec l'diteur, la plateforme et l'appareil, cependant CSS2 permet de
produire une feuille de style pour un groupe d'appareils (ex. imprimantes) ;
Facilit de maintenance. Lier des feuilles de style en partant des documents peut simplifier le travail de
maintenance des webmestres tout en conservant un aspect consistant pour l'ensemble du site. Par exemple,
s'il faut changer la couleur de fond lie l'identit d'une organisation, un seul fichier doit tre modifi ;
Simplicit. Bien que CSS2 soit plus complexe que CSS1, il s'agit d'un langage simple de style facile lire
et crire par un humain. Les proprits de style sont suffisamment indpendantes les unes des autres en
gnral pour qu'un effet donn ne puisse tre produit que d'une seule faon ;
Performance du rseau. CSS fournit un moyen compact pour la reprsentation d'un contenu. Compar
aux fichiers images ou audio, souvent employs par les auteurs pour obtenir certains effets de rendu, les
feuilles de style diminuent la plupart du temps la taille des fichiers. Aussi, les connexions au rseau sont
moins nombreuses, ce qui augmente d'autant les performances de celuici ;
Flexibilit. On peut donner du style un contenu de plusieurs manires. La fonction cl rside dans la
possibilit de modifier en cascade les informations de style spcifies dans la feuille de style par dfaut
(de l'agent utilisateur), les feuilles de style de l'utilisateur, les feuilles de style lies, l'entte du document
et dans les attributs des lments formant le corps du document ;
Richesse. En donnant aux auteurs un jeu tendu d'effets de reprsentation, on accroit la richesse du Web
en tant que moyen d'expression. Les auteurs taient dans l'attente de fonctionalits qui taient communes
dans les applications de publication numrique et de prsentation. Quelques uns des effets de rendu
demands ne satisfont pas au principe d'indpendance visvis des appareils, cependant CSS2 rpond
pour une grande part aux esprances des auteurs ;
Corrlations avec d'autres langages. Les proprits dcrites par cette spcification forment un jeu
consistant pour le modle de formatage des prsentations visuelles et auditives. Le langage CSS permet
d'accder ce modle mais les corrlations avec d'autres langages sont aussi possibles. Par exemple, un
programme JavaScript peut changer de faon dynamique la valeur de la proprit 'color' d'un lment
donn ;
Accessibilit. Plusieurs fonctions de CSS faciliteront l'accs au Web des utilisateurs avec diverses
incapacits :
14

Avec les proprits jouant sur l'apparence des polices, il est permis aux auteurs de ne plus recourir
du texte plac dans des images bitmap, ce qui le rend inaccessible ;
Les proprits de positionnement leur permettent de ne plus avoir utiliser d'astuces de balisage
(ex. les images invisibles) pour forcer la mise en page ;
Les utilisateurs qui ont des besoins de prsentation particuliers peuvent remplacer les feuilles de
style de l'auteur, c'est le sens des rgles !important ;
La nouvelle valeur 'inherit' pour chacune des proprits renforce le caractre gnral de la cascade
et autorise des ajustements de style plus faciles et cohrents ;
Grce l'amlioration du support aux mdias, que ce soient les groupes de mdias ou les types de
mdia braille, en relief ou tty, les utilisateurs et auteurs pourront avoir des pages adaptes ces
appareils ;
Les proprits auditives permettent de contrler les sorties voix et audio ;
Les slecteurs d'attribut, la fonction 'attr()' et la proprit 'content' donnent un accs d'autres
versions du contenu ;
Les compteurs et le numrotage de chapitre/paragraphe peuvent amliorer la navigation dans le
document et conomiser sur l'espace des alinas (important pour les appareils braille). Les
proprits 'wordspacing' et 'textindent' liminent le besoin de rajouter des blancs dans le
document.
Note : Pour de plus amples informations sur la faon de produire des documents accessibles avec CSS et
HTML, consulter [WAIPAGEAUTH].
15
3 La conformit : obligations et recommandations

3.1 Dfinitions
Nous voyons dans ce chapitre la spcification formelle de CSS2, en commenant par le contrat qui lie les auteurs,
les utilisateurs et ceux qui la mettent en uvre.
Dans ce document, les motscl "DOIT", "NE DOIT PAS", "REQUIS", "DEVRA", "NE DEVRA PAS",
"DEVRAIT", "NE DEVRAIT PAS", "RECOMMEND", "PEUT" et"FACULTATIF" doivent tre interprts tels
que dcrits dans RFC 2119 (voir [RFC2119]). Cependant, par souci de lisibilit, ces mots n'apparatront pas ici
en majuscules.
Par moment, il est fait une recommandation de bon usage aux auteurs et pour les agents utilisateurs. Ces
recommandations ne sont pas normatives et la conformit avec la spcification ne dpend pas de leur application.
On les reconnaitra des tournures de phrases similaires "Nous recommandons... ", "Cette spcification
recommande... ", etc.
Feuille de style
Un jeu de dclarations qui spcifient la prsentation d'un document ;
Les feuilles de style peuvent provenir de trois sources : de l'auteur, de l'utilisateur et de l'agent utilisateur.
Leur interaction est dcrite dans le chapitre sur la cascade et l'hritage ;
Feuille de style valide
La validit d'une feuille de style est fonde sur le niveau de CSS utilis. Toute feuille de style valide en
CSS1 l'est aussi en CSS2. Cependant, quelques changements intervenus depuis CSS1 verront certaines
feuilles de style CSS1 prendre un sens diffrent en CSS2 ;
Une feuille de style valide en CSS2 doit suivre la grammaire de CSS2. En outre, elle ne doit contenir que
les rglesat, les noms de proprits et les valeurs de cellesci qui sont dfinis pour cette spcification.
Une construction illgale (invalide) de l'un parmi ceuxci entrane son invalidit ;
Le document source
Le document auquel se rfrent une ou plusieurs feuilles de style. Ce document est format dans un
langage donn qui permet de le reprsenter comme une arborescence de ses lments. Chacun de ces
lments a un nom qui identifie son type avec en option le nombre de ses attributs et un contenu (qui peut
tre vide) ;
Langage du document
Le langage utilis pour formater le document source (ex. HTML ou une application en XML) ;
lment
Un terme issu de SGML (voir [ISO8879]). Les constructions syntaxiques de base du langage du
document. La plupart des rgles des feuilles de style empruntent les noms de ces constructions (comme
"P", "TABLE" et "OL" pour HTML) pour en spcifier les directives de rendu ;
lment remplac
Un lment dont l'interprteur CSS ne connat que les dimensions intrinsques. Pour le langage HTML, ce
sont principalement les lments IMG, INPUT, TEXTAREA, SELECT et OBJECT. Par exemple, le
contenu de l'lment IMG est habituellement remplac par l'image qu'indique l'attribut "src". CSS ne
dfinit pas la faon de dterminer ces dimensions intrinsques ;
Dimensions intrinsques
La largeur et la hauteur de l'lment luimme, ce ne sont pas celles donnes par l'entourage. En CSS2,
on part du principe que tous les lments remplacs, et seulement ceuxci, ont des dimensions
intrinsques ;
Attribut
Une valeur complmentaire attache un lment, elle se compose d'un nom et d'une valeur associ
(textuelle) ;
Contenu
C'est le contenu associ un lment dans le document source. Les lments ne possdent pas tous un
contenu, on dit alors qu'ils sont vides. Ce contenu peut consister en du texte et peut inclure son tour des
souslments ; on appelle alors l'lment les englobant le parent de ces souslments ;
Rendu du contenu
C'est le contenu d'un lment tel qu'il apparat aprs que les instructions des feuilles de style concernes
aient t appliques. Ce rendu pour un lment remplac provient de l'extrieur du document source. Il
peut aussi prendre la forme alternative d'un texte la place d'un lment (ex. la valeur de l'attribut "alt" en
HTML) et il peut inclure des objets insrs de faon explicite ou implicite par la feuille de style, tels que
16

des puces, un numrotage, etc. ;
Arborescence du document
C'est l'arborescence des lments qui rsulte du formatage du document source. Chacun de ces lments a
exactement un seul parent, l'exception tant l'lment racine qui n'en a pas ;
Enfant
On appelle un lment A l'enfant de l'lment B, si et seulement si B est le parent de A ;
Descendant
On appelle un lment A un descendant d'un lment B si A est soit (1) un enfant de B, soit (2) un enfant
d'un autre lment C qui est luimme un descendant de B ;
Anctre
On appelle un lment A l'anctre d'un lment B, si et seulement si B est un descendant de A ;
Coenfant
On appelle un lment A un coenfant d'un lment B, si et seulement si A et B ont un mme parent. Si
l'lment A apparat avant B dans l'arborescence du document, on dit que A est le coenfant prcdent et
B le coenfant suivant ;
lment prcdent
On dit que l'lment A est l'lment prcdent de B, si (1) A est un anctre de B ou si (2) A est un
coenfant prcdent de B ;
lment suivant
On dit que l'lment A est l'lment suivant de B, si et seulement si B est un lment prcdent de A ;
Auteur
C'est une personne qui crit des documents et les feuilles de style qui lui sont associes. Pour ce faire, elle
emploie un outil d'dition [ndt. authoring tool] ;
Utilisateur
C'est la personne qui interagit avec un agent utilisateur pour voir, entendre ou utiliser autrement un
document en association avec ses feuilles de style. L'utilisateur peut employer sa propre feuille de style
qui tient compte de prfrences personnelles ;
Agent utilisateur
On donne le nom d'agent utilisateur tout logiciel capable d'interprter un document dans un langage
donn et de mettre en uvre les feuilles de style qui lui sont associes selon cette spcification. Celuici
peut afficher un document, le lire en synthse vocale, l'imprimer, le convertir vers un autre format, etc.
Voici un exemple de document source dans le langage HTML :
<HTML>
<TITLE>Ma page personnelle</TITLE>
<BODY>
<H1>Ma page personnelle</H1>
<P>Bienvenue sur ma page personnelle ! Voici mes compositeurs prfrs :
<UL>
<LI> Elvis Costello
<LI> Johannes Brahms
<LI> Georges Brassens
</UL>
</BODY>
</HTML>
et maintenant son arborescence :
En accord avec la dfinition de HTML, l'lment HEAD sera infr lors de l'interprtation et fera partie de
l'arborescence du document mme si les balises HEAD n'apparaissent pas dans la source. De la mme manire
pour les fins des lments P et LI, bien que les balises </P> et </LI> ne soient pas visibles.
3.2 La conformit
Ce chapitre traite seulement de la conformit en regard de la spcification CSS2. De futurs niveaux de CSS
pourront requrir l'implmentation d'un jeu de fonctions diffrents pour que l'agent utilisateur prtende une
17

conformit.
Globalement, pour tre conformes cette spcification, les agents utilisateurs doivent respecter les points suivants
:
1. Il doit supporter l'un ou plus des types de mdia de CSS2.
2. Pour une source donne, il doit en rechercher toutes les feuilles de style associes qui sont appropries
pour les types de mdia supports. S'il ne peut toutes les rassembler (par exemple, suite des
disfonctionnements du rseau), il doit rendre le document partir de celles qui ont pu tre trouves.
3. Il doit interprter les feuilles de style en fonction de cette spcification. Il doit en particulier reconnatre
toutes les rglesat, les dclarations et leurs ensembles, et les slecteurs (voir la grammaire de CSS2). Si
l'agent utilisateur rencontre une proprit qui s'applique un type de mdia support, il doit en interprter
sa valeur conformment la dfinition de cette proprit. Il doit ainsi retenir toutes les valeurs valides et
ignorer les dclarations dont les valeurs ne le sont pas. Un agent utilisateur doit ignorer les rgles ayant
trait ceux des types de mdia qu'il ne supporte pas.
4. Pour chacun des lments de l'arborescence du document, l'agent utilisateur doit assigner une valeur
chacune de leurs proprits spcifies, conformment leurs dfinitions et leurs rgles de cascade et
d'hritage.
5. Si la source fait mention de feuilles de style alternatives (comme pour le motcl "alternate" de HTML
4.0 [HTML40]), l'agent utilisateur doit permettre l'utilisateur d'en choisir une parmi cellesci pour
ensuite l'appliquer.
Il n'est pas obligatoire d'observer l'ensemble de ces points, cependant :
Un agent utilisateur qui lit les feuilles de styles doit respecter les points 1 3.
Un outil d'dition doit produire des feuilles de style valides.
Un agent utilisateur qui veut rendre un document avec ses feuilles de style associes doit respecter les
points 1 5 et rendre le document en accord avec les contraintes propres des mdias, ceuxci sont
examins plus loin dans la spcification. Quand ncessaire, il peut utiliser des valeurs approchantes.
Un agent utilisateur qui ne peut satisfaire correctement cette spcification cause des limitations d'un appareil
particulier n'est pas forcment non conforme (ex. un agent utilisateur ne peut produire des couleurs sur un
moniteur monochrome, pareil dans le cas d'une impression).
Cette spcification recommande que l'utilisateur puisse choisir sa propre feuille de style.
3.3 Les conditions d'erreur

En gnral, ce document ne prcise pas comment les agents utilisateurs sont supposs grer les erreurs (ex.
comment faire quand une resource dsigne par un URI est indisponible).
Nanmoins, ils doivent observer les rgles de gestion des erreurs d'interprtation.
Les auteurs et les utilisateurs ne doivent pas s'appuyer sur une gestion spcifique des erreurs, car le comportement
des agents utilisateurs visvis de cellesci peut varier.
3.4 Le type de contenu text/css

Les feuilles de style externes traversent l'Internet sous la forme de squences d'octets accompagnes d'information
d'encodage (voir [HTML40], chapitre 5). La structure de la transmission, nomme l'entit message, est dfinie par
RFC 2045 et RFC 2068 (voir [RFC2045] et [RFC2068]). Une entit message avec un type de contenu "text/css"
reprsente un document CSS indpendant. Ce type est dfini dans RFC 2318 ([RFC2318]).
18
4 La syntaxe de CSS2 et les types de donnes de base

4.1 La syntaxe
Ce chapitre dcrit une grammaire (avec les rgles d' interprtation pour la compatibilit ascendante)
commune chaque version de CSS (y compris CSS2). Les versions futures adhreront cette syntaxe de base,
mme si d'autres contraintes syntaxiques puissent s'y ajouter.
Ces descriptions sont normatives. Un complment des rgles de grammaire normatives est aussi prsent 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 mme syntaxe de base.
Ceci permet une interprtation (mais alors incomplte) des feuilles de style produites selon des niveaux de CSS
postrieurs leur implmentation dans les agents utilisateurs. Les auteurs peuvent utiliser cette caractristique
pour crer des feuilles de style fonctionnant sur des agents utilisateurs plus anciens tout en employant les
fonctionnalits apportes par les derniers niveaux de CSS.
Du point de vue lexical, les feuilles de style CSS consistent en une srie de jetons. Leur liste pour CSS2 suit. Les
dfinitions utilisent des expressions rgulires la faon de Lex. Les codes octaux se rfrent ISO 10646
([ISO10646]). Tout comme pour Lex, en cas de correspondances multiples, la plus longue dtermine le jeton.
Jeton
Dfinition
{ident}
@{ident}
{string}
#{name}
{num}
{num}%
{num}{ident}
url${w}{string}{w}$
URI
|url${w}([!#$%&*~]|{nonascii}|{escape})*{w}$
UNICODERANGE U\+[09AF?]{1,6}([09AF]{1,6})?
CDO
<!
CDC
>
;
;
{
\{
}
\}
(
$
)
$
[
\[
]
\]
S
[ \t\r\n\f]+
COMMENT
\/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION
{ident}\(
INCLUDES
~=
DASHMATCH
|=
tout autre caractre ainsi que le guillemet, simple ou double, qui n'est pas retenu
DELIM
par les rgles prcdentes
IDENT
ATKEYWORD
STRING
HASH
NUMBER
PERCENTAGE
DIMENSION
19

Cidessus, les macrocommandes entre accolades ({}) sont dfinies ainsi :
Macrocommande
Dfinition
ident
{nmstart}{nmchar}*
name
{nmchar}+
nmstart
[azAZ_]|{nonascii}|{escape}
nonascii
[^\0\177]
unicode
\\[09af]{1,6}[ \n\r\t\f]?
escape
{unicode}|\\[ ~\200\4177777]
nmchar
[azAZ09_]|{nonascii}|{escape}
num
[09]+|[09]*\.[09]+
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 faon de les employer.
L'appendice D dcrit une grammaire plus restrictive et plus proche du langage de CSS2.
feuille de style
dclaration
rglesat
bloc
jeu de rgles
slecteur
dclaration
proprit
valeur
tous
:
:
:
:
:
:
:
:
:
:
[ CDO | CDC | S | dclaration ]*;

jeu de rgles | rgleat;
ATKEYWORD S* tous* [ bloc | ';' S* ];
'{' S* [ tous | bloc | ATKEYWORD S* | ';' ]* '}' S*;
slecteur? '{' S* dclaration? [ ';' S* dclaration? ]* '}' S*;
tous+;
proprit ':' S* valeur;
IDENT S*;
[ tous | bloc | ATKEYWORD S* ]+;
[ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
| DELIM | URI | HASH | UNICODERANGE | 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 audessus signifie un blanc. Seuls les caractres "espace" (Code Unicode 32),
"tabulation" (9), "nouvelle ligne" (10), "retour chariot" (13) et "nouvelle page" (12) peuvent en tenir lieu. Les
autres caractres d'espacement similaires, comme "l'espace em" (8195) et "l'espace idographique" (12288), n'en
font pas partie.
[Errata : Les proprits raccourcies prennent comme valeur une liste compose des valeurs de leurs
sousproprits ou sinon la valeur 'inherit'. On ne peut pas mlanger la valeur 'inherit' avec d'autres valeurs des
sousproprits car il ne serait alors plus possible de dterminer laquelle de ces sousproprites est concerne.
Les dfinitions d'un certain nombre de proprits raccourcies ne respectent pas cette rgle : 'bordertop',
'borderright', 'borderbottom', 'borderleft', 'border', 'background', 'font', 'liststyle', 'cue' et 'outline'.]
4.1.2 Les motscls
Les motscls ont des points communs avec les identifiants. On ne doit pas les mettre entre guillemets ("..." ou
'...'). Ainsi :
red
est un motcl, mais :

"red"
n'en est pas un (c'est une chane). D'autres exemples proscrire :

Exemple(s) INTERDIT(s) :
20

width: "auto";
border: "none";
fontfamily: "serif";
background: "red";
4.1.3 Les caractres et la casse

Les rgles suivantes sont toujours vraies :
Toutes les feuilles de style CSS sont insensibles la casse, sauf leurs parties qui ne sont pas rgies 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 spcification. Noter en particulier que les
noms des lments ne sont pas dpendants de la casse pour HTML, alors qu'en XML ils le sont.
En CSS2, les identifiants (ainsi que les noms des lments et ceux des classes et des IDs des slecteurs)
ne peuvent contenir que les caractres parmi [AZaz09] et ISO 10646 suprieurs 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 caractres chapps ainsi que tous les caractres Unicode sous leur forme numrique (voir
ciaprs). Par exemple, l'identifiant "B&W?" peut s'crire "B\&W\?" ou "B\26 W\3F".
Noter que Unicode est quivalent codecode ISO 10646 (voir [UNICODE] et [ISO10646]).
En CSS2, la barre oblique inverse (\) dtermine trois types d' chappements de caractre.
Premirement, dans une chane, une barre oblique inverse suivie d'un caractre "nouvelle ligne" est
ignore (une chane n'est pas sense contenir la barre oblique inverse ni le caractre "nouvelle ligne").
Deuximement, elle annule le sens des caractres spciaux pour CSS. Tout caractre (sauf un nombre
hexadcimal) peut tre chapp ce qui neutralise sa signification particulire. Par exemple, "\"" est une
chane constitue d'un seul guillemet double. Les prprocesseurs de feuilles de style ne devraient pas les
supprimer des feuilles de style car cellesci en seraient changes.
Troisimement, elle permet aux auteurs une rfrence des caractres qui autrement serait difficile
insrer dans un document. Dans ce cas, la barre oblique inverse s'emploie suivie d'au plus six chiffres
hexadcimaux (0..9A..F) qui correspondent au code numrique d'un caractre ISO 10646 ([ISO10646]).
Si son tour un chiffre ou une lettre vient aprs ce nombre hexadcimal, il convient de prciser o
celuici se termine. Deux faons d'y parvenir :
1. avec un espace (ou un autre blanc) : "\26 B" ("&B"). Dans ce cas, l'agent utilisateur devrait
considrer une paire "CR/LF" (13/10 en Unicode) comme un seul blanc ;
2. en fournissant exactement 6 chiffres hexadcimaux : "\000026B" ("&B").
En fait, on peut combiner ces deux mthodes. Un seul blanc est ignor aprs un chappement
hexadcimal. Noter que, pour obtenir un "vrai" espace aprs la squence d'chappement, il faudra aussi
l'chapper ou le doubler.
On considre toujours les caractres chapps comme faisant partie d'un identifiant ou d'une chane (ex.
"\7B" n'est pas un signe de ponctuation, alors que "{" en est un, tout comme "\32" est permis au dbut du
nom d'une classe et "2" ne l'est pas).
4.1.4 Les dclarations
Quelle que soit la version de CSS, une feuille de style CSS consiste en une liste de dclarations (voir la
grammaire plus haut). Elles sont de deux sortes : les rglesat et les jeux de rgles. Les blancs sont autoriss
autour des dclarations.
Quand on utilise, dans cette spcification, des expressions comme "immdiatement avant" ou "immdiatement
aprs", cela veut dire sans blancs ou commentaires intermdiaires.
4.1.5 Les rglesat
Les rglesat commencent par un motclat, compos du caractre "@" immdiatement suivi par un identifiant
(ex. '@import', '@page').
Une rgleat consiste en tout ce qu'il y a jusqu'au premier pointvirgule (;), celuici inclus, ou jusqu'au bloc
suivant, selon le premier qui survient. Devant une rgleat inconnue de lui, un agent utilisateur CSS doit l'ignorer
entirement et poursuivre l'interprtation aprs celleci.
21

Les agents utilisateurs CSS2 doivent ignorer toute rgle '@import' qui survient dans un bloc ou qui ne prcde pas
l'ensemble des jeux de rgles.
Supposons, par exemple, un interprteur CSS2 face cette feuille de style :
@import "subs.css";
H1 { color: blue }
@import "list.css";
Le deuxime '@import' est invalide pour CSS2. L'interprteur ignore celuici en entier, et la feuille de style se
rduit dans les faits :
@import "subs.css";
H1 { color: blue }
Dans l'exemple suivant, la deuxime rgle '@import' n'est pas recevable parce qu'elle survient dans le bloc d'une
rgle '@media'.
@import "subs.css";
@media print {
@import "printmain.css";
BODY { fontsize: 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 caractres, sous la rserve que certains caractres aillent toujours par paires, cellesci
pouvant tre imbriques. Il s'agit des parenthses ( ), des crochets [ ] et des accolades { }. Les guillemets
simples (') et double (") doivent aussi aller par paires, leur contenu tant considr alors comme une chane. Voir
Atomisation plus haut pour la dfinition d'une chane.
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 deuxime guillemet simple est chapp, ce qui annule ainsi la correspondance avec le
premier guillemet simple :
{ causta: "}" + ({7} * '\'') }
Noter que cette rgle n'est pas valide pour CSS2, bien que correspondant la dfinition d'un bloc donne
cidessus.
4.1.7 Les jeux de rgles, les blocs de dclaration et les slecteurs
Un jeu de rgles (qualifi aussi de "rgle") se compose d'un slecteur suivi par un bloc de dclaration.
Un bloc de dclaration (qui est reprsent dans la suite du texte par {bloc}) commence par une accolade gauche
({) et se termine par l'accolade droite (}) correspondante. On doit placer entre cellesci une liste de dclarations
spares par des pointvirgules (;) ou, sinon, ne rien y mettre.
Un slecteur (voir aussi le chapitre sur les slecteurs) consiste en tout ce qu'il y a jusqu' la premire accolade
gauche, celleci exclue. Un slecteur est toujours accompagn d'un {bloc}. Quand un agent utilisateur ne peut
interprter un slecteur (par exemple, parce que celuici est invalide pour CSS2), il doit de ce fait en ignorer le
{bloc}.
En CSS2, la virgule (,) place dans un slecteur a un sens particulier. Cependant, comme on ne sait pas si celleci
va prendre d'autres significations dans les versions ultrieures de CSS, si une partie du slecteur comportait une
quelconque erreur, la dclaration entire devrait tre ignore, mme si le reste de celuici apparassait valide pour
CSS2.
22

Par exemple, comme le caractre "&" n'est pas un jeton valide en CSS2, un agent utilisateur CSS2 doit ignorer la
totalit de la deuxime ligne, et les lments 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 premires paires d'accolades se trouvent dans une chane, elles ne
dlimitent pas la fin du slecteur. Cette dclaration 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 dclarations et proprits

Une dclaration est : soit vide ; soit constitue d'une proprit, suivie du caractre deuxpoints (:) puis d'une
valeur. Il peut y avoir des blancs autour de chacun de ceuxci.
En raison du mode de fonctionnement des slecteurs, on peut regrouper les multiples dclarations qui se
rapportent un mme slecteur en les sparant par des pointvirgules (;).
Exemple(s):
Ainsi, les rgles suivantes :
H1
H1
H1
H1
H1
H1
{
{
{
{
{
{
fontweight: bold }
fontsize: 12pt }
lineheight: 14pt }
fontfamily: Helvetica }
fontvariant: normal }
fontstyle: normal }
sont quivalentes celleci :

H1 {
fontweight: bold;
fontsize: 12pt;
lineheight: 14pt;
fontfamily: Helvetica;
fontstyle: normal
}
Une proprit est un identifiant. On peut utiliser pour sa valeur toutes sortes de caractres, sous rserve des
parenthses ("( )"), des crochets ("[ ]"), des accolades ("{ }") et des guillemets simples (') ou doubles (") qui
doivent toujours aller par paires, les pointvirgules en dehors d'une chane doivent tre chappes. Les
parenthses, les crochets et les accolades peuvent tre imbriqus. Les caractres entre des guillemets sont
interprts comme une chane.
La syntaxe des valeurs est spcifie pour chacune des proprits ; dans tous les cas, les valeurs sont construites
partir d'identifiants, de chanes, de nombres, de longueurs, de pourcentages, d'URIs, de couleurs, d'angles, de
dures et de frquences.
Un agent utilisateur doit ignorer une dclaration dont le nom de la proprit ou sa valeur est invalide. Chacune des
proprits CSS2 a ses propres restrictions syntaxiques et smantiques sur les valeurs qu'elle accepte.
Prenons par exemple un interprteur CSS2 et cette feuille de style :
23

H1 { color: red; fontstyle: 12pt }
P { color: blue; fontvendor: any;
fontvariant: smallcaps }
EM EM { fontstyle: normal }
/* valeur invalide : 12pt */

/* proprit invalide : fontvendor */
Dans la premire ligne, la seconde dclaration comporte une valeur de '12pt' invalide, et dans la deuxime ligne, la
deuxime dclaration contient une proprit non dfinie 'fontvendor'. L'interprteur va ignorer cellesci,
rduisant la feuille de style dans les faits la suivante :
H1 { color: red; }
P { color: blue; fontvariant: smallcaps }
EM EM { fontstyle: normal }
4.1.9 Les commentaires

Les commentaires commencent par les caractres "/*" 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 dlimiteurs SGML ("<!" et ">") certains endroits, mais ne dlimitent pas
un commentaire en CSS. On les emploie aussi pour masquer les feuilles de style dans un document source HTML
(dans l'lment STYLE) aux agents utilisateurs antrieurs HTML 3.2. Voir la spcification HTML 4.0
([HTML40]) pour plus d'informations.
4.2 Les rgles de traitement des erreurs d'interprtation

Dans certains cas, les agents utilisateurs doivent ignorer une partie d'une feuille de style invalide. Cette
spcification dfinit le terme ignorer, qui signifie l'examen de cette partie invalide par l'agent utilisateur (pour
dterminer o celleci commence et se termine), tout en agissant comme si cette partie n'avait pas t l.
Pour permettre l'ajouts futurs de nouvelles proprits et valeurs, les agents utilisateurs doivent suivre les rgles
suivantes en fonction des scnarios dcrits ici :
Proprits inconnues. Les agents utilisateurs doivent ignorer une dclaration dont la proprit 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 dclaration qui comporte une valeur
invalide. Par exemple :
IMG
IMG
IMG
IMG
{
{
{
{
float: left }
float: left here }
background: "red" }
borderwidth: 3 }
/*
/*
/*
/*
valide pour CSS2 */

"here" n'est pas une valeur de 'float' */
les motscls ne sont pas entre guillemets en CSS2 */
on doit spcifier une unit une valeur numrique */
un interprteur CSS2 honorerait la premire rgle de la feuille de style et en ignorerait les suivantes,
comme si celleci avait t :
IMG
IMG
IMG
IMG
{
{
{
{
float: left }
}
}
}
L'agent utilisateur qui voudrait aller vers une conformit avec une future spcification CSS peut aussi
suivre une, ou plusieurs, de ces autres rglesci.
Motsclsat invalides. Les agents utilisateurs doivent ignorer un motclat invalide ainsi que tout ce
qui le suit jusqu'au pointvirgule (;) inclus ou jusqu'au {bloc} prochains, selon celui qui survient en
premier. Par exemple, considrons la feuille de style suivante :
@threedee {
@backgroundlighting {
azimuth: 30deg;
elevation: 190deg;
24

}
H1 { color: red }
}
H1 { color: blue }
La rgleat '@threedee' n'est pas dfinie en CSS2. Ainsi, la rgleat (jusqu' la troisime accolade droite
incluse) est ignore, et la feuille de style est rduite 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 (dnot par <integer>) ou le type nombre (dnot par <nombre>).
Les nombres et les entiers sont seulement spcifis en notation dcimale. Un <entier> consistent un, ou plusieurs,
chiffres de "0" "9". A <nombre> peut tre un <entier> ou encore zro, ou plusieurs chiffres, suivi par un point (.)
et un, ou plusieurs, chiffres. Les deux types pouvant tre prcds par le signe "" ou "+".
Noter que plusieurs proprits, qui admettent comme valeur un entier ou un nombre, limitent en fait leurs valeurs
dans une plage donne, souvent une valeur positive.
4.3.2 Les longueurs
Les longueurs s'appliquent aux mesures horizontales et verticales.
Une valeur de longueur (dnote par <longueur> dans cette spcification) est forme d'un caractre de signe
facultatif ('+' ou '', '+' tant le dfaut), suivi immdiatement par un <nombre> (avec un point dcimal ou non) et
suivi immdiatement 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 dj le signe "+" ou "", la dfinition prcdente implique la
possibilit de mettre deux caractres pour le signe. Bien que les types de valeurs suivants puissent en accepter
deux, on considre qu'ils n'admettent qu'un caractre de signe :
Longueur
Pourcentage
Angle]
Certaines proprits autorisent des valeurs de longueur ngatives, mais cela peut compliquer le modle de mise en
forme, cela peut aussi dpendre des limites spcifiques des agents utilisateurs. Dans le cas o une valeur de
longueur ngative 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 units de longueurs relatives se
rapportent une autre proprit de longueur. Les feuilles de style qui en emploient seront plus facilement
adaptable d'un medium un autre (par exemple d'un moniteur vers une imprimante laser).
Voici les units relatives :
em : la valeur de 'fontsize' pour la police concerne
ex : la valeur de 'xheight' pour la police concerne
px : une quantit de pixels, en fonction de l'appareil de visualisation.
Exemple(s) :
H1 { margin: 0.5em }
H1 { margin: 1ex }
P { fontsize: 12px }
/* em */
/* ex */
/* px */
L'unit 'em' correspond la valeur calcule pour la proprit 'fontsize' d'un lment donn. Sauf quand cette
unit est spcifie dans la proprit 'fontsize' ellemme, auquel cas, elle se rfre la taille de la police de
l'lment parent. On peut l'utiliser pour des mesures de quantits verticales ou horizontales. (En typographie, on
l'appelle aussi carr typographique ou corps).
L'unit 'ex' est dfinie par rapport la valeur de la proprit 'xheight'. Cette valeur correspond la hauteur du
caractre "x" minuscule. Elle est dfinie mme pour les polices qui n'en contiennent pas.
25

Exemple(s) :
Ainsi :
H1 { lineheight: 1.2em }
cette rgle prcise que la hauteur de ligne des lments H1 sera 20% plus grande que leur taille de police.
l'inverse :
H1 { fontsize: 1.2em }
la taille de police des lments H1 sera 20% plus grande que la taille de police hrite par ceuxci.
Les valeurs en 'em' et 'ex' se rfrent la valeur initiale de la proprit quand on les spcifie pour la racine de
l'arborescence du document (ex. "HTML" pour le langage HTML).
Les valeurs exprimes en pixel s'entendent relativement la rsolution 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 loigne de celle d'un
moniteur typique, l'agent utilisateur devrait redimensionner les valeurs en pixel. On recommande une valeur pour
le pixel de rfrence 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 degrs.
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 a une taille
d'envirion 0.21 mm. Avec une imprimante de rsolution 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 consquences de la distance de lecture et de la rsolution d'un
appareil sur la perception d'un pixel. Dans la premire, 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 rsolution
(un moniteur), alors que cette mme surface ncessite 16 points pour un appareil en haute rsolution (comme une
imprimante laser en 400 ppp).
26
Les lments enfants n'hritent pas des valeurs relatives spcifies pour leur parent ; ils en hritent (gnralement)
des valeurs calcules.
Exemple(s) :
Dans les rgles suivantes, la valeur calcule de 'textindent' des lments H1, enfants de l'lment BODY, sera de
36pt, et non 45pt.
BODY {
fontsize: 12pt;
textindent: 3em; /* i.e., 36pt */
}
H1 { fontsize: 15pt }
Les units de longueurs absolues ne sont utiles que si les proprits physiques du medium de sortie sont connues.
Voici les units absolues :
in : pouce (inch) un pouce est gal 2.54 cm.
cm : centimtre
mm : millimtre
pt : point le point de CSS2 est gal 1/72 de pouce.
pc : pica un pica est gal 12 points.
Exemple(s) :
H1
H2
H3
H4
H4
{
{
{
{
{
margin: 0.5in }
lineheight: 3cm }
wordspacing: 4mm }
fontsize: 12pt }
fontsize: 1pc }
/*
/*
/*
/*
/*
pouces */
centimtres */
millimtres */
points */
picas */
Si la valeur de longueur spcifie n'est pas reconnue, les agents utilisateurs doivent en donner une valeur
approchante
4.3.3 Les pourcentages
Une valeur de pourcentage (dnote par <pourcentage> est forme d'un caractre facultatif pour le signe ('+' ou
'', '+' tant par dfaut) immdiatement suivi par un <nombre> et immdiatement suivi par le caractre '%'.
Les valeurs de pourcentage sont toujours relatives une autre valeur, par exemple une longueur. Chacune des
proprits qui admettent des pourcentages dfinit aussi la valeur laquelle le pourcentage se rapporte. Cette valeur
peut tre celle d'une autre proprit du mme lment, d'une proprit d'un anctre ou de la valeur issue du
contexte de formatage (ex. la largeur d'un bloc conteneur). Quand une valeur de pourcentage est spcifie pour
une proprit de l'lment racine et que celleci est dfinie par rapport la valeur hrite d'une proprit donne,
alors la valeur rsultante est gale au produit de la valeur de pourcentage par la valeur initiale de cette proprit.
Exemple(s) :
27

Les lments enfants hritant (gnralement) des valeurs calcules de leur parent, dans l'exemple suivant, les
enfants de l'lment P hriteront d'une valeur 12pt pour la proprit 'lineheight', et non de la valeur en
pourcentage (ici, 120%) :
P { fontsize: 10pt }
P { lineheight: 120% }
/* 120% de 'fontsize' */
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 destine identifier une ressource est l'URN (Uniform Resource Name). Les deux
runis forment ce qu'on nomme les URIs (Uniform Resource Identifiers, voir [URI]).
Les valeurs d'URI dans cette spcification sont dnotes par <uri>. On utilise la notation fonctionnelle "url()" pour
dsigner les URIs dans les valeurs de proprits, comme ici :
Exemple(s) :
BODY { background: url("http://www.bg.com/pinkish.gif") }
Une valeur d'URI est forme par les caractres 'url(' suivis par un blanc facultatif, suivi par un guillemet facultatif
simple (') ou double ("), suivis par l'URI luimme, 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 mme sorte.
Exemple(s) :
Un exemple sans guillemets :
LI { liststyle: url(http://www.redballs.com/redball.png) disc }
Les parenthses, les virgules, les blancs et les guillemets simples ou doubles qui apparaissent dans un URI doivent
tre chapps avec une barre oblique inverse, ex. '$', '$', '\,', etc.
Selon le type d'URI, il doit aussi tre possible d'crire les caractres prcdents sous forme d'chappement URI,
o "(" = %28, ")" = %29, etc., tel que dcrit dans [URI].
Pour crer des feuilles de style modulaires indpendantes de l'adresse absolue d'une ressource, les auteurs peuvent
employer des URIs relatifs. Les URIs relatifs (dcrits dans [RFC1808]) sont rsolus en URIs complets partir
d'un URI de base. L'algorithme normatif de ce processus est dfini 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.
Exemple(s) :
Supposons par exemple que la rgle suivante :
BODY { background: url("yellow") }
se trouve dans une feuille de style dsigne par l'URI :

http://www.myorg.org/style/basic.css
L'arrireplan de l'lment BODY dans le document source sera carrel avec l'image issue de la ressource
dsigne par cet URI :
http://www.myorg.org/style/yellow
La manire de grer les URIs qui pointent vers des ressources non disponibles ou inappropries peut varier d'un
agent utilisateur l'autre.
4.3.5 Les compteurs
Les compteurs sont dnots par des identifiants (voir les proprits 'counterincrement' et 'counterreset'). On se
rfre la valeur d'un compteur au travers des notations 'counter(<identifiant>)' ou 'counter(<identifiant>,
<liststyletype>)'. La valeur par dfaut tant 'decimal'.
28

Pour rfrencer une squence de compteurs imbriqus, on utilise les notations 'counters(<identifiant>, <chane>)'
ou 'counters(<identifiant>, <chane>, <liststyletype>)'. Voir "Les compteurs imbriqus et leur porte" dans le
chapitre sur le contenu gnr.
En CSS2, on ne peut se rfrer aux valeurs des compteurs qu'avec la proprit 'content'. Noter que la valeur 'none'
est admise pour <liststyletype> : 'counter(x, none)' rsulte en une chane vide.
Exemple(s) :
Voici une feuille de style qui numrote les paragraphes (P) pour chacun des chapitres (H1). Les paragraphes
utilisent une numrotation en chiffre romains, suivis par un point et un espace :
P {counterincrement: parnum}
H1 {counterreset: parnum}
P:before {content: counter(parnum, upperroman) ". "}
Les compteurs qui sont hors du champs d'action d'une proprit 'counterreset' sont considrs avoir t remis
zro par la proprit 'counterreset' de l'lment racine.
4.3.6 Les couleurs
La valeur d'un champs <couleur> est spcifie par un motcl ou par une valeur numrique RGB.
La liste des noms de motscls de couleur est : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white et yellow. Ces 16 couleurs sont dfinies dans la spcification HTML 4.0
([HTML40]). En complment de ces couleurs, les utilisateurs peuvent spcifier des motscls qui correspondent
aux couleurs utilises par certains objets de l'environnement de l'utilisateur. Consulter le chapitre sur les couleurs
systme pour plus d'informations.
Exemple(s) :
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
On utilise le modle de couleur RGB pour la spcification numrique des couleurs. Les exemples cidessous
indiquent tous la mme couleur :
Exemple(s) :
EM
EM
EM
EM
{
{
{
{
color:
color:
color:
color:
#f00 }
/* #rgb */
#ff0000 }
/* #rrggbb */
rgb(255,0,0) }
rgb(100%, 0%, 0%) }
Une valeur RGB en notation hexadcimale est forme d'un caractre '#' immdiatement suivi par trois ou bien six
caractres hexadcimaux. La notation RGB en trois chiffres (#rgb) est convertie dans celle en six chiffres
(#rrggbb) par rplication, et non par ajout de zros. Par exemple, #fbo se transforme en #ffbb00. Ceci assure que
la couleur blanche (#ffffff) puisse tre spcifie avec la notation courte (#fff) et que celleci soit indpendante de
la profondeur de couleur de l'cran.
Une valeur RGB en notation fonctionnelle est forme par les caractres 'rgb(', suivis par une liste de trois valeurs
numriques (soit trois entiers, soit trois pourcentages) spares par des virgules et suivi par ')'. La valeur entire
255 correspond 100% et f ou ff en notation hexadcimale : rgb(255,255,255) = rgb(100%,100%,100%) = #fff.
Les blancs sont permis autour de chacune des valeurs.
Toutes les couleurs RGB sont spcifies dans l'espace de couleur sRGB (voir [SRGB]). La fidlit du rendu des
couleurs peut varier d'un agent utilisateur l'autre, mais l'emploi de sRGB dfinit une mesure objective et sans
ambigut 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 spcifie un gamma d'affichage de 2.2 dans certaines conditions spcifique de vision.
Les agents utilisateurs devraient adapter les couleurs donnes en CSS, en conjonction avec le rendu "naturel" du
gamma d'un appareil de sortie, de manire, produire un gamma effectif de 2.2. Voir le chapitre sur la correction
gamma pour plus de dtails. Noter que seules les couleurs spcifies en CSS sont concernes, les images, par
exemple, sont senses emporter leurs propres informations de couleur.
29

Les valeurs situes hors du gamut de l'appareil devraient tre rognes : les valeurs de rouge, vert et bleu doivent
tre modifies pour rester dans les limites supportes par l'appareil. Pour un moniteur CRT typique, dont le gamut
est le mme que celui de sRGB, ces trois rgles sont quivalentes :
Example(s):
EM
EM
EM
EM
{
{
{
{
color:
color:
color:
color:
rgb(255,0,0) }
rgb(300,0,0) }
rgb(255,10,0) }
rgb(110%, 0%, 0%) }
/*
/*
/*
/*
entier
ramen
ramen
ramen
de 0 255 */
rgb(255,0,0) */
rgb(255,0,0) */
rgb(100%,0%,0%) */
D'autres appareils, dont les imprimantes, ont des gamuts diffrents de celui de sRGB ; certaines couleurs hors de
la plage 0..255 de sRGB seront reprsentables ( l'intrieur du gamut de l'appareil), d'autres, bien que dans cette
plage, seront hors du gamut de l'appareil et seront de ce fait rognes.
Note : Bien que les couleurs puissent avoir un impact informationnel important pour les documents, les rendant
plus lisibles, merci de considrer le fait que certaines combinaisons de couleurs peuvent causer des difficults aux
utilisateurs qui ont des dficiences visuelles. Si vous utilisez une image de fond ou spcifiez une couleur
d'arrireplan, veuillez choisir des couleurs de premier plan en accord avec leur fond.
4.3.7 Les angles
Les valeurs d'angles (dnotes par <angle> dans le texte) sont employes avec les feuilles de style auditives.
Elles sont formes d'un caractre de signe facultatif ('+' ou '', '+' tant par dfaut) immdiatement suivi par un
<nombre> et immdiatement suivi par un identifiant d'unit d'angle.
Les identifiants d'unit d'angle sont :
deg : degrs
grad : grades
rad : radians
Les valeur d'angle peuvent tre ngatives. L'agent utilisateur devrait les normaliser dans la plage de 0 360
degrs. Par exemple, 10deg et 350deg sont quivalents.
Un angle droit, par exemple, fait '90deg' ou '100grad' ou '1.570796326794897rad'.
4.3.8 Les dures
Les valeurs de dure (dnotes par <dure> dans ce texte) sont employes avec les feuilles de style auditives.
Elles sont formes d'un <nombre> immdiatement suivi par un identifiant d'unit de dure.
Les identifiants d'unit de dure sont :
ms : millisecondes
s : secondes
Les valeurs de dure ne peuvent pas tre ngatives.
4.3.9 Les frquences
Les valeurs de frquence (dnotes par <frquence> dans le texte) sont employes avec les feuilles de style
auditives.
Elles sont formes d'un <nombre> immdiatement suivi par un identifiant d'unit de frquence.
Les identifiants d'unit de frquence sont :
Hz: Hertz
kHz: kilo Hertz
Les valeurs de frquence ne peuvent pas tre ngatives.
Par exemple, 200Hz (ou 200hz) est un son grave et 6kHz (ou 6khz) est un son aig.
30

4.3.10 Les chanes
Les chanes 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 mme faon pour les
guillemets simples ("\'" ou "\27").
Exemple(s) :
"voici
"voici
'voici
'voici
une
une
une
une
'chane'"
\"chane\""
"chane"'
\'chane\''
Une chane ne peut pas contenir directement un caractre nouvelle ligne. Pour cela, on emploie le caractre
chapp "\A" (en notation hexadcimale, A est le caractre Unicode pour une nouvelle ligne, celuici est donc la
reprsentation gnrique pour "nouvelle ligne" en CSS). Voir la proprit 'content' pour un exemple.
Il est possible de couper les chanes pour les rpartir sur plusieurs lignes, pour des raisons esthtiques ou autres,
mais il faut dans ce cas chapper la nouvelle ligne ellemme avec une barre oblique inverse (\). Par exemple, les
deux slecteurs qui suivent sont les mmes :
Exemple(s) :
A[TITLE="un titre qui\
est assez court"] {/*...*/}
A[TITLE="un titre qui est assez court"] {/*...*/}
4.4 La reprsentation du documents par CSS

Une feuille de style CSS est une squence de caractres issus du Jeu de Caractres Universel, Universal Character
Set (voir [ISO10646]). Pour leur transport et leur stockage, ces caractres doivent tre encods selon un encodage
compatible avec le jeu de caractres disponibles en USASCII (ex. ISO 8859x, SHIFT JIS, etc.). Pour une
bonne introduction aux jeux de caractres et leurs encodages, consulter la spcification HTML 4.0 ([HTML40],
chapitre 5). Voir aussi la spcification XML 1.0 ([XML10], chapitres 2.2 et 4.3.3, et l'Appendice F.
Quand une feuille de style est incorpore dans un document, comme avec l'lment STYLE ou l'attribut "style" en
HTML, celleci partage le mme encodage de caractres que ce document.
Quand une feuille de style rside dans un fichier spar, les agents utilisateurs doivent observer les priorits
suivantes pour dterminer l'encodage des caractres du document (par ordre de priorit dcroissant) :
1. Un paramtre HTTP "charset" dans un champs "ContentType" ;
2. La rgleat @charset ;
3. Des mcanismes du langage du document appelant (ex. l'attribut "charset" de l'lment LINK en HTML).
Il ne peut y avoir qu'une rgle @charset dans une feuille de style externe et elle doit survenir au tout dbut de
celleci, aucun caractre ne devant prcder. Cette rgle ne doit pas apparatre dans une feuille de style
incorpore. Les auteurs spcifient le nom d'un encodage aprs "@charset". Ce nom doit correspondre celui d'un
jeu de caractre inscrit dans les registres de l'IANA (voir [IANA] et aussi [CHARSETS] pour une liste complte
de ceuxci). Par exemple :
Exemple(s) :
@charset "ISO88591";
Cette spcification ne prcise pas lesquels des encodages de caractres un agent utilisateur doit reconnatre.
Noter que compter sur la construction avec @charset pose un problme thorique car on ne sait pas a priori la
faon dont celleci est encode. En pratique, cependant, les encodages les plus rpandus sur Internet sont bass
sur ASCII, UTF16, UCS4 ou (rarement) sur EBCDIC. Cela signifie en gnral que l'agent utilisateur est
capable de dtecter de faon sre la famille d'encodage d'un document partir de ses octets initiaux, ce qui lui
permet ensuite d'en dterminer l'encodage exact.
31

4.4.1 La rfrence aux caractres absents d'un encodage
Une feuille de style peut faire appel des caractres qui n'ont pas de reprsentation dans un encodage donn.
Ceuxci doivent tre crits sous la forme de rfrences chappes des caractres ISO 10646. C'est la mme faon
de faire que pour les rfrences des caractres numriques dans les documents HTML ou XML (voir [HTML40],
chapitres 5 et 25).
On ne devrait employer ce mcanisme que si on a affaire un petit nombre seulement de ces caractres
chapper. Si la plus grande part du document y fait appel, alors les auteurs devraient employer un encodage plus
appropri pour celuici (ex. avec un document qui contient beaucoup de caractres grecs, les auteurs pourraient
utiliser "ISO88597" ou "UTF8").
Les processeurs intermdiaires qui utilisent un encodage diffrent peuvent traduire ces squences d'chappement
en des squences d'octets pour ce mme encodage. Nanmoins, il ne doivent pas modifier celles qui annulent le
sens spcial d'un caractre ASCII.
Les agents utilisateurs conformes doivent faire correspondre correctement avec Unicode tous les caractres d'un
encodage donn qui sont reconnus (ou se comporter comme s'ils le faisaient).
Par exemple, un document transmis en ISO88591 (Latin1) ne peut pas contenir des lettres greques telles
quelles : "" ("kouros" en grec) doit tre crit "\3BA\3BF\3C5\3C1\3BF\3C2".
Note : En HTML 4.0, les rfrences de caractres numriques sont interprtes dans les valeurs de l'attribut
"style" mais pas dans le contenu de l'lment STYLE. cause de cette divergence, nous recommandons aux
auteurs l'utilisation du mcanisme d'chappement des caractres de CSS plutt que les rfrences de caractres
numriques, pour l'attribut "style" comme pour l'lment STYLE :
<SPAN style="voicefamily: D\FC rst">...</SPAN>
plutt que :
<SPAN style="voicefamily: Dürst">...</SPAN>
32
5 Les slecteurs
5.1 La reconnaissance d'un motif
En CSS, des rgles de reconnaissance de motifs dterminent les rgles de style qui s'appliquent aux lments de
l'arborescence du document. Ces motifs, nomms slecteurs, sont varis, allant du simple nom d'un lment
jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vrifies pour un lment donn,
celuici est retenu par le slecteur.
Les noms des lments d'un document peuvent tre sensibles la casse, cela dpend du langage du document. Par
exemple, ceuxci sont insensibles la casse en HTML, par contre, ils le sont en XML.
Cette table rsume la syntaxe du slecteur de CSS2 :
Motif
Signification
Dcrit au chapitre...
Correspond tout lment.
Slecteur universel
Correspond tout lment E (c..d., un lment

de type E).
Slecteurs de type
EF
Correspond tout lment F aussi un descendant

de l'lment E.
Slecteurs descendants
E>F
Correspond tout lment F aussi un enfant de

l'lment E.
Slecteurs d'enfant
E:firstchild
Correspond un lment E aussi le premier enfant La pseudoclasse :firstchild

de son lment parent.
E:link
E:visited
Correspond un lment E qui est une ancre dans

la source dont le lien n'a pas t visit (:link) ou
The link pseudoclasses
bien l'a dj t (:visited).
E:active
E:hover
E:focus
Correspond l'lment E au cours de certaines

actions de l'utilisateur.
E:lang(c)
Correspond l'lment de type E qui emploie une

langue c (la dtermination de cette langue est
La pseudoclasse :lang()
spcifique au langage du document).
E+F
Correspond tout lment F immdiatement

prcd par un lment E.
Les slecteurs adjacents
E[foo]
Correspond tout lment E avec l'attribut "foo"

(quelles qu'en soient les valeurs).
Slecteurs d'attribut
E[foo="warning"]
Correspond tout lment E dont l'attribut "foo" a Slecteurs d'attribut

exactement la valeur "warning".
E[foo~="warning"]
Correspond tout lment E dont l'attribut "foo" a

pour valeur une liste de valeurs spares par des Slecteurs d'attribut
blancs et dont une de cellesci est "warning".
E[lang|="en"]
Correspond tout lment E dont l'attribut "lang"

a pour valeur une liste de valeurs spares par des Slecteurs d'attribut
tirets, cette liste commenant ( gauche) par "en".
DIV.warning
Seulement en HTML. Identique

DIV[class~="warning"].
E#myid
Correspond tout lment E dont l'ID est "myid". Slecteurs d'ID
Les pseudoclasses dynamiques
Slecteurs de classe
33
5.2 La syntaxe des slecteurs

Un slecteur simple est soit un slecteur de type, soit un slecteur universel immdiatement suivi par un
slecteur d'attribut, un slecteur d'ID ou une pseudoclasses, zro ou plusieurs de ceuxci, dans n'importe quel
ordre. Le slecteur simple a une correspondance si tous ses composants sont vrifis.
Un slecteur consiste en une succession d'un, ou plusieurs, slecteurs simples, spars par des conjonctions. Ces
conjonctions sont : les blancs et les caractres ">" et "+". On peut mettre d'autres blancs entre les conjonctions et
les slecteurs simples en contact.
Les lments de l'arborescence du document en correspondance avec un slecteur sont appels sujets de ce
slecteur. Un slecteur consistant en un seul slecteur simple est en correspondance avec tout lment qui satisfait
ses conditions. Quand on place un slecteur simple avec sa conjonction au dbut d'une succession d'autres
slecteurs, ceci provoque un supplment de contraintes pour la correspondance. C'est pourquoi, les sujets d'un
slecteur forment toujours un sousensemble des lments qui correspondent au slecteur simple situ le plus
droite.
On peut accoler un pseudolment au dernier slecteur d'une succession ; dans ce cas, l'information de style
s'applique sur une partie de chacun des sujets.
5.2.1 Le regroupement
On peut regrouper plusieurs slecteurs dans une liste, spars par des virgules, quand ceuxci partagent les mmes
dclarations.
Exemple(s) :
Dans cet exemple, on condense trois rgles qui ont les mmes dclarations en une seule :
H1 { fontfamily: sansserif }
ceci est quivalent :

H1, H2, H3 { fontfamily: sansserif }
CSS offre d'autres mcanismes "raccourcis" semblables, comme les dclarations multiples et les proprits
raccoucies.
5.3 Le slecteur universel

Le slecteur universel, not "*", correspond chacun des noms des types d'lments. Il agit sur chacun des
lments de l'arborescence du document.
Si le slecteur universel n'est pas le seul composant d'un slecteur simple, on peut omettre le caractre "*". Par
exemple :
*[LANG=fr] et [LANG=fr] sont quivalents.
*.warning et .warning sont quivalents.
*#myid et #myid sont quivalents.
5.4 Les slecteurs de type

Un slecteur de type correspond au nom d'un lment dans le langage du document. Il rpertorie chaque instance
de cet lment dans l'arborescence du document.
Exemple(s) :
La rgle suivante atteint tous les lments H1 d'une arborescence :
34
5.5 Les slecteurs descendants

Un auteur peut vouloir disposer d'un slecteur pour atteindre un lment donn, celuici tant luimme un
descendant d'un autre lment de l'arborescence du document (ex. "Toucher ces lments EM qui sont dans un
lment H1"). Les slecteurs descendants sont l'expression de cette relation dans un motif. Ceuxci se composent
de deux slecteurs, ou plus, spars par un blanc. Un slecteur descendant de la forme "A B" se vrifie quand un
lment B est un descendant arbitraire d'un lment A, son anctre.
Exemple(s) :
Considrons par exemple les rgles suivantes :
H1 { color: red }
EM { color: red }
Bien que l'intention ait pu tre l'emphase d'un texte en changeant sa couleur, l'effet sera perdu dans ce casci :
<H1>Ce titre est <EM>trs</EM> important</H1>
Nous tenons compte de cette ventualit en ajoutant une rgle au jeu prcdent, celleci fixe une couleur bleu au
texte d'un lment EM survenant dans un lment H1 :
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
La troisime rgle s'appliquera l'lment EM de cet extraitci :

<H1>Ce <SPAN class="myclass">titre
est <EM>trs</EM> important.</SPAN></H1>
Exemple(s) :
Avec ce slecteur :
DIV * P
on touche les lments P qui sont les petitsenfants, ou les descendants plus lointains, d'un lment DIV. Noter les
blancs facultatifs de chaque ct du "*".
Exemple(s) :
Dans cette rgle suivante, on a une combinaison de slecteur descendant et de slecteur d'attribut, celleci
concerne les lments qui, la fois, (1) ont un attribut "href" et (2) sont contenus dans un lment P luimme
dans un lment DIV :
DIV P *[href]
5.6 Les slecteurs d'enfant

Un slecteur d'enfant se vrifie quand un lment est l'enfant d'un autre lment. Celuici se compose de deux
slecteurs, ou plus, spars par le caractre ">".
Exemple(s) :
La rgle suivante applique un style tous les enfants de l'lment BODY :
BODY > P { lineheight: 1.3 }
Exemple(s) :
Dans cet exempleci, on a combin un slecteur descendant et un slecteur d'enfant :
DIV OL>LI P
35

Cette rgle concerne un lment P qui est un descendant d'un lment LI, celuici devant tre l'enfant d'un
lment OL qui, son tour, doit tre un descendant de l'lment DIV. Noter l'absence des blancs, facultatifs,
autour de la conjonction ">".
Pour des renseignements sur la faon de slectionner le premier enfant d'un lment, voir le chapitre sur la
pseudoclasse :firstchild plus loin.
5.7 Les slecteurs d'enfants adjacents

Les slecteurs d'enfants adjacents suivent une syntaxe de cette forme : E1 + E2, o E2 est le sujet du slecteur.
Celuici est vrifi quand E1 et E2 ont le mme parent dans l'arborescence du document et quand E1 y prcde
immdiatement E2.
Selon le contexte, les lments adjacents gnrent un formatage des objets dont la mise en forme est gre
automatiquement (ex. les marges verticales des botes adjacentes qui fusionnent). Avec la conjonction "+", les
auteurs peuvent ajouter des styles aux lments adjacents.
Exemple(s) :
En exemple, cette rgle prcise qu'un lment P qui suit un lment MATH ne devrait pas avoir d'alina :
MATH + P { textindent: 0 }
Le suivant produit une rduction de l'espace vertical entre un lment H1 et l'lment H2 qui le suit juste aprs :
H1 + H2 { margintop: 5mm }
Exemple(s) :
Ici, la rgle est similaire la prcdente, la diffrence qu'elle comporte un slecteur d'attribut en plus. Ainsi, une
mise en forme particulire s'applique aux lments H1 avec un attribut class="opener" :
H1.opener + H2 { margintop: 5mm }
5.8 Les slecteurs d'attribut

Avec CSS2, on peut spcifier des rgles qui s'applique aux attributs dfinis dans le document source.
5.8.1 La correspondance entre les attributs et leurs valeurs
Les slecteurs d'attribut peuvent trouver une correspondance de quatre faons :
[att]
Quand un lment a un attribut "att", quelle que soit sa valeur ;
[att=val]
Quand un lment a un attribut "att" dont la valeur est exactement "val" ;
[att~=val]
Quand un lment avec un attribut "att" qui admet comme valeur une suite de valeurs spares par des
blancs, une des valeurs est exactement "val". Avec ce slecteur, les valeurs de la liste ne doivent pas
contenir de blancs (car ceuxci font dj office de sparateurs) ;
[att|=val]
Quand un lment avec un attribut "att" qui admet comme valeur une suite de valeurs spares par des
tirets, la premire valeur est "val". La correspondance intervient toujours au dbut de la valeur de
l'attribut. Ceci, principalement, pour permettre une correspondance sur les souscodes des langues qui
sont dcrits dans RFC 1766 ( [RFC1766]).
Les valeurs d'attribut doivent tre des identifiants ou des chanes. La sensibilit des noms et des valeurs d'attributs
dans les slecteurs dpendent du langage du document.
Exemple(s) :
Par exemple, ce slecteur d'attribut correspond avec ceux des lments H1 qui ont un attribut "title", quelle que
soit sa valeur :
H1[title] { color: blue; }
36

Exemple(s) :
Dans cet exemple, le slecteur correspond avec tous les lments SPAN dont la valeur de l'attribut "class" est
exactement "exemple" :
SPAN[class=exemple] { color: blue; }
On peut utiliser plusieurs slecteurs d'attribut qui se rfrent plusieurs attributs d'un lment, ou mme, plusieurs
fois au mme attribut.
Exemple(s) :
Ici, le slecteur correspond avec tous les lments SPAN dont l'attribut "bonjour" a exactement la valeur "soleil"
et l'attribut "adieu" exactement la valeur "nuages" :
SPAN[bonjour="soleil"][adieu="nuages"] { color: blue; }
Exemple(s) :
Les slecteurs suivants illustrent la diffrence entre "=" et "~=". Le premier sera vrifi pour, en exemple, la
valeur "copyright copyleft copyeditor" de l'attribut "rel". Le second uniquement quand l'attribut "href" aura la
valeur "http://www.w3.org/".
A[rel~="copyright"]
A[href="http://www.w3.org/"]
Exemple(s) :
La rgle suivante cache tous les lments dont la valeur de l'attribut "lang" est "fr" (c..d. en langue franaise).
*[LANG=fr] { display : none }
Exemple(s) :
Cette rgleci sera vrifie pour les valeurs de l'attribut "lang" qui commence par "en", y inclus "en", "enUS" et
"encockney" :
*[LANG|="en"] { color : red }
Exemple(s) :
De la mme faon, la feuille de style auditive cidessous permet la lecture d'un dialogue avec des voix diffrentes
pour chaque personnage :
DIALOGUE[character=romeo]
{ voicefamily: "Lawrence Olivier", charles, male }
DIALOGUE[character=juliet]
{ voicefamily: "Vivien Leigh", victoria, female }
5.8.2 Les valeurs par dfaut des attributs dans les DTDs
La correspondance se fait sur les valeurs d'attributs dans l'arborescence du document. Pour des langages de
document autres que HTML, les valeurs par dfaut des attributs peuvent tre dfinies dans un DTD ou ailleurs.
Les feuilles de style devraient tre construites pour fonctionner mme si les valeurs par dfaut n'taient pas inclues
dans l'arborescence du document.
Exemple(s) :
Considrons, par exemple, un lment EXEMPLE avec un attribut "notation" et sa valeur par dfaut "decimal".
Un extrait du DTD pourrait tre :
<!ATTLIST EXEMPLE notation (decimal,octal) "decimal">
Si la feuille de style contient les rgles :

EXEMPLE[notation=decimal] { /*... paramtres par dfaut des proprits ...*/ }
37

EXEMPLE[notation=octal] { /*... autres paramtres ...*/ }
alors, pour les cas o l'attribut a une valeur par dfaut, non fix explicitement, il faudrait rajouter cette rgleci :
EXAMPLE { /*... paramtres par dfaut de la proprit ...*/ }
Ce slecteur tant moins spcifique qu'un slecteur d'attribut, celuici ne sera employ que dans les situations par
dfaut. Il faudra tenir compte explicitement de toutes les autres valeurs d'attribut qui ne doivent pas recevoir le
mme style que le dfaut.
5.8.3 Les slecteurs de classe
Pour les feuilles de style employe avec HTML, les auteurs, visant l'attribut "class", peuvent utiliser la notation
avec un point (.) en remplacement de celle avec "~=". Ainsi, "DIV.valeur" et "DIV[class~=valeur" ont la mme
signification en HTML. La valeur de l'attribut doit suivre immdiatement le caractre ".".
Exemple(s) :
Par exemple, on peut appliquer un style ceux des lment avec l'attribut class~="pastoral", comme suit
:
*.pastoral { color: green }
/* tous les lments avec class~=pastoral */
ou simplement avec :
.pastoral { color: green }
/* tous les lments avec class~=pastoral */
Dans ce qui suit, on applique seulement le style aux lments H1 avec l'attribut class~="pastoral" :
H1.pastoral { color: green }
/* les lments H1 avec class~=pastoral */
Selon ces rgles, le premier lment H1 n'aurait pas son texte en vert, au contraire du second :
<H1>Pas vert</H1>
<H1 class="pastoral">Vraiment vert</H1>
Pour une correspondance sur un sousensemble des valeurs de "class", chacune des valeurs doit tre prcde par
un ".", dans n'importe quel ordre.
Exemple(s) :
Par exemple, cette rgle suivante est vrifie pour chacun des lments P dont la valeur de l'attribut "class" est
constitue d'une suite de valeurs spares par des blancs, parmi cellesci "pastoral" et "marine" :
P.pastoral.marine { color: green }
La rgle est applique pour une valeur class="pastoral blue aqua marine", mais pas pour
class="pastoral blue".
Note : Avec une telle importance donne par CSS l'attribut "class", les auteurs pourraient presque construire
leur propre "langage de document" en partant d'lments qui ont une faible vocation prsentationnelle (comme
DIV et SPAN en HTML) et en leur appliquant un style via cet attribut. Les auteurs devraient viter une telle
pratique car les significations des lments de structure d'un langage de document sont reconnues et acceptes,
celles des classes dfinies par un auteur risquant de ne pas l'tre.
5.9 Les slecteurs d'ID

Les langages de document peuvent contenir des attributs dclars de type ID. Ceuxci sont particuliers dans la
mesure o il ne peut y avoir deux de ces attributs avec une mme valeur ; quel que soit le langage du document,
un attribut ID sert identifier un lment unique. En HTML, les attributs ID sont reprsents par "id" ; en XML,
les applications peuvent utiliser d'autres noms pour ceuxci, mais avec les mmes restrictions.
Les auteurs peuvent utiliser l'attribut ID d'un langage donn pour identifier une instance d'un lment dans
l'arborescence du document. Un slecteur d'ID de CSS correspond avec un tel lment au travers de l'identifiant
qui lui est assign. Ce slecteur est form du caractre "#" immdiatement suivi par la valeur de l'ID.
38

Exemple(s) :
Le slecteur d'ID suivant correspond l'lment H1 dont la valeur de l'attribut ID est "chapitre1" :
H1#chapitre1 { textalign: center }
Dans cet exemple, la rgle s'applique l'lment avec un ID dont la valeur est "z98y". Il s'agit de l'lment P :
<HEAD>
<TITLE>Toucher P</TITLE>
*#z98y { letterspacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Un texte largi</P>
</BODY>
Par contre, dans celuici, la rgle s'applique seulement un lment H1 avec un ID dont la valeur est "z98y". Ici,
l'lment P ne sera pas concern :
<HEAD>
<TITLE>Touche seulement H1</TITLE>
H1#z98y { letterspacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Un texte largi</P>
</BODY>
Les slecteurs d'ID sont plus spcifiques que les slecteurs d'attribut. En HTML, par exemple, le slecteur #p123
a plus de poids que le slecteur [ID=p123], en considrant la cascade.
Note : En XML 1.0 [XML10], c'est dans un DTD qu'on rpertorie les attributs qui contiennent les IDs des
lments. Au moment d'interprter un document XML, les agents utilisateurs ne lisant pas toujours le DTD,
ceuxci risquent de ne pas connatre l'ID d'un lment. Un auteur qui sait ou suspecte cette possibilit devrait
employer un slecteur d'attribut normal : [name=p371] plutt que #p371. Comme l'ordre de cascade diffre
selon qu'on emploie un slecteur d'attribut ou un slecteur d'ID, il peut tre ncessaire de complter les
dclarations avec une priorit "!important" : [name=p371] {color: red !important}. Bien entendu,
dans un document XML 1.0 sans DTD, les lments n'ont pas du tout d'IDs.
5.10 Les pseudolments et les pseudoclasses

En CSS2, le style est habituellement li un lment selon sa position dans l'arborescence du document. Ce
modle simple est suffisant la plupart du temps, mais du fait de la structure de cette arborescence, n'est pas adapt
dans certains contextes usuels de publication. Par exemple, en HTML 4.0 (voir [HTML40]), il n'existe pas
d'lments qui se rfrent la premire ligne d'un paragraphe, et donc aucun slecteur simple en CSS ne peut y
correspondre.
C'est pourquoi CSS introduit les concepts de pseudolments et de pseudoclasses ce qui permet une mise
en forme partir d'informations absentes de l'arborescence du document.
Les pseudolments crent des abstractions dans l'arborescence en plus des lments dj spcifis par le
langage du document. Ainsi, certains langages n'offrent pas de mcanismes de correspondance avec la
premire lettre ou la premire ligne du contenu d'un lment. Les pseudolments de CSS permettent
aux auteurs d'y accder, ce qui serait autrement impossible. Ce type d'lment leur permet de donner un
style un contenu qui n'apparat mme pas dans le document source. Par exemple, les pseudolments
:before et :after autorisent une action sur un contenu gnr.
Les pseudoclasses classent les lments selon des caractristiques autres que leur nom, attribut ou
contenu, cellesci ne pouvant pas en principe tre dduites de l'arborescence du document. Les
pseudoclasses peuvent tre dynamiques, dans le sens o un lment peut les acqurir ou les perdre
pendant l'interaction de l'utilisateur avec le document. Une exception, la pseudoclasse ':firstchild', qui
peut se dduire de l'arborescence. La pseudoclasse ':lang()' galement dans certains cas.
Ni les pseudolments, ni les pseudoclasses n'apparaissent dans la source ou l'arborescence du document.
39

On peut placer les pseudoclasses tout endroit d'un slecteur, alors que les pseudolments ne peuvent y
apparatre qu'aprs le sujet.
Les pseudolments et pseudoclasses sont insensibles la casse.
Certaines pseudoclasses s'excluent mutuellement, d'autres peuvent s'appliquer simultanment au mme lment.
Les conflits ventuels se rsolvent selon l'ordre normal de cascade.
Les agents utilisateurs conformes HTML peuvent ignorer toutes les rgles comportant dans leur slecteurs les
pseudolments :firstline ou :firstletter, ou bien, peuvent alternativement ne supporter qu'une partie de leurs
proprits.
5.11 Les pseudoclasses

5.11.1 La pseudoclasse :firstchild
La pseudoclasse :firstchild correspond au premier lment enfant d'un autre lment.
Exemple(s) :
Dans l'exemple suivant, le slecteur dsigne chacun des lments P qui soit le premier enfant d'un lment DIV.
La rgle supprime l'alina du premier paragraphe d'un lment DIV :
DIV > P:firstchild { textindent: 0 }
Dans l'extrait suivant, ce mme slecteur viserait l'lment P dans l'lment DIV :
<P> Le dernier P avant la note.
<DIV class="note">
<P> Le premier P l'intrieur de la note.
</DIV>
mais, dans cet extraitci, il ne toucherait pas le second lment P :

<P> Le dernier P avant la note.
<DIV class="note">
<H2>Note</H2>
<P> Le premier P l'intrieur de la note.
</DIV>
Exemple(s) :
La rgle suivante applique un style de texte gras chacun des lment EM descendants d'un lment P, celuici
tant un premier enfant :
P:firstchild EM { fontweight : bold }
Noter que les botes anonymes n'apparaissent pas dans l'arborescence du document, c'est pourquoi elles ne sont
pas prises en compte au moment de la mise en forme du premier enfant.
Par exemple, l'lment EM qui est dans :
<P>abc <EM>dfaut</EM>
celuici est le premier enfant de l'lment P.

Les deux slecteurs suivants sont quivalents :
* > A:firstchild
A:firstchild
/* A est le premier enfant pour tout lment */

/* Idem */
5.11.2 Les pseudoclasses d'ancre : :link et :visited

En gnral, les agents utilisateurs reprsentent diffremment les liens qui n'ont pas t visits de ceux qui l'ont
dj t. CSS en fournit un quivalent au travers des pseudoclasses ':link' et ':visited'.
La pseudoclasse :link s'applique aux liens qui n'ont pas t visits ;
40

La pseudoclasse :visited s'applique quand le lien a t visit par l'utilisateur.
Note : Aprs un certain temps, les agents utilisateurs peuvent revenir de l'tat visit l'tat nonvisit du lien.
Ces deux tats s'excluent mutuellement.
Le langage du document dtermine quelles ancres ont des sources hyperliens. Ainsi en HTML 4.0, les
pseudoclasses d'ancre s'appliquent aux lments A avec un attribut "href". Les deux dclarations CSS2 suivantes
produisent le mme effet :
A:link { color: red }
:link { color: red }
Exemple(s) :
Pour ce lien :
<A class="external" href="http://out.side/">lien externe</A>
si celui est visit, la rgle suivante :

A.external:visited { color: blue }
celleci fera que la couleur du lien soit bleue.

5.11.3 Les pseudoclasses dynamiques : :hover, :active et :focus
Les agents utilisateurs interactifs changent parfois l'aspect du rendu en rponse aux actions de l'utilisateur. CSS2
propose trois pseudoclasses pour un usage courant :
La pseudoclasse :hover, qui est applique quand l'utilisateur dsigne un lment (au moyen d'un appareil
de pointage) sans l'activer. Par exemple, un agent utilisateur visuel pourrait appliquer celleci quand le
curseur (d'une souris) survole la bote produite par un lment. Les agents utilisateurs qui n'ont pas de
capacits interactives ne sont pas tenus d'appliquer cette pseudoclasse. Certains agents utilisateurs
conformes dots de ces capacits interactives peuvent tre incapables de l'appliquer (ex. un crayon) ;
La pseudoclasse :active, qui est applique quand l'utilisateur active un lment. Par exemple, entre le
moment o l'utilisateur presse le bouton de la souris et le relche.
La pseudoclasse :focus, qui s'applique quand un lment reoit l'attention (celuici acceptant les
vnements du clavier ou d'autres formes d'entres de texte).
Ces pseudoclasses ne s'excluent pas mutuellement. Un lment peut correspondre plusieurs d'entre elles au
mme moment.
CSS ne dfinit pas lesquels des lments peuvent tre dans un de ces tats ou comment ceuxci entrent et sortent
de ces tats. L'criture peut varier, selon que les lments ragissent aux actions de l'utilisateur, ou non ; les divers
appareils et agents utilisateurs peuvent avoir diffrentes faons de dsigner ou d'activer les lments.
Les agents utilisateurs ne sont pas tenus, en raison des transitions provoques par les pseudoclasses, de remettre
en forme le document en cours d'affichage. Par exemple, une feuille de style peut spcifier que la taille de la
police ('fontsize') d'un lien sous l'effet de la pseudoclasse :active soit plus grande que celle d'un lien inactif, et
un agent utilisateur, comme cela peut modifier la position des lettres, peut en ignorer la rgle.
Exemple(s) :
A:link
A:visited
A:hover
A:active
{
{
{
{
color:
color:
color:
color:
red }
/*
blue }
/*
yellow } /*
lime }
/*
lien
lien
lien
lien
nonvisit */
visit
*/
survol
*/
activ
*/
Noter que la rgle A:hover doit tre plac aprs A:link et A:visited, autrement les rgles de cascade feront que la
proprit 'color' spcifie par celleci sera cache. De la mme faon, comme la rgle A:active est place aprs
A:hover, la couleur spcifie par celleci (lime) sera applique quand l'utilisateur active et survole l'lment A.
Exemple(s) :
Voici un exemple de combinaison de pseudoclasses dynamiques :
41

A:focus { background: yellow }
A:focus:hover { background: white }
Le dernier slecteur correspond un lment A qui a l'attention et qui est survol.

Au sujet de la reprsentation des contours de l'objet qui a l'attention, consulter le chapitre sur les contours
dynamiques pour l'attention.
Note : En CSS1, la pseudoclasse ':active' et les pseudoclasses ':link' et ':visited' s'excluaient mutuellement. Ce
n'est plus le cas. Un lment peut correspondre aux pseudoclasses ':visited' et ':active' (ou ':link' et ':active'), les
rgles de cascade normales dterminant lesquelles des proprits s'appliquent.
5.11.4 La pseudoclasse de langue : :lang
Quand le langage du document spcifie une manire de dterminer le langage humain d'un lment, on peut crire
des slecteurs CSS pour viser un lment selon la langue que celuici emploie. Par exemple en HTML
[HTML40], on peut dterminer la langue employe en combinant l'attribut "lang", l'lment META et, d'une
certaine faon, des informations issues du protocole (tel que les enttes HTTP). En XML, on utilise un attribut
nomm xml:lang, d'autres mthodes de dtermination spcifiques au langage d'un document pouvant exister.
La pseudoclasse ':lang(C)' est vrifie pour un lment dans la langue C. La lettre C reprsente un code de
langue tel que spcifi dans HTML 4.0 [HTML40] et RFC 1766 [RFC1766]. La correspondance s'effectue de la
mme faon que pour l'oprateur '|='.
Exemple(s) :
Les rgles suivantes fournissent les marques de citations pour un document HTML, selon que celuici est en
franais ou en allemand :
HTML:lang(fr)
HTML:lang(de)
:lang(fr) > Q
:lang(de) > Q
{
{
{
{
quotes:
quotes:
quotes:
quotes:
' ' ' ' }

'' '' '\2039' '\203A' }
' ' ' ' }
'' '' '\2039' '\203A' }
La seconde paire de rgles applique en fait la proprit 'quotes' aux lments Q, en fonction de la langue du
parent. Ceci pour tenir compte du choix des marques de citations, cellesci dpendent typiquement de la langue
employe par l'lment qui les contient, et non de la citation ellemme. Ainsi, ce morceau d'anglais qui devrait
etre by surprise (et non by surprise), au milieu de cette phrase en franais.
5.12 Les pseudolments

5.12.1 Le pseudolment :firstline
Le pseudolment :firstline produit un style particulier sur la premire ligne formate d'un paragraphe. Par
exemple :
P:firstline { texttransform: uppercase }
La rgle prcdente signifie "mettre les lettres de la premire ligne de chaque paragraphe en majuscule".
Cependant, le slecteur "P:firstline" ne correspond aucun lment HTML rel. Celuici correspond en fait un
pseudolment que l'agent utilisateur conforme va insrer au dbut de chaque paragraphe.
Noter que la longueur de la premire ligne dpend de plusieurs facteurs, dont la largeur de la page, la taille de la
police, etc. Ainsi un paragraphe quelconque en HTML tel que :
<P>Voici un paragraphe HTML plutt
long qui va tre dcoup en plusieurs
lignes. La premire ligne sera identifie
l'aide d'une squence de balises fictives.
Les autres lignes vont rester ordinaires
dans la suite du paragraphe.</P>
Celuici va apparatre avec le dcoupage des lignes suivant :

VOICI UN PARAGRAPHE HTML PLUTT LONG
qui va tre dcoup en plusieurs lignes.
La premire ligne sera identifie
42

l'aide d'une squence de balises fictives.
Les autres lignes vont rester ordinaires
dans la suite du paragraphe.
Un agent utilisateur pourrait le "rcrire" et y inclure la squence de balises fictives pour le pseudolment
:firstline. Cette squence fictive aide reprsenter comment les proprit sont hrites.
<P><P:firstline>Voici un paragraphe HTML plutt
long </P:firstline>qui va tre dcoup
en plusieurs lignes. La premire ligne sera identifie
l'aide d'une squence de balises fictives. Les autres lignes
vont rester ordinaires dans la suite du paragraphe.</P>
Quand un pseudolment coupe un lment rel, on peut souvent dcrire l'effet dsir avec une squence de
balises fictives qui ferment puis rouvrent cet lment. Ainsi, si on balise le paragraphe de l'exemple avec un
lment SPAN :
<P><SPAN class="test">Voici un paragraphe HTML plutt long
qui va tre dcoup en plusieurs lignes.</SPAN>
La premire ligne sera identifie l'aide d'une squence
de balises fictives. Les autres lignes vont rester ordinaires dans la suite du
paragraphe.</P>
L'agent utilisateur pourrait gnrer la squence de balises fictives, ouvrantes et fermantes, de faon approprie,
pour l'lment SPAN au moment d'insrer celle du pseudolment :firstline.
<P><P:firstline><SPAN class="test"> Voici un paragraphe
HTML plutt long</SPAN></P:firstline><SPAN class="test"> qui
va tre dcoup en plusieurs lignes.</SPAN> La
premire ligne sera identifie l'aide d'une squence de
balises fictives. Les autres lignes vont rester ordinaires dans la suite du
paragraphe.</P>
Dans le cas o une certaine premire ligne est aussi la premire d'un certain lment de type bloc A et en mme
temps que l'anctre B de celuici, la squence de balise fictive devient :
<B>...<A>...<B:firstline><A:firstline>Voici la premire ligne</A:firstline></B:firstline>
Toutes les balises fictives se trouvent dans le plus petit des lment de type bloc, l'ordre d'imbrication des balises
fictives A:firstline et B:firstline correspondant celui des lments A et B.
La "premire ligne mise en forme" d'un lment de type bloc correspond la premire ligne dans le flot de
l'lment, ignorant ainsi d'ventuels lments flottants ou en position absolue. Par exemple :
<div>
<p style="float: left">Paragraphe flottant...</p>
<p>La premire ligne commence ici...</p>
</div>
Un slecteur 'div:firstline' s'appliquerait la premire ligne du second paragraphe, car le premier paragraphe se
trouve en dehors du flot normal.
Le pseudolment :firstline ne peut s'attacher qu' un lment de type bloc.
Le pseudolment :firstline est similaire un lment de type enligne, avec certaines restrictions. Seules les
proprits suivantes peuvent lui tre appliques : les proprits de police, les proprits de couleur, les proprits
d'arrireplan, 'wordspacing', 'letterspacing', 'textdecoration', 'verticalalign', 'texttransform', 'lineheight',
'textshadow' et 'clear'.
5.12.2 Le pseudolment :firstletter
Le pseudolment :firstletter peut tre employ pour faire des capitales initiales et des lettrines, ce sont des
effets typographiques courants. Ce genre de lettre initiale est assimil un lment de type enligne quand la
valeur de sa proprit 'float' est 'none', et assimil un lment flottant autrement.
Le pseudolment :firstletter admet ces proprits : les proprits de police, les proprits de couleur, les
proprits d'arrireplan, 'textdecoration', 'verticalalign' (seulement si la valeur de la proprit 'float' est 'none'),
'texttransform', 'lineheight', les proprits de marge, les proprits d'espacement, les proprits de bordure,
'float', 'textshadow' et 'clear'.
43

Cette feuille de style produit une lettrine qui s'tend sur deux lignes :
<HTML>
<HEAD>
<TITLE>Lettrine</TITLE>
P
{ fontsize: 12pt; lineheight: 12pt }
P:firstletter { fontsize: 200%; fontstyle: italic;
fontweight: bold; float: left }
SPAN
{ texttransform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>Les premiers</SPAN> mots parmi ceux d'un article
de journal.</P>
</BODY>
</HTML>
Ce qui pourrait apparatre de cette manire :
La squence de balises fictives en est :

<P>
<SPAN>
<P:firstletter>
L
</P:firstletter>es premiers
</SPAN>
mots parmi ceux d'un article de journal.
</P>
Noter que les balises du pseudolment :firstletter (c..d., le premier caractre) viennent buter contre le
contenu, alors que la balise ouvrante du pseudolment :firstline s'insre juste aprs celle ouvrante de l'lment
auquel il est accol.
Pour obtenir le formatage des lettrines traditionnelles, les agents utilisateurs peuvent approcher les tailles des
polices, par exemple dans l'alignement des lignes de base. Le contour des glyphes peut aussi intervenir dans le
formatage.
Les caractres de ponctuation (c..d. les caractres dfinis en Unicode [UNICODE] dans les classes de
ponctuation "open" (Ps), "close" (Pe) et "other" (Po) ), qui prcdent la premire lettre, ceuxci devraient tre pris
en compte, comme ici :
Le pseudolment :firstletter ne peut correspondre qu'avec une partie d'un lment de type bloc.
Certaines combinaisons de lettres, dans une langue donne, peuvent obir des rgles particulires. En hollandais,
par exemple, quand la combinaison "ij" survient au dbut d'un mot, le pseudolment :firstletter devrait les
prendre en compte ensemble.
Exemple(s) :
L'exemple suivant illustre l'interaction de pseudolments qui sont enchevtrs. La premire lettre de chacun
des lments P sera verte et aura une taille de police de '24pt'. La suite de cette premire ligne sera bleue, le reste
des lignes du paragraphe sera rouge.
P { color: red; fontsize: 12pt }
P:firstletter { color: green; fontsize: 200% }
P:firstline { color: blue }
44
<P>Voici un morceau de texte qui est format sur deux lignes.</P>
En supposant qu'un retour la ligne survient avant le mot "sur", la squence de balises fictives en serait :
<P>
<P:firstline>
<P:firstletter>
V
</P:firstletter>oici un morceau de texte qui est format
</P:firstline>
sur deux lignes.
</P>
Noter que l'lment P:firstletter se tient l'intrieur de l'lment P:firstline. Le pseudolment :firstletter
hrite des proprits appliques au pseudolment :firstline, cependant, si on lui spcifie une mme proprit,
c'est la valeur de cette dernire qui sera retenue.
5.12.3 Les pseudolments :before et :after
Les pseudolment ':before' et ':after' servent insrer un contenu gnr avant ou aprs celui d'un lment. Le
chapitre sur le texte gnr en donne une explication.
Exemple(s) :
H1:before {content: counter(chapno, upperroman) ". "}
En combinaison avec les pseudolments :firstline et :firstletter, les pseudolments :before et :after
s'appliquent la premire lettre ou la premire ligne, y compris le texte insr.
Exemple(s) :
P.special:before {content: "Spcial ! "}
P.special:firstletter {color: gold}
Ceci donnera une couleur or au "S" de "Spcial ! ".
45
6 L'assignation des valeurs des proprits, la cascade et

l'hritage
6.1 Les valeurs spcifies, calcules et relles
Une fois qu'un agent utilisateur a parcouru un document et en a construit une arborescence, celuici, pour chacun
des lment de l'arborescence, doit distribuer une valeur pour chacune des proprits concernes du type de mdia
vis.
La valeur finale d'uneproprit est le rsultat d'un calcul en trois tapes : celleci est dtermine par la
spcification (la valeur "spcifie"), puis rsolue dans une valeur absolue si ncessaire (la valeur "calcule") et
finalement transforme en accord avec les contraintes de son contexte (la valeur "relle").
6.1.1 Les valeurs spcifies
Les agents utilisateurs doivent d'abord appliquer une valeur spcifie une proprit selon le mcanisme suivant
(dans l'ordre de priorit) :
1. Si la cascade donne une valeur, utiliser celleci ;
2. Autrement, si la proprit est hrite, utiliser la valeur de l'lment parent, qui est en gnral une valeur
calcule ;
3. Autrement, utiliser la valeur initiale de la proprit. Cette valeur initiale est dfinie pour chaque proprit.
La racine de l'arborescence du document n'ayant pas de parent, et ne pouvant donc pas hriter de valeurs, c'est la
valeur initiale qui est utilise si ncessaire.
6.1.2 Les valeurs calcules
Les valeurs spcifies peuvent tre absolues (ex. les valeurs 'red' et '2mm' ne sont pas relatives une autre valeur)
ou relatives (ex. les valeurs 'auto', '2em' et '12%' se rapportent une autre valeur). Une valeur absolue ne requiert
aucune opration supplmentaire pour tablir sa valeur calcule.
Par contre, une valeur relative doit subir une transformation qui aboutit sa valeur calcule : une valeur en
pourcentage doit tre multiplie par une valeur de rfrence (celleci est prcise pour chaque proprit), une
valeur avec une unit relative (em, ex, px) doit tre doit devenir absolue par multiplication avec les tailles de
police ou de pixel appropries, les valeurs 'auto' doivent tre calcule selon les formules donnes pour chaque
proprit, certains motscls ('smaller', 'bolder', 'inherit') doivent tre remplacs en accord avec leurs dfinitions.
Dans la plupart des cas, les lments hritent de valeurs calcules. Cependant, certaines proprits ont des valeurs
spcifies qui sont hrites (ex. la valeur numrique de la proprit 'lineheight'). Dans les cas o les lments
enfants n'hritent pas de valeurs calcules, ceci est dcrit dans les dfinitions des proprits.
6.1.3 Les valeurs relles
Bien qu'une valeur calcule soit en principe prte l'emploi, un agent utilisateur peut ne pas pouvoir l'utiliser dans
un environnement donn. Par exemple, celuici ne peut rendre les paisseurs des bordures qu'avec un nombre
entier de pixels, en consquence, il lui faudra trouver une valeur approchante. La valeur relle est gale la valeur
calcule aprs approximation ventuelle.
6.2 L'hritage
Les lments enfants hritent de certaines valeurs de leurs lments parents dans l'arborescence du document.
Chacune des proprit dfinit si elle est hrite, ou non.
Supposons un lment accentu (ici EM) dans un lment H1 :
<H1>Le titre <EM>est</EM> important !</H1>
Si aucune couleur n'est prcise pour l'lment EM, le mot accentu "est" hritera de la couleur de l'lment
parent, ainsi l'lment H1 ayant une couleur bleu, EM le sera galement.
46

Pour appliquer une proprit de style "par dfaut" un document, un auteur peut l'appliquer la racine de
l'arborescence du document. Par exemple en HTML, on peut utiliser les lments HTML ou BODY pour cet
usage. Noter que ceci fonctionnera m si on omet la balise BODY dans la source HTML, l'interprteur HTML
infrant la balise manquante.
Exemple(s) :
Par exemple ici, tous les descendants de l'lment BODY auront la valeur de couleur 'black', la proprit 'color'
tant hrite :
BODY { color: black; }
Les valeurs de pourcentage spcifies ne sont pas hrites, celles calcules le sont.
Exemple(s) :
Par exemple, cette feuille de style :
BODY { fontsize: 10pt }
H1 { fontsize: 120% }
et cet extrait d'un document :

<BODY>
<H1>Un <EM>grand</EM> titre</H1>
</BODY>
Ici, la proprit 'fontsize' de l'lment H1 aura une valeur calcule de '12pt' (120% de la valeur de son parent).
Et, comme la valeur de la proprit 'fontsize' est hrite, la valeur calcule pour l'lment EM sera aussi '12pt'. Si
l'agent utilisateur ne dispose pas d'une police de 12pt mais, par exemple, d'une police de 11pt, la valeur relle de la
proprit 'fontsize' de ces lments pourrait tre '11pt'.
6.2.1 La valeur 'inherit'
On peut spcifier pour chacune des proprits la valeur 'inherit', ce qui signifie, pour un lment donn, que la
proprit de cet lment prend la mme valeur calcule que pour celle de son parent. La valeur hrite qui est
normalement utilise comme une valeur refuge, peut tre renforce par une valeur 'inherit' explicite.
[Errata: La valeur 'inherit' provoque l'hritage des valeurs par les proprits. Ceci s'applique galement aux
proprits dont la valeur n'est normalement pas hrite.]
Exemple(s):
Dans l'exemple cidessous, on applique les proprits 'color' et 'background' l'lment BODY. La valeur de
'color' sera hrite par tous ses lments et leur fond sera transparent. Si ces rgles font partie de la feuille de style
de l'utilisateur, un texte en noir sur fond blanc sera respect dans tout le document.
BODY {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent;
}
6.3 La rgle @import

La rgle '@import' permet aux utilisateurs l'importation de rgles de style partir d'une autre feuille de style. Les
rgles @import doivent prcder toutes autres rgles dans la feuille de style. Le motcl '@import' doit tre suivi
de l'URI de la feuille de style intgrer. On admet aussi la forme avec une chane, celleci sera considre comme
tant enserre dans url(...).
Exemple(s) :
47

Les lignes suivantes ont une signification quivalente et illustrent les deux syntaxes (celle avec "url()" et celle
avec une simple chane) :
@import "mystyle.css";
@import url("mystyle.css");
Comme les agents utilisateurs ne sont pas tenus de rassembler les ressources pour des types de mdia inconnus
d'eux, les auteurs peuvent spcifier des rgles @import selon les mdias requis. Les imports conditionnels
prcisent leurs types, spars par des virgules aprs l'URI.
Exemple(s) :
Les feuilles de styles importes et enveloppes dans une rgle @media produiraient les mmes effets, avec ce
mdia, que les feuilles de style suivantes, nanmoins ces dernires peuvent pargner aux agents utilisateurs des
requtes sans fondement.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
Si le type de mdia n'est pas prcis, l'import est inconditionnel. De mme, si on spcifie le type de mdia 'all'.
6.4 La cascade
Les feuilles de style ont trois origines diffrentes : l'auteur, l'utilisateur et l'agent utilisateur.
L'auteur : produit des feuilles de style pour un document source selon les conventions du langage de ce
document. Par exemple en HTML, cellesci peuvent tre incorpores dans le document ou relies
celuici.
L'utilisateur : peut tre capable d'indiquer une information de style pour un document particulier. Par
exemple, celuici peut dsigner une feuille de style contenue dans un fichier ou un agent utilisateur peut
fournir l'interface pour produire une feuille de style personnelle (ou faire comme s'il l'avait fait).
L'agent utilisateur: l'agent utilisateur conforme doit appliquer sa feuille de style par dfaut (ou faire
comme s'il l'avait fait) avant toutes les autres feuilles de style d'un document. Cette feuille de style devrait
prsenter les lments du langage du document de faon satisfaire au rendu gnralement admis pour
ceuxci dans ce langage. Par exemple, pour des navigateurs visuels, l'lment EM en HTML est rendu
avec une police en italique. Voir l'appendice A pour une feuille de style par dfaut recommande pour les
documents HTML 4.0.
Noter que cette feuille de style par dfaut peut varier si l'utilisateur change les rglages de son systme
(ex. les couleurs du systme). Cependant, il peut tre impossible de modifier les valeurs de celleci, en
raison d'une implmentation rduite de l'agent utilisateur.
Les champs d'action de ces trois feuilles de style vont se recouper, leur interaction dpendant des rgles de la
cascade.
La cascade de CSS dfinit un ordre de priorit, ou poids, pour chaques rgles de style. Quand plusieurs rgles sont
mises en uvre, celle avec le plus grand poids a prsance.
Les rgles des feuilles de style de l'auteur ont, par dfaut, plus de poids que celles de l'utilisateur. Au contraire,
l'ordre de priorit est invers pour les rgles "!important". Les rgles d'un auteur et d'un utilisateur sont prioritaires
sur celles de la feuille de style par dfaut de l'agent utilisateur.
Les feuilles de style importes suivent aussi la cascade, leur poids dpendant de leur ordre d'importation. Des
rgles tant spcifies dans une feuille de style donne, cellesci remplacent les rgles de mme poids importes
d'une autre feuille de style. Les feuilles de style importes peuvent ellesmme importer et remplacer d'autres
feuilles de style, rcursivement, les mmes rgles de prsance leur tant appliques.
6.4.1 L'ordre de cascade
Pour trouver la valeur d'une combinaison lment/proprit, les agents utilisateurs doivent suivre l'ordre de tri
suivante :
1. Trouver toutes les dclarations qui concernent l'lment et la proprit en question, pour le type de mdia
vis. Cellesci s'appliquent si le slecteur correspond cet lment ;
48

2. Un tri primaire est effectu sur les dclarations selon leur poids et leur origine : pour une dclaration
normale, les feuilles de style de l'auteur surclassent celles de l'utilisateur, ces dernires surclassant la
feuille de style par dfaut. Pour une dclaration avec "!important", cellesci surclassent les dclarations
normales. Une feuille de style importe est rpute avoir la mme origine que celle qui l'a importe ;
3. Un tri secondaire est effectu selon la specificit des slecteurs : les plus spcifiques surclasseront ceux
plus gnraux. Les pseudolments et les pseudoclasses sont considrs respectivement comme des
lments et des classes normaux ;
4. Un tri final selon l'ordre de spcification : si deux rgles ont les mmes poids, origines et spcifits, c'est
la dernire survenue qui l'emporte. Les rgles issues de feuilles de style importes sont considres
comme tant survenues avant chacune de celles de la feuille de style ellemme.
Mis part le cas de la valeur "!important" attache certaines dclarations individuelles, cette stratgie donne aux
feuilles de style de l'auteur priorit sur celles de l'utilisateur. C'est pourquoi, il est important que l'agent utilisateur
lui laisse la possibilit de neutraliser l'effet d'une feuille de style donne (ex. au moyen d'un menu droulant).
6.4.2 Les rgles avec la valeur !important
CSS essaye de prserver un quilibre entre les prrogatives de l'auteur et celles de l'utilisateur. Par dfaut, les
rgles d'une feuille de style de l'auteur surclassent celles de l'utilisateur (voir la rgle de cascade numro 3).
Par souci d'quilibre, les dclarations avec "!important" (les motscls "!" et "important" suivent la dclaration)
tablissent ainsi leur prsance sur les dclarations normales. Aussi bien les feuilles de style de l'auteur que celles
de l'utilisateur peuvent contenir des dclarations avec "!important", celles de l'utilisateurs ayant priorit. Cette
fonction de CSS amliore l'accessibilit des documents, offrant ceux des utilisateurs qui ont des besoins
particuliers (une grande taille de police, d'autres combinaisons de couleur, etc.), une certaine matrise de la
prsentation.
Note : Voici un changement smantique par rapport CSS1. Dans cette spcificationl, les rgles avec
"!important" d'un auteur avaient prsance sur celles de l'utilisateur.
Le fait de dclarer une proprit raccourcie (ex. 'background') avec la valeur "!important" confre ce poids
toutes ses sousproprits.
Exemple(s) :
Dans l'exemple cidessous, la premire rgle de la feuille de style de l'utilisateur comporte une dclaration
"!important", celleci surclasse la dclaration correspondante dans la feuille de l'auteur. La deuxime va
galement l'emporter, tant marque "!important". Cependant, en l'absence de cette marque, la troisime de
l'utilisateur ne sera pas retenue, au profit de la deuxime de l'auteur (par ailleurs, un style appliqu avec une
proprit raccourcie). Autrement, sur la deuxime et la troisime rgle de l'auteur, c'est la deuxime qui sera
retenue, la troisime n'tant pas marque "!important". Ceci montre que ce genre de dclaration a bien une
fonction, mme au sein des feuilles de style de l'auteur.
/* Extrait de la feuille de style de l'utilisateur */
P { textindent: 1em ! important }
P { fontstyle: italic ! important }
/* Extrait de la feuille de style de l'auteur */
P { textindent: 1.5em !important }
P { font: 12pt sansserif !important }
6.4.3 Le calcul de la spcifit d'un slecteur

La spcifit d'un slecteur est dtermine comme suit :
dans le slecteur, compter le nombre d'attributs Id (= a) ;
puis celui des autres attributs et des pseudoclasses (= b) ;
et ensuite le nombre de noms des lments (= c) ;
ignorer les pseudoelements.
Assembler les trois nombres abc (dans un systme de nombre avec une base tendue) pour obtenir la
spcificit.
Exemple(s) :
49

Des exemples :
*
{}
LI
{}
UL LI
{}
UL OL+LI
{}
H1 + *[REL=up]{}
UL OL LI.red {}
LI.red.level {}
#x34y
{}
/*
/*
/*
/*
/*
/*
/*
/*
a=0
a=0
a=0
a=0
a=0
a=0
a=0
a=1
b=0
b=0
b=0
b=0
b=1
b=1
b=2
b=0
c=0
c=1
c=2
c=3
c=1
c=3
c=1
c=0
>
>
>
>
>
>
>
>
specificit
specificit
specificit
specificit
specificit
specificit
specificit
specificit
=
0
=
1
=
2
=
3
= 11
= 13
= 21
= 100
*/
*/
*/
*/
*/
*/
*/
*/
Pour HTML, les valeurs de l'attribut "style" sont des rgles de feuille de style. Ces rgles n'ont pas de slecteurs,
mais dans l'optique du point 3 de l'algorithme de cascade, on considre qu'elles ont un slecteur d'ID (specificit :
a=1, b=0, c=0). Et dans l'optique du point 4, on considre qu'elles surviennent aprs toutes les autres rgles.
<HEAD>
#x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>
Dans l'exemple cidessus, l'lment P aura la couleur rouge. Bien que la specificit soit la mme pour les deux
dclarations, la valeur dans la rgle de l'attribut "style" surclassera celle qui lui correspond de l'lment STYLE du
fait du point 4 des rgles de cascade.
Note : La specificit est seulement base sur la forme du slecteur. En effet, un slecteur de la forme "[id=p33]"
est compt comme un slecteur d'attribut (a=0, b=1, c=0), mme si l'attribut "id" est dfini comme un "ID" dans le
DTD du document source.
6.4.4 L'ordre de priorit des indications de prsentation en dehors de CSS
L'agent utilisateur peut privilgier les indications de prsentation provenant d'autres sources que les feuilles de
style, par exemple l'lment FONT ou l'attribut "align" en HTML. Dans ce cas, ces indications doivent tre
traduites dans leurs rgles quivalentes de CSS avec une specificit gale zro. Ces rgles sont senses se
trouver au dbut de la feuille de style de l'auteur, permettant leur surclassement par les rgles subsquentes de
cette feuille de style.
Note : Durant une priode de transition, cette manire de faire facilitera la coexistence des attributs stylistiques
et des feuilles de style.
Note : Pour CSS1, ces indications de prsentations en dehors de CSS avaient une specificit gale 1, et non O.
Ce changement est du l'introduction du slecteur universel, qui a une specificit de 0.
50
7 Les types de mdias

7.1 Introduction aux types de mdias
Une des fonctions primordiales des feuilles de style repose sur le fait de pouvoir adapter la reprsentation d'un
document pour diffrents mdias : un cran, une feuille de papier, un synthtiseur de parole, un appareil braille,
etc.
Certaines proprits CSS fonctionnent exclusivement avec un mdia donn (ex. la proprit 'cuebefore' pour les
agents utilisateurs auditifs). Cependant, il peut arriver qu'une mme proprit fasse partie de diffrentes feuilles de
style propres un mdia, cette proprit prenant alors des valeurs en fonction de ce mdia. Par exemple, la
proprit 'fontsize' peut jouer un rle aussi bien dans un rendu sur cran que dans une page imprime. Ces deux
mdias sont suffisamment dissemblables pour ncessiter des valeurs particulires pour cette mme proprit ; le
rendu typique d'un document sur un moniteur demande une plus grande taille de police que sur une feuille de
papier. L'exprience montre galement que les polices sansserif ont une plus grande lisibilit l'cran, et
inversement, que les polices serif sont plus lisibles sur le papier. Pour ces raisons, il faut pouvoir dire qu'une
feuille de style, ou une partie de celleci, ne concerne que certains types de mdias.
7.2 La spcification des feuilles de style en fonction du mdia

Pour l'instant, on peut adjoindre les feuilles de style appropries aux mdias concernes de deux faons :
En spcifiant le mdia vis dans la feuille de style au travers des rglesat @media ou @import ;
Exemple(s) :
@import url("loudvoice.css") aural;
@media print {
/* la feuille de style pour l'impression vient ici */
}
En spcifiant le mdia vis dans le langage du document. Par exemple avec HTML 4.0 ([HTML40]), on
utilise l'attribut "media" de l'lment LINK pour attacher une feuille de style externe un mdia donn :
<HTML>
<HEAD>
<TITLE>Un lien vers le mdia cible</TITLE>
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
</HEAD>
<BODY>
<P>Le corps du document...
</BODY>
</HTML>
La rgle @import est dfinie dans le chapitre sur la cascade.

7.2.1 La rgle @media
Une rgle @media spcifie les types de mdias (spars par des virgules) d'un jeu de rgles (entres des accolades).
La construction @media prcise les rgles pour les divers mdias dans la mme feuille de style :
@media
BODY
}
@media
BODY
}
@media
BODY
}
print {
{ fontsize: 10pt }
screen {
{ fontsize: 12pt }
screen, print {
{ lineheight: 1.2 }
7.3 Les types de mdias reconnus

Un type de mdia nomme un jeu de proprits CSS. Un agent utilisateur qui prtend reconnatre un type de
mdia par son nom doit en appliquer toutes les proprits.
51

Les noms choisis pour les types de mdias CSS rappellent celui des appareils cibles pour lesquels les proprits
sont significatives. Suit la liste des types de mdias, les descriptions entre parenthses ne sont pas normatives. Ces
descriptions donnent seulement une indication sur le l'appareil auquel le type de mdia se rfre.
all
convient pour tous les appareils ;
aural
destin aux synthtiseurs de parole. Voir les dtails fournis dans le chapitre sur les feuilles de style
auditives
braille
destin aux appareils braille retour tactile ;
embossed
destin aux appareils impression braille ;
handheld
destin aux appareils portatifs (typiquement ceux avec petits crans, monochromes et bande passante
limite) ;
print
destin un support pagin opaque et aux documents vus sur cran en mode de prvue avant impression.
Consulter le chapitre sur les mdias pagins pour des informations sur les questions de mise en forme
spcifiques ceuxci ;
projection
destin aux prsentations en projection, par exemple avec des projecteurs ou des impressions pour des
transparents. Consulter le chapitre sur les mdias pagins pour des informations sur les questions
spcifiques ceuxci ;
screen
destin principalement aux moniteurs couleurs ;
tty
destin aux mdias utilisant une grille de caractres fixe, tels les tltypes, les terminaux ou les appareils
portatifs aux capacits d'affichage rduites. Les auteurs ne devraient pas utiliser de valeurs exprimes en
pixel avec ce type de mdia ;
tv
destin aux appareils du type tlvision (avec ces caractristiques : basse rsolution, couleur, dfilement
des pages limit, sonoris).
Les noms des types de mdias ne sont pas sensibles la casse.
Comme les technologies voluent rapidement, CSS2 n'arrte pas une liste dfinitive des types de mdias pouvant
tre des valeurs pour @media.
Note : Des versions ultrieures de CSS pourraient accrotre cette liste. Les auteurs ne devraient pas employer de
noms de types de mdias qui ne sont pas encore dfinis par la spcification CSS.
7.3.1 Les groupes de mdias
Chacune des proprits CSS dfinit les types de mdias pour lesquels cette proprit doit tre implmente par un
agent utilisateur conforme. Les proprits s'appliquant gnralement plusieurs mdias, la partie "Media" dans la
dfinition de chacune d'entre elles en prcise les groupes de mdias plutt qu'une liste des divers types individuels.
La proprit s'applique ainsi tous les types de mdias concerns, ceuxci tant reprsents par des groupe de
mdias.
CSS2 dfinit les groupes de mdias suivants :
continu ou pagin. Quand il est crit "les deux", cela signifie que la proprit s'applique aux deux groupes
de mdias ;
visuel, auditif ou tactile ;
grille (pour les appareils avec grille de caractres) ou bitmap. Quand il est crit "les deux", cela signifie
que cette proprit s'applique aux deux groupes de mdias ; groups.
interactif (pour les appareils qui interagissent avec l'utilisateur) ou statique ( l'inverse, pour ceux qui
n'interagissent pas avec celuici). Quand il est crit "les deux", cela signifie que la proprit s'applique
aux deux groupes de mdias ;
all (comprend tous les types de mdias).
La table suivante montre les relations entre les groupes de mdias et les types de mdias :
Relations entre les groupes de mdias et les types de mdias
52

Types de mdias
aural
braille
embossed
handheld
print
projection
screen
tty
tv
Groupes de mdias
continu/pagin visuel/auditif/tactile grille/bitmap interactif/statique
continu
auditif
sans objet
les deux
continu
tactile
grille
les deux
pagin
tactile
grille
les deux
les deux
visuel
les deux
les deux
pagin
visuel
bitmap
statique
pagin
visuel
bitmap
statique
continu
visuel
bitmap
les deux
continu
visuel
grille
les deux
les deux
visuel, auditif
bitmap
les deux
53
8 Le modle des botes

Le modle des botes de CSS dcrit les botes rectangulaires qui sont gnres pour les lments de l'arborescence
du document et qui sont assembles selon le modle de mise en forme visuel. La bote de page, qui en reprsente
un cas particulier, est dcrite plus en dtails au chapitre sur les mdias pagins.
8.1 Les dimensions des botes

Chaque bote possde une aire de contenu (ex. une texte, une image, etc.) entoure en option par une aire
d'espacement, une aire de bordure et une aire demarge ; Le schma suivant illustre les relations entre ces aires
et la terminologie employe pour les dsigner :
On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du ct gauche, droite, haut ou bas (ex.
dans le schma, "MG" mis pour marge gauche [ndt. marginleft], "ED" mis pour espacement droit [ndt.
paddingright], "BH" mis pour bordure haute [ndt. bordertop], etc.).
On appelle le primtre de chacune des quatre aires (contenu, espacement, bordure et marge) un "bord", chaque
bote a donc quatre bords :
Le bord du contenu ou bord interne
Celuici entoure le rendu du contenu de l'lment.
Le bord de l'espacement
Celuici entoure la bote de l'espacement. Si la valeur de l'espacement est 0, son bord est confondu avec
celui du contenu.
Le bord de la bordure
Celuici entoure la bote de la bordure. Si la valeur de la bordure est 0, son bord est confondu avec celui
de l'espacement.
Le bord de la marge ou bord externe
Celuici entoure la bote de la marge. Si la valeur de la marge est 0, son bord est confondu avec celui de
la bordure.
On peut se rfrer chacun de ces bords selon qu'il se trouve du ct gauche, droite, haut ou bas.
Les dimensions de l'aire du contenu d'une bote, cellesci tant la largeur du contenu et la hauteur du contenu,
dpendent de plusieurs facteurs : l'lment gnrant la bote atil une proprit 'width' ou bien 'height', la bote
contientelle du texte ou d'autres botes, la bote estelle une table, etc. Les largeurs et hauteurs des botes sont
traites dans le chapitre concernant les dtails du modle de mise en forme visuel.
On obtient la The largeur de la bote en additionnant les marges, bordures et espacements gauches et droites
avec le largeur du contenu. De mme pour la hauteur de la bote, en additionnant les marges, bordures et
54

espacement hauts et bas avec la hauteur du contenu.
Le style qui est appliqu l'arrireplan du contenu et aux aires de l'espacement et de la marge, est spcifi au
travers de la proprit 'background' de l'lment qui gnre la bote. L'arrireplan des marges est toujours
transparent.
8.2 Exemples de marges, d'espacements et de bordures

Cet exemple illustre les interactions des marges, espacements et bordures. Soit le document HTML suivant :
<HTML>
<HEAD>
<TITLE>Exemples de marges, d'espacements et de bordures</TITLE>
UL {
background: #ff9933;
/* orange */
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* Les bordures ne sont pas spcifies */
}
LI {
color: white;
/* Le texte a une couleur blanche */
background: #3366cc;
/* Le fond du contenu et de l'espacement sera bleu */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Noter l'espacement droit 0px */
liststyle: none
/* Aucuns glyphes devant les items de liste */
/* Les bordures ne sont pas spcifies */
}
LI.withborder {
borderstyle: dashed;
borderwidth: medium;
/* Applique une bordure sur les quatre cts */
bordercolor: green;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>Premier lment de liste
<LI class="withborder">Second lment de liste plus
long pour montrer la mise la ligne.
</UL>
</BODY>
</HTML>
celuici aboutit une arborescence du document avec, entre autres relations, un lment UL ayant deux lments
enfants LI.
Le premier des schmas qui suivent illustre ce que cela pourrait donner. Le second montre les interactions entre
les marges, espacements et bordures de l'lment UL et ceux de ses lments enfants LI.
55
Noter que :
La largeur du contenu de chaque bote LI est calcule en partant du haut ; le bloc conteneur de chacune
des botes LI est tabli par l'lment UL ;
La hauteur de chacune des botes LI est issue de la somme de la hauteur du contenu et des espacements,
bordures et marges hautes et basses. Noter que les marges verticales entres les deux botes ont fusionn ;
La largeur de l'espacement droit des botes LI ont une valeur de 0 (pour la proprit 'padding'). Ceci est
visible dans la seconde illustration ;
Les marges des botes LI sont transparentes, elles le sont toujours, ainsi le fond des aires d'espacement et
du contenu de l'lment UL, de couleur verte, est visible au travers de ces marges ;
Le second lment LI se voit appliquer une bordure en trait pointill (par la proprit 'borderstyle').
8.3 Les proprits de marge : 'margintop', 'marginright', 'marginbottom',

'marginleft' et 'margin'
Ces proprits spcifient la largeur de l'aire de la marge d'une bote. La proprit raccourcie 'margin' spcifie la
valeur de la marge pour les quatres cts la fois, les autres proprits fixant celle de leur ct respectif.
Les proprits dfinies ici se rfrent au type de valeur <margelargeur>, celuici accepte une des valeurs
suivantes :
<longueur>
Spcifie une largeur fixe ;
<pourcentage>
Le pourcentage est calcul par rapport la largeur du bloc conteneur de la bote gnre. Ceci est vrai
aussi pour les proprits 'margintop' et 'marginbottom', sauf dans un contexte de page o le pourcentage
se rfre la hauteur de la bote de la page.
auto
Voir le chapitre traitant du calcul des largeurs et hauteurs de marge pour son comportement.
Les valeurs ngatives pour les proprits de marge sont admises, sous rserve des implmentations particulires
des agents utilisateurs.
'margintop', 'marginright', 'marginbottom', 'marginleft'
Valeur :
<margelargeur> | inherit
Initiale :
0
S'applique :
tous les lments
Hrite :
non
Pourcentage : se rapporte la largeur du bloc conteneur
Mdia :
visuel
Ces proprits spcifient les marges du haut, de droite, du bas et de gauche d'une bote.
56

Exemple(s) :
H1 { margintop: 2em }
'margin'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<margelargeur>{1,4} | inherit
non dfinie pour les proprits raccourcies
tous les lments
non
se rapporte la largeur du bloc conteneur
visuel
La proprit raccourcie 'margin' sert regrouper les proprits 'margintop', 'marginright', 'marginbottom' et
'marginleft' dans la feuille de style.
Quand il n'y a qu'une seule valeur spcifie, celleci s'applique tous les cts. S'il y en a deux, alors la premire
valeur s'applique pour la marge du haut et celle du bas, et la seconde pour la marge droite et celle de gauche. Avec
trois valeurs, la marge du haut reoit la premire valeur, les marges gauche et droite la deuxime et la marge du
bas la troisime. Pour quatre valeurs, cellesci s'appliquent respectivement aux marges du haut, de droite, du bas
et de gauche.
Exemple(s) :
BODY { margin: 2em }

/* les quatres marges reoivent la valeur 2em */
BODY { margin: 1em 2em }
/* les marges du haut et du bas = 1em, de droite et de gauche = 2em */
BODY { margin: 1em 2em 3em } /* haut=1em, droite=2em, bas=3em, gauche=2em */
Cette dernire rgle quivaut l'exemple cidessous :

BODY {
margintop: 1em;
marginright: 2em;
marginbottom: 3em;
marginleft: 2em;
}
/* valeur copie du ct oppos (droit) */
8.3.1 Les marges de fusion

Dans cette spcification, l'expression marges de fusion signifie que les marges adjacentes (sans qu'une aire
d'espacement ou de bordure ne les sparent) de deux ou plusieurs botes (cellesci pouvant tre l'une ct de
l'autre ou imbriques), ces marges se combinent pour n'en former qu'une seule.
En CSS2, les marges horizontales ne fusionnent jamais.
Les marges verticales peuvent fusionner entre certaines botes :
Les marges verticales de deux botes, ou plus, d'lments de type bloc, placs dans un flux normal
fusionnent. La largeur de la marge finale devient la valeur la plus grande entre celles des marges
adjacentes. Dans le cas de marges ngatives, on soustrait la plus grande des valeurs des marges ngatives
adjacentes, en valeur absolue, de la plus grande des marges positives adjacentes. Et s'il n'y pas de marges
positives, on dduit de zro la plus grande des marges ngatives, en valeur absolue. Note : Les botes
adjacentes peuvent tre gnres par des lments sans liens de parent, liens du mme degr ou
d'ascendancedescendance ;
Les marges verticales entre une bote qui flotte et toute autre bote ne fusionnent pas ;
Les marges entre des botes absolument et relativement positionnes ne fusionnent pas.
Consulter les exemples de marges, d'espacements et de bordures pour une illustration de la fusion des marges.
8.4 Les proprits d'espacement : 'paddingtop', 'paddingright',

'paddingbottom', 'paddingleft' et 'padding'
Ces proprits spcifient la largeur de l'aire d'espacement d'une bote. La proprit raccourcie 'padding' spcifie la
valeur de l'espacement pour les quatres cts la fois, les autres proprits fixant celle de leur ct respectif.
Les proprits dfinies ici se rfrent au type de valeur <espacementlargeur>, celuici accepte une des valeurs
suivantes :
57

<longueur>
Spcifie une largeur fixe.
<pourcentage>
Le pourcentage est calcul par rapport la largeur du bloc conteneur de la bote gnre. De mme pour
les proprits 'paddingtop' et 'paddingbottom'.
la diffrence des proprits de marge, les valeurs d'espacement ne peuvent pas tre ngatives. Les valeurs de
pourcentage des proprits d'espacement, tout comme celles des proprits de marge, se rfrent la largeur du
bloc conteneur de la bote gnre.
[Errata : Les cinq proprits d'espacement ('padding', 'paddingtop', 'paddingright', 'paddingbottom' et
'paddingleft') devraient prciser qu'elles ne s'appliquent pas aux ranges, aux groupes de ranges, aux groupes
d'entte, aux groupes de pied, aux colonnes et groupes de colonnes des tables.]
'paddingtop', 'paddingright', 'paddingbottom', 'paddingleft'
Valeur :
<espacementlargeur> | inherit
Initiale :
0
S'applique :
tous les lments
Hrite :
non
Pourcentage : se rapporte la largeur du bloc conteneur
Mdias :
visuel
Ces proprits spcifient les espacements du haut, de droite, du bas et de gauche d'une bote.
Exemple(s) :
BLOCKQUOTE { paddingtop: 0.3em }
'padding'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<espacementlargeur>{1,4} | inherit
tous les lments
non
visuel
La proprit raccourcie 'padding' sert regrouper les proprits 'paddingtop', 'paddingright', 'paddingbottom'
et 'paddingleft' at the same place dans la feuille de style.
valeur s'applique pour l'espacement du haut et celui du bas, et la seconde pour l'espacement de droite et celui de
gauche. Avec trois valeurs, l'espacement du haut reoit la premire valeur, les espacements gauche et droite la
deuxime et l'espacement du bas la troisime. Pour quatre valeurs, cellesci s'appliquent respectivement aux
espacements du haut, de droite, du bas et de gauche.
La couleur du fond ou l'image de l'aire d'espacement sont indiques avec la proprit 'background' :
Exemple(s) :
H1 {
background: white;
padding: 1em 2em;
}
Dans cet exemple, on spcifie un espacement vertical de '1em' ('paddingtop' et 'paddingbottom') et un

espacement horizontal de '2em' ('paddingright' et 'paddingleft'). L'unit 'em' s'entend relativement la taille de
la police de l'lment : une valeur '1em' correspond la taille de la police utilise.
8.5 Les proprits de bordure

Ces proprits spcifient l'paisseur, la couleur et le style de l'aire de bordure d'une bote. Cellesci s'appliquent
tous les lments.
Note : Plus particulirement en HTML, les agents utilisateurs peuvent rendre les bordures de certains lments
(ex. les boutons, les menus, etc.) dans un aspect diffrent de celui des lments "ordinaires".
58

8.5.1 L'paisseur de bordure : les proprits 'bordertopwidth', 'borderrightwidth',
'borderbottomwidth', 'borderleftwidth' et 'borderwidth'
Ces proprits spcifient l'paisseur de l'aire de bordure. Les proprits dfinies ici se rfrent au type de valeur
<bordurepaisseur>, celuici accepte l'une des valeurs suivantes :
thin
Une bordure mince.
medium
Une bordure moyenne.
thick
Une bordure paisse.
<longueur>
L'paisseur de la bordure a une valeur explicite. Cette valeur explicite ne peut tre ngative.
L'interprtation des trois premires valeurs dpend de l'agent utilisateur. Cependant, celuici doit respecter les
directives suivantes :
'thin' <='medium' <= 'thick'.
De plus, leurs paisseurs doivent rester constantes dans tout le document.
'bordertopwidth', 'borderrightwidth', 'borderbottomwidth', 'borderleftwidth'
Valeur :
<bordurepaisseur> | inherit
Initiale :
medium
S'applique :
tous les lments
Hrite :
non
Pourcentage : sans objet
Mdias :
visuel
Ces proprits spcifient les valeurs d'paisseur des bordures du haut, de droite, du bas et de gauche d'une bote.
'borderwidth'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<bordurepaisseur>{1,4} | inherit
voir les proprits individuelles
tous les lments
non
sans objet
visuel
Cette proprit raccourcie sert regrouper les proprits 'bordertopwidth', 'borderrightwidth',

'borderbottomwidth' et 'borderleftwidth' dans la feuille de style.
valeur s'applique pour la bordure du haut et celle du bas, et la seconde pour la bordure de droite et celle de gauche.
Avec trois valeurs, la bordure du haut reoit la premire valeur, les bordures gauche et droite la deuxime et la
bordure du bas la troisime. Pour quatre valeurs, cellesci s'appliquent respectivement aux bordures du haut, de
droite, du bas et de gauche.
Exemple(s) :
Les commentaires dans l'exemple cidessous prcisent les valeurs des bordures du haut, de droite, du bas et de
gauche :
H1 { borderwidth: thin }
H1 { borderwidth: thin thick }
H1 { borderwidth: thin thick medium }
/* thin thin thin thin */

/* thin thick thin thick */
/* thin thick medium thick */
8.5.2 La couleur de bordure : les proprits 'bordertopcolor', 'borderrightcolor',

'borderbottomcolor', 'borderleftcolor' et 'bordercolor'
Ces proprits spcifient la couleur des bordures d'une bote.
'bordertopcolor', 'borderrightcolor', 'borderbottomcolor', 'borderleftcolor'
Valeur :
<couleur> | transparent | inherit
59

Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
'bordercolor'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
la valeur de la proprit 'color'

tous les lments
non
sans objet
visuel
[<couleur> | transparent]{1,4} | inherit
tous les lments
non
sans objet
visuel
La proprit 'bordercolor' spcifie la couleur des quatre cts de la bordure. Voici la signification des valeurs que
celleci admet :
<couleur>
Spcifie la valeur d'une couleur ;
transparent
La bordure est transparent (tout en ayant une paisseur).
La proprit 'bordercolor' admet une quatre valeurs, les valeurs tant appliques sur les quatres cts de la
bordure de la mme faon que pour la proprit 'borderwidth' dfinie plus haut.
Quand, pour un lment, aucune valeur de couleur n'est spcifie par une proprit de bordure, les agents
utilisateurs doivent utiliser celle de la proprit 'color' de cet lment comme valeur calcule pour la couleur de
bordure.
Exemple(s) :
Ici, la bordure aura l'aspect d'un trait plein noir.
P {
color: black;
background: white;
border: solid;
}
8.5.3 Le style de bordure : les proprits 'bordertopstyle', 'borderrightstyle',

'borderbottomstyle', 'borderleftstyle' et 'borderstyle'
Ces proprits spcifient le dessin des bordures d'une bote (en trait plein, trait double, trait pointill, etc.). Les
proprits dfinies ici se rfrent au type de valeur <bordurestyle>, celuici accepte l'une des valeurs suivantes :
none
Aucune bordure. Cette valeur force la valeur calcule de la proprit 'borderwidth' 0 ;
hidden
Idem 'none', sauf pour la rsolution des conflits de bordure des lments de table ;
dotted
La bordure est une ligne en pointill ;
dashed
La bordure est une ligne en tirets ;
solid
La bordure est une ligne en trait plein.
double
La bordure est une ligne double, de deux traits pleins. La somme de ces lignes et de l'espace entre elles est
gale la valeur de 'borderwidth'.
groove
La bordure donne l'impression qu'elle est grave dans le canevas ;
ridge
l'oppos de 'groove', la bordure semble sortir du canevas ;
inset
La bordure donne l'impression que la bote entire est incruste dans le canevas ;
outset
l'oppos de 'inset', la bordure donne l'impression que la bote entire est extrude du canevas.
60

Les bordures sont dessines en surimpression sur l'arrireplan de la bote. Les couleurs adoptes pour le dessin
des valeurs 'groove', 'ridge', 'inset' et 'outset' devraient se baser sur celle de la proprit 'bordercolor' de l'lment,
cependant, les agents utilisateurs peuvent employer leur propre algorithme pour dterminer les couleurs qui vont
tre appliques. Par exemple, si la proprit 'bordercolor' avait une valeur 'silver', un agent utilisateur pourrait
simuler la pente d'une bordure l'aide d'un dgrad allant du blanc vers un gris fonc.
Les agents utilisateurs conformes peuvent remplacer l'interprtation des valeurs 'dotted', 'dashed', 'double',
'groove', 'ridge', 'inset' et 'outset' par celle de la valeur 'solid'.
'bordertopstyle', 'borderrightstyle', 'borderbottomstyle', 'borderleftstyle'
Valeur :
<bordurestyle> | inherit
Initiale :
none
S'applique :
tous les lments
Hrite :
non
Mdias :
visuel
'borderstyle'
Valeur :
Initial:
S'applique :
Hrite :
Pourcentage :
Mdias :
<bordurestyle>{1,4} | inherit
tous les lments
non
sans objet
visuel
La proprit 'borderstyle' admet une quatre valeurs, les valeurs tant appliques sur les quatres cts de la
bordure de la mme faon que pour la proprit 'borderwidth' dfinie plus haut.
Exemple(s) :
#xy34 { borderstyle: solid dotted }
Dans cet exemple, les bordures horizontales auront la valeur 'solid' et les verticales la valeur 'dotted'.
La valeur initiale de style de bordure tant 'none', aucune bordure ne sera visible si on ne spcifie pas de valeur de
style pour celleci.
8.5.4 Les proprits raccourcies de bordure : 'bordertop', 'borderbottom', 'borderright',
'borderleft' et 'border'
'bordertop', 'borderright', 'borderbottom', 'borderleft'
Valeur :
[ <bordurepaisseur> || <bordurestyle> || [ <couleur> | transparent ] ] | inherit
Initiale :
S'applique :
tous les lments
Hrite :
non
Mdias :
visuel
Cette proprit raccourcie spcifie les paisseurs, les styles et les couleurs des bordures du haut, de droite, du bas
et de gauche d'une bote.
Exemple(s) :
H1 { borderbottom: thick solid red }
Cette rgleci va appliquer une paisseur, un style et une couleur la bordure du bas, celle sous l'lment H1. Les
valeurs omises dans la dclaration sont senses garder leur valeur initiale. Dans la rgle suivante, comme celleci
ne prcise pas de valeur de couleur pour la bordure, celleci prendra la valeur de la proprit 'color' de l'lment
H1 :
H1 { borderbottom: thick solid }
'border'
Valeur :
Initiale :
[ <bordurepaisseur> || <bordurestyle> || [ <couleur> | transparent ] ] | inherit

61

S'applique :
Hrite :
Pourcentage :
Mdias :
tous les lments

non
sans objet
visuel
La proprit raccourcie 'border' spcifie les mmes paisseurs, couleurs et styles pour les quatre cts d'une bote.
la diffrence des proprits 'margin' et 'padding', cette proprit 'border' ne permet pas de donner des valeurs
propres chacune des quatre bordures. Pour cela, il faut employer l'une, ou plusieurs, des proprits individuelles
de bordure.
Exemple(s) :
Par exemple, la premire rgle quivaut aux quatre qui la suivent :
P { border: solid red }
P {
bordertop: solid red;
borderright: solid red;
borderbottom: solid red;
borderleft: solid red
}
Dans une certaine mesure, les actions des proprits se recoupent, aussi l'ordre dans lequel elles surviennent revt
de l'importance.
Exemple(s) :
Considrons cet exemple :
BLOCKQUOTE {
bordercolor: red;
borderleft: double;
color: black
}
Ici, la valeur de la couleur de bordure gauche est 'black', et celles des autres bordures est 'red'. Ceci est caus par
'borderleft' spcifiant l'paisseur, le style et la couleur. Aucune valeur de couleur n'tant spcifie, celleci est
hrite de la proprit 'color'. Que cette dernire survienne aprs la proprit 'borderleft' ne fait pas de diffrence.
62
9 Le modle de mise en forme visuel

9.1 Introduction au modle de mise en forme visuel
Ce chapitre 9 et le suivant dcrivent le modle de mise en forme visuel : l'interprtation par un agent utilisateur de
l'arborescence du document et du rendu de celuici par un mdia visuel .
Dans ce modle, chaque lment de l'arborescence produit zro ou plusieurs botes selon le modle de la bote. La
construction de ces botes est gouverne par :
les dimensions de la bote et son type ;
le schma de positionnement (en flux normal, en positionnement flottant et absolu) ;
les relations entre les lments dans l'arborescence du document ;
des informations externes (ex. la taille de l'espace de visualisation, les dimensions intrinsques des
images, etc.).
Les proprits dfinies dans ce chapitre et le suivant concernent les mdias continus et les mdias pagins.
Cependant, les proprits de marge ont une signification particulire pour les mdias pagins (voir le modle de la
page pour les dtails).
Le modle de mise en forme visuel ne prcise pas tous les aspects de la mise en forme (ex. il ne spcifie pas
d'algorithme pour l'interlettrage). Les agents utilisateurs conformes peuvent se comporter diffremment en face de
ces points de formatage qui ne sont pas abords dans cette spcification.
9.1.1 L'espace de visualisation
Les agents utilisateurs pour mdias continus offrent gnralement un espace de visualisation (une fentre ou
une autre zone d'affichage sur un cran) grce auquel les utilisateurs peuvent consulter un document. Les agents
utilisateurs peuvent changer l'affichage du document quand cet espace est redimensionn (voir le bloc conteneur
initial). Si l'espace de visualisation est plus petit que le bloc conteneur initial, l'agent utilisateur devrait proposer
un mcanisme de dfilement. Dans un canvas, il ne peut y avoir plus d'un espace de visualisation, les agents
utilisateurs pouvant nanmoins rendre plusieurs canevas (c..d, prsenter des vues diffrentes du mme
document).
9.1.2 Les blocs conteneurs
En CSS2, les positions et les tailles d'un grand nombre de botes sont calcules en fonction des bords d'une bote
rectangulaire ; on l'appelle un bloc conteneur. La plupart des botes gnres se comportent comme des blocs
conteneurs pour les botes qui en descendent : on dit que la bote "tablit" le bloc conteneur de ses descendants.
L'expression "le bloc conteneur d'une bote" signifie "le bloc conteneur dans lequel se trouve la bote", et non la
propre bote que celleci gnre.
Chaque bote a une position en fonction de son bloc conteneur, celleci n'tant pas forcment confine dans un tel
bloc et pouvant dborder.
La racine de l'arborescence du document gnre une bote qui fait office de bloc conteneur initiale pour les
constructions subsquentes.
On peut spcifier la largeur du bloc conteneur initial de l'lment racine avec la proprit 'width'. Quand celleci a
la valeur 'auto', c'est l'agent utilisateur qui fournit cette largeur initiale (par exemple en utilisant la largeur effective
de l'espace de visualisation).
On peut aussi spcifier la hauteur du bloc conteneur initial de l'lment racine avec la proprit'height'. Quand
celleci a la valeur 'auto', la hauteur du bloc conteneur va s'allonger pour prendre en compte le contenu du
document.
Le bloc conteneur initial ne peut pas tre positionn ou tre flottant (c..d., les agents utilisateurs ignorent les
proprits 'position' et 'float' de l'lment racine).
Les dtails concernant le calcul des dimensions des d'un bloc conteneur sont abords dans le chapitre 10 suivant.
63
9.2 Le contrle de la gnration de la bote

Les paragraphes suivants dcrivent les types de botes susceptibles d'tre gnres en CSS2. Le type d'une bote
affecte en partie son comportement dans le modle de mise en forme visuel. La proprit 'display' spcifie le type
d'une bote, celleci est dcrite plus loin.
9.2.1 Les lments de type bloc et leurs botes
Les lments de type bloc sont ceux des lments du document source dont le rendu visuel forme un bloc (ex.
les paragraphes). La proprit 'display' admet des valeurs qui confrent un type bloc un lment : 'block',
'listitem', 'compact' et 'runin' (dans certains cas ; voir les passages traitant des botes compactes et des botes en
enfilade), et 'table'.
Les lments de type bloc gnrent une bote de bloc principale qui ne contient que des botes de bloc. La
bote de bloc principale tablit le bloc conteneur des botes des descendants et du contenu gnr, c'est aussi
celleci qui intervient dans le schma de positionnement. La bote de bloc principale participe au contexte de mise
en forme de type bloc.
D'autres lments de type bloc gnrent des botes supplmentaires hors de la bote principale : ceux des lments
qui ont une valeur 'listitem' et ceux qui ont des marqueurs. Ces botes se positionnent en fonction de la bote
principale.
Les botes de bloc anonymes
Dans un document tel que celuici :

<DIV>
Du texte
<P>Plus de texte
</DIV>
supposer que les lments DIV et P aient tous deux la valeur 'display: block', l'lment DIV accueille la fois
un contenu de type enligne et un contenu de type bloc. Pour illustrer leur formatage, nous considrons que "Du
texte" est contenu dans une bote de bloc anonyme.
Schma montrant trois botes, l'une d'entre elles est anonyme.

Autrement dit, quand une bote de bloc (comme ici celle produite par l'lment DIV) contient une autre bote de
bloc (comme l'lment P), alors on la contraint n'avoir que des botes de bloc, les lments de type enligne
tant emballs dans une bote de bloc anonyme.
Exemple(s) :
Ce modle s'appliquerait l'exemple suivant :
/* Note : les agents utilisateurs en HTML peuvent ne pas respecter ces rgles */
BODY { display: inline }
P
{ display: block }
Ces rgles tant appliques ce document HTML :

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0 Transitional//EN">
64

<HEAD>
<TITLE>Un texte anonyme interrompu par un bloc</TITLE>
</HEAD>
<BODY>
Voici un texte anonyme avant le P.
<P>Ceci est le contenu de P.</P>
Voici un texte anonyme aprs le P.
</BODY>
L'lment BODY contient un morceau (not C1) de texte anonyme suivi par un lment de type bloc, suivi encore
par un autre morceau (C2) de texte anonyme. La mise en forme finale aboutirait une bote de bloc anonyme pour
l'lment BODY, celleci contiendrait une bote de bloc anonyme enveloppant C1, la bote de bloc de l'lment P
et une autre bote de bloc anonyme pour C2.
Les proprits des botes anonymes hritent des valeurs des proprits de la bote nonanonyme qui les contient
(par exemple dans le schma audessus, celle de l'lment DIV). Les proprits qui ne sont pas hrites
conservent leur valeur initiale. Par exemple dans le schma, la bote anonyme hrite de la police de l'lment DIV
mais ses marges auront une valeur de 0.
9.2.2 Les lments de type enligne et leurs botes
Les lments de type enligne sont ceux des lments du document source qui n'ont pas la forme de nouveaux
blocs de contenu ; ce contenu est distribu en lignes (ex. des parties de texte accentu dans un paragraphe, des
images dans une ligne, etc.). La proprit 'display' admet des valeurs qui confrent un type enligne un lment :
'inline', 'inlinetable', 'compact' et 'runin' (dans certains cas, voir les passages traitant des botes compactes et des
botes en enfilade). Les lments de type enligne gnrent des botes enligne.
Les botes enligne peuvent participer plusieurs contextes de mise en forme :
Dans une bote de bloc, celleci rpond un contexte de mise en forme enligne ;
Quand c'est une bote enligne compacte, elle se positionne dans la marge d'une bote de bloc ;
Les botes des marqueurs se positionnent aussi en dehors d'une bote de bloc.
Les botes enligne anonymes
Dans cet extrait de document :

<P>Du texte <EM>accentu</em> en exemple</P>
L'lment P gnre une bote de bloc contenant plusieurs botes enligne. Une bote enligne pour "accentu" est
produite par l'lment de type enligne (EM), mais c'est un lment de type bloc (P) qui gnre les autres botes
enligne pour "Du texte" et "en exemple". Ces dernires sont appeles botes enligne anonymes, car elles ne sont
pas associes un lment enligne.
Ces genres de botes hritent des proprits de celles de leur parent de type bloc. Les proprits non transmissibles
conservent leur valeur initiale. Dans l'exemple prcdent, la couleur des botes anonymes initiales est hrite de
l'lment P, mais leurs fonds restent transparents.
Pour cette spcification, on emploiera simplement l'expression bote anonyme pour dsigner les botes anonymes
de type enligne ou bloc, quand le contexte dtermine sans ambigut leur type.
D'autres types de botes anonymes sont produites lors de la mise en forme des tables.
9.2.3 Les botes compactes
Le comportement d'une bote compacte se dfinit ainsi :
Quand une bote de bloc (celleci n'tant pas flottante ni n'ayant un positionnement absolu) suit une bote
compacte, celleci prend la forme d'une bote enligne sur une ligne. La largeur de la bote rsultante se
compare l'une des marges latrales de la bote de bloc. On dtermine laquelle des marges gauche ou
droite employer selon la valeur de la proprit 'direction' de l'lment qui gnre le bloc conteneur de la
bote compacte et des suivantes. Si la largeur de la bote enligne est infrieure ou gale celle de la
marge, celleci est positionne dans la marge de la faon dcrite juste aprs.
Autrement, la bote compacte devient une bote de bloc.
La position de la bote compacte dans la marge est la suivante : elle se trouve en dehors ( droite ou gauche) de
la premire bote de ligne du bloc, et elle en affecte le calcul de la hauteur. La proprit 'verticalalign' de la bote
65

compacte dtermine sa position verticale en fonction de cette bote de ligne. La bote compacte a toujours une
position horizontale dans la marge de la bote de bloc.
Un lment dont le formatage ne tient pas sur une ligne ne peut pas se trouver dans la marge de l'lment qui le
suit. Par exemple en HTML, un lment avec une valeur 'compact' et qui contient un lment BR aura toujours un
type de bote bloc (en considrant que le comportement par dfaut de BR consiste en l'insertion d'un caractre de
mise la ligne). Pour le placement d'un texte sur plusieurs lignes dans la marge, la proprit 'float' est souvent
mieux approprie.
Voici l'illustration d'une bote compacte :
<HTML>
<HEAD>
<TITLE>Un exemple de bote compacte</TITLE>
DT { display: compact }
DD { marginleft: 4em }
</STYLE>
</HEAD>
<BODY>
<DL>
<DT>Court
<DD><P>Ici une description.
<DT>Trop long pour tenir dans la marge
<DD><P>Ici une autre description.
</DL>
</BODY>
</HTML>
Cet exemple pourrait tre rendu ainsi :

Court
Ici une description.
Trop long pour la marge

Ici une autre description.
On peut utiliser la proprit 'textalign' pour aligner l'lment compacte dans la marge : contre le bord gauche de
la marge (avec la valeur 'left'), contre le bord droit ('right') ou au centre ('center'). La valeur 'justify' ne s'applique
pas, celleci sera considre comme tant 'left' ou 'right', selon la valeur de la proprit 'direction' de l'lment de
type bloc dans les marges duquel l'lment compact se trouve (si la valeur de la proprit 'direction' est 'ltr', ce
sera 'left', si c'est 'rtl', ce sera 'right').
Consulter le chapitre traitant du contenu gnr pour des informations sur l'interaction entre les botes compactes
et le contenu gnr.
9.2.4 Les botes en enfilade
Le comportement d'une bote en enfilade se dfinit ainsi :
Quand une bote de bloc (celleci n'tant pas flottante ni n'ayant un positionnement absolu) suit la bote
en enfilade, cette dernire devient la premire bote enligne de la bote de bloc ;
Autrement, la bote en enfilade devient une bote de bloc.
Une bote en enfilade prsente un intrt pour les titres en enfilade, ainsi cet exemple :
<HTML>
<HEAD>
<TITLE>Un exemple de bote en enfilade</TITLE>
H3 { display: runin }
</STYLE>
</HEAD>
<BODY>
<H3>Un titre en enfilade.</H3>
<P>Et un paragraphe qui le suit.
</BODY>
</HTML>
Cet exemple pourrait tre rendu ainsi :

66

Un titre en enfilade. Et un
paragraphe qui le suit.
L'lment en enfilade hrite de celles de son parent dans la source, et non de celles de la bote de bloc dont il fait
visuellement partie.
Consulter le chapitre traitant du contenu gnr pour des informations sur l'interaction entre les botes en enfilade
et le contenu gnr.
9.2.5 La proprit 'display'
'display'
inline | block | listitem | runin | compact | marker | table | inlinetable | tablerowgroup |
tableheadergroup | tablefootergroup | tablerow | tablecolumngroup | tablecolumn
| tablecell | tablecaption | none | inherit
Initiale :
inline
S'applique tous les lments
:
Hrite :
non
Pourcentage sans objet
:
all
Mdias :
Valeur :
Les valeurs de cette proprit ont le sens suivant :

block
induit un lment gnrer une bote de bloc principale ;
inline
induit un lment gnrer une ou plusieurs botes enligne ;
listitem
induit un lment (ex. l'lment LI en HTML) gnrer une bote de bloc principale et une bote enligne
pour un item de liste ; Consulter la partie traitant des listes pour des informations et des exemples de mise
en forme de cellesci ;
marker
Cette valeur prcise la qualit de marqueur du contenu gnr apparassant avant ou aprs une bote. Elle
ne devrait tre employe qu'avec les pseudolments :before et :after lis des lments de type bloc.
Dans certains cas, cette valeur est interprte comme 'inline'. Consulter le chapitre sur les marqueurs pour
plus d'informations ;
none
cette valeur fait qu'aucune bote n'est gnre par l'lment dans la structure de formatage (c..d., cet
lment n'a pas d'influence sur la mise en forme du document). Les lments qui en descendent ne
gnrent pas de botes non plus ; on ne peut plus modifier leur comportement avec la proprit 'display'.
Noter qu'une valeur 'none' ne cre pas de bote invisible, elle ne cre pas de bote du tout. CSS comprend
des mcanismes permettant la gnration de botes dans la structure de formatage, botes qui influencent
la mise en forme mais qui ne sont pas visibles. Consulter la partie traitant de la visibilit pour les dtails ;
runin et compact
ces valeurs crent une bote de bloc ou enligne, selon le contexte. Les proprits s'appliquent aux botes
compactes ou en enfilade en fonction de leur statut final (types bloc ou enligne). Par exemple, la
proprit 'whitespace' ne s'applique que si la bote a un type bloc ;
table, inlinetable, tablerowgroup, tablecolumn, tablecolumngroup, tableheadergroup,
tablefootergroup, tablerow, tablecell et tablecaption
ces valeurs donnent un lment le comportement de celui d'une table (avec les restrictions dcrites au
chapitre sur les tables).
Noter que, malgr la valeur intiale 'inline' de la proprit 'display', les rgles de la feuille de style par dfaut de
l'agent utilisateur peuvent surclasser celleci. Voir dans l'appendice traitant de la proposition de feuille de style
pour HTML 4.0.
Exemple(s) :
Voici des exemples pour la proprit 'display' :
P
EM
LI
{ display: block }
{ display: inline }
{ display: listitem }
67

IMG { display: none }
/* Les images ne sont pas affiches */
Les agents utilisateurs conformes pour HTML peuvent ignorer la proprit 'display'.
9.3 Les schmas de positionnement

En CSS2, trois schmas de positionnement peuvent dterminer l'emplacement d'une bote :
1. Le flux normal. En CSS2, celuici inclus le formatage en bloc des botes de bloc, le formatage enligne
des botes enligne, le positionnement relatif des botes de bloc ou enligne, et le positionnement des
botes compactes et en enfilade ;
2. Les flottants. Dans ce modle, une bote est d'abord positionne selon le flux normal, puis elle en est
extirpe et repousse le plus possible vers la droite ou la gauche. Le contenu peut s'couler le long d'un
flottant.
3. Le positionnement absolue. Dans ce modle, une bote est comptement retire du flux normal (elle n'a
pas d'influence sur les lments de mme degr de parent survenant aprs elle), et est positionne en
fonction d'un bloc conteneur.
Note : Les schmas de positionnement CSS2 aident les auteurs rendre leurs documents plus accessibles, leur
vitant de tricher avec le balisage pour obtenir des effets de mise en page (ex. les images transparentes).
9.3.1 Le choix d'un schma de positionnement : la proprit 'position'
Les proprits 'position' et 'float' dterminent lequel des algorithmes de positionnement employer pour le calcul de
l'emplacement d'une bote.
'position'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
static | relative | absolute | fixed | inherit

static
tous les lments, sauf un contenu gnr
non
sans objet
visuel
Les valeurs de cette proprit ont le sens suivant :

static
La bote est normale, place selon le flux normal. Les proprits 'left', 'top', 'right' et 'bottom' ne s'y
appliquent pas ;
relative
L'emplacement de la bote est calcul selon le normal flow (ce qu'on appelle la position dans le flux
normal). Ensuite la bote est dplace relativement cette position dans le flux normal. Quand une bote B
a une position relative, l'emplacement de la bote suivante est calcul comme si B n'avait pas t dplace
;
absolute
L'emplacement de la bote (et ventuellement sa taille) est dtermin par les proprits 'left', 'right', 'top',
et 'bottom'. Cellesci spcifient les dplacements en fonction du bloc conteneur. Les botes en position
absolue se situent hors du flux normal. Elles n'ont ainsi aucune influence sur la mise en forme des autres
lments de mme degr de parent. Bien que les botes en position absolue aient galement des marges,
cellesci ne fusionnent pas avec d'autres marges ;
fixed
L'emplacement de la bote est calcul comme pour 'absolute', mais la bote est en plus fixe par rapport
une rfrence donne. Pour les mdias continus, par rapport l'espace de visualisation (la bote ne bouge
pas lors d'un dfilement). Pour les mdias pagins, par rapport la page, mme si celleci apparat dans
un espace de visualisation (par exemple lors d'une prvue avant impression). Les auteurs peuvent
souhaiter un tel comportement en fonction d'un mdia donn. Par exemple, une bote qui reste fixe en haut
de l'cran d'un espace de visualisation, mais pas en haut de chaque page imprime. Ils peuvent indiquer
des spcifications spares l'aide d'une rgle @media comme ceci :
Exemple(s) :
@media screen {
H1#first { position: fixed }
}
@media print {
H1#first { position: static }
}
68

9.3.2 Les dcalages des botes : les proprits 'top', 'right', 'bottom', 'left'
On dit qu'un lment est positionn quand la valeur de sa proprit 'position' est autre que 'static'. Ces lments
gnrent des botes positionnes qui sont disposes selon les quatres proprits suivantes :
'top'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<longueur> | <pourcentage> | auto | inherit

auto
ceux des lments positionns
non
se rapporte la hauteur du bloc conteneur
visuel
Cette proprit spcifie le dcalage du bord de la marge du haut d'une bote par rapport celui de la bote du bloc
conteneur.
'right'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

auto
non
visuel
Cette proprit spcifie le dcalage du bord droit du contenu d'une bote par rapport celui de la bote du bloc
conteneur.
'bottom'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

auto
non
visuel
Cette proprit spcifie le dcalage du bord du bas du contenu d'une bote par rapport celui de la bote du bloc
conteneur.
'left'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

auto
non
visuel
Cette proprit spcifie le dcalage du bord gauche du contenu d'une bote par rapport celui de la bote du bloc
conteneur.
Les significations des valeurs de ces quatres proprits sont :
<longueur>
Le dcalage est reprsent par une distance fixe partir du bord de rfrence ;
<pourcentage>
Le dcalage est reprsent par un pourcentage de la largeur du bloc conteneur (pour les proprits 'left' et
'right') ou la hauteur de celuici (pour les proprits 'top' et 'bottom'). Si la hauteur du bloc conteneur n'est
pas spcifie explicitement (par exemple celleci dpendant de la hauteur du contenu), les proprits 'top'
et 'bottom' sont senses avoir la valeur 'auto' ;
auto
L'effet de cette valeur dpend des proprits associes, lesquelles ont aussi cette mme valeur 'auto'. Voir
les passages traitant de la largeur et de la hauteur des lments nonremplacs en position absolue.
Pour les botes en position absolue, les dcalages sont dtermins par rapport la bote du bloc conteneur. Pour
les botes en position relative, ils sont dtermins par rapport aux bords externes de la bote ellemme (c..d., la
bote reoit un emplacement dans le flux normal, puis elle est dcale de cet emplacement en fonction des valeurs
69

des proprits de position).
9.4 Le flux normal

Les botes dans un flux normal appartiennent un contexte de mise en forme, bloc ou enligne, mais pas les deux
en mme temps. Les botes de bloc participent un contexte de mise en forme bloc, les botes enligne un
contexte de mise en forme enligne.
9.4.1 Le contexte de mise en forme bloc
Dans un contexte de mise en forme bloc, les botes sont places l'une aprs l'autre, verticalement, en commenant
en haut du bloc conteneur. Les proprits de marge rgissent la distance verticale entre deux blocs successifs.
Dans ce contexte de mise en forme, les marges verticales de deux botes de bloc adjacentes fusionnent.
En contexte bloc, le bord externe gauche de chaque bote touche le bord gauche de son bloc conteneur (c'est le
bord droit dans un formatage de droite gauche). Ceci reste vrai en prsence de flottants (bien que le contenu de
l'aire de la bote puissent rtrcir de ce fait).
Pour des informations au sujet des fins de page avec les mdias pagins, consulter le passage traitant des fins de
page admises.
9.4.2 Le contexte de mise en forme enligne
Dans un contexte de mise en forme enligne, les botes sont places horizontalement, l'une aprs l'autre, en
commenant en haut du bloc conteneur. Les marges, bordures et espacements sont conserves entre cellesci. Les
botes peuvent tre alignes verticalement de diffrentes faons : selon leurs hauts ou leurs bas, ou selon les lignes
de base du texte qui y est contenu. On appelle l'aire rectangulaire, qui contient les botes sur une ligne, une bote
de ligne.
La largeur d'une bote de ligne dpend de son bloc conteneur. La hauteur d'une bote de ligne est dtermine en
fonction des rgles prcises au chapitre sur les calculs de la hauteur de ligne. La hauteur d'une bote de ligne est
toujours suffisante pour chacune des botes que celleci contient. Cependant, elle peut tre plus grande que la plus
haute des botes contenues (quand, par exemple, cellesci sont alignes selon leur ligne de base). L'alignement
vertical d'une bote dont la hauteur est infrieure celle de sa bote de ligne, est dtermin par la proprit
'verticalalign'.
Quand des botes enligne ne peuvent pas tenir dans une seule bote de ligne, cellesci se rpartissent sur deux ou
plusieurs botes de ligne empiles verticalement. Ainsi, un paragraphe consiste en un empilement vertical de
botes de ligne. Ces botes de ligne s'empilent les unes sur les autres, sans sparation entre elles, et elles ne se
chevauchent jamais.
En gnral, le bord gauche d'une bote de ligne touche celui de son bloc conteneur. Cependant, il peut se trouver
des botes flottantes le bord du bloc conteneur et celui de la bote de ligne. Ainsi, bien que dans le mme contexte
de mise en forme enligne les botes de ligne, aient la plupart du temps la mme largeur, celleci peut varier si
l'espace horizontal disponible se rduit du fait de la prsence de ces flottants. Par contre, les botes de ligne varient
gnralement en hauteur dans le mme contexte de mise en forme enligne (par exemple une ligne peut contenir
une image de grande hauteur, les autres ne contenant que du texte).
Quand la largeur total des botes enligne est infrieure celle de la bote de ligne qui les contient, leur
distribution horizontale dans celleci est dtermine par la proprit 'textalign'. Si cette proprit a la valeur
'justify', l'agent utilisateur peut tirer les botes enligne en consquence.
La largeur d'une bote enligne ne pouvant excder celle d'une bote de ligne, celles qui sont trop longues sont
dcoupes en plusieurs botes qui sont rparties sur plusieur botes de ligne. Les marges, bordures et espacements
n'ont pas de reprsentation visuelle l'endroit o ces coupures interviennent. Les formatages des marges, bordures
et espacements peuvent ne pas tre entirement dfinis si la coupure intervient dans une imbrication
bidirectionnelle.
Les botes enligne peuvent aussi tre dcoupes l'intrieur d'une mme bote de ligne du fait du traitement
bidirectionnel du texte.
Voici un exemple d'assemblage de bote enligne. Le paragraphe suivant (produit par l'lment HTML de type
bloc P) contient un texte anonyme parsem d'lments EM et STRONG :
<P>Plusieurs <EM>mots accentus</EM> apparaissent
70

<STRONG>dans cette</STRONG> phrase.</P>
L'lment P gnre une bote de bloc qui contient cinq botes enligne, dont trois sont anonymes :
Anonyme : "Plusieurs"
EM : "mots accentus"
Anonyme : "apparaissent"
STRONG : "dans cette"
Anonyme : "phrase."
Pour la mise en forme du paragraphe, l'agent utilisateur fait glisser les cinq botes dans des botes de ligne. Ici, la
bote gnrre par l'lment P tablit le bloc conteneur pour les botes de ligne. Si celuici est suffisamment
grand, toutes les botes de ligne vont pouvoir vont tenir dans une seule bote :
Plusieurs mots accentus apparaissent dans cette phrase.
Dans le cas contraire, les botes enligne seront dcoupes et rparties sur plusieurs botes de ligne. Le paragraphe
prcdent pourrait tre dcoup comme ceci :
Plusieurs mots accentus apparaissent
dans cette phrase.
ou comme cela :
Plusieurs mots
accentus apparaissent dans cette
phrase.
Dans ce dernier exemple, la bote de l'lment EM a t dcoupe en deux botes EM (appelonsles "morceau1"
et "morceau2"). Les marges, bordures, espacements ou encore les ornements de texte ne produisent aucun effet
visible aprs "morceau1" ou avant "morceau2".
Voyons cet exemple :
<HTML>
<HEAD>
<TITLE>Exemple de flot enligne sur plusieurs lignes</TITLE>
EM {
padding: 2px;
margin: 1em;
borderwidth: medium;
borderstyle: dashed;
lineheight: 2.4em;
}
</STYLE>
</HEAD>
<BODY>
<P>Il y a plusieurs <EM>mots accentus</EM> ici.</P>
</BODY>
</HTML>
Dpendant de la largeur de l'lment P, les botes pourraient tre rparties comme ceci :
La marge s'insre avant "mots" et aprs "accentus".

L'espacement s'insre gauche, en haut et en bas de "mots", et en haut, droite et en bas de "accentus".
Une bordure en tirets est traces sur les trois cts cits dans chaque cas.
71

9.4.3 Le positionnement relatif
Une fois que l'emplacement d'une bote a t dtermin, selon les modles de flux normal ou flottant, cette bote
peut tre dplace relativement celuici. C'est ce qu'on appelle le positionnement relatif. Le dcalage d'une
bote (B1) de cette manire n'a pas d'influence sur la bote (B2) qui la suit : la bote B2 reoit un emplacement
comme si la bote B1 n'avait pas t dcale, et l'emplacement de B2 sera rest le mme aprs l'application du
dcalage sur B1. Ainsi, le positionnement relatif peut impliquer le chevauchement des botes.
Une bote en position relative conserve la taille qu'elle avait dans le flux normal, ainsi que les retours la ligne la
superficie originale qui lui tait rserve. Le chapitre sur les blocs conteneurs prcise les cas o une bote en
position relative tablit un nouveau bloc conteneur.
Un lment gnre une bote en position relative quand la valeur de sa proprit 'position' est 'relative'. Le
dcalage de celleci est spcifi par les proprits 'top', 'bottom', 'left' et 'right'.
Les proprits 'left' et 'right' dplacent la(les) bote(s) horizontalement, sans changer sa(leur) taille. Le
dplacement se fait vers la droite pour la proprit 'left' et vers la gauche pour 'right'. Les botes n'tant ni
dcoupes ni tires par ces proprits, les valeurs calcules pour le dplacement vrifient toujours : dplacement
gauche = dplacement droit.
Quand les proprits 'left' et 'right' ont la valeur 'auto' (qui est leur valeur initiale), les valeurs calcules pour le
dplacement sont gales '0' (c..d. les botes restent leur emplacement original).
Quand la proprit 'left' a la valeur 'auto', sa valeur calcule devient celle ngative de la proprit 'right' (c..d. les
botes se dplacent vers la gauche, de la quantit de cette valeur).
Et inversement, quand la proprit 'right' a la valeur 'auto'.
Quand aucunes des proprits 'left' et 'right' n'ont la valeur 'auto', la position de la bote est sous l'effet d'une
double contrainte, une des deux proprits sera ignore. C'est selon la valeur de la proprit 'direction' ; quand
celleci a la valeur 'ltr', c'est la valeur de la proprit 'left' qui est retenue, celle de la proprit 'right' devenant la
valeur ngative de 'left', et inversement, quand la proprit 'direction' a la valeur 'rtl'.
Par exemple, ces deux feuilles de style sont quivalentes :
DIV.a8 { position: relative; left: 1em; right: auto }
DIV.a8 { position: relative; left: auto; right: 1em }
Les proprits 'top' et 'bottom' grent le dplacement vertical des botes en position relative. Ces proprits doivent
galement avoir des valeurs en opposition. Quand toutes deux ont la valeur 'auto', leurs valeurs calcules
deviennent '0'. Quand l'une d'entre elles a la valeur 'auto', celleci prend la valeur oppose de l'autre. Quand
aucunes des deux n'ont la valeur 'auto', la valeur de la proprit 'bottom' sera ignore (c..d. la valeur calcule pour
la proprit 'bottom' devient celle ngative de la proprit 'top').
Le mouvement dynamique des botes en position relative peut produire un effet d'animation en conjonction avec
des langages de script (voir galement la proprit 'visibility'). On peut aussi employer le positionnement relatif
comme une forme gnrale pour l'criture en exposant ou en indice, la hauteur de ligne n'tant cependant pas
automatiquement ajuste pour considrer le positionnement. Voir les calculs des hauteurs de ligne pour plus
d'information.
D'autres exemples de positionnement relatif apparaissent dans le chapitre traitant de la comparaison entre le flux
normal, les flottants et le positionnement absolu.
9.5 Les flottants

Une bote flottante est dplace vers la gauche ou la droite d'une ligne donne. La caractristique la plus
intressante d'un flottant (ou bote "flotte" ou "flottante") rside dans le fait que le contenu peut s'couler le long
de ses flancs (on peut empcher ce comportement avec la proprit 'clear'). Ce contenu descend le long du flanc
droit d'une bote flottante gauche et le long du flanc gauche pour celle flottante droite. Voici une introduction
au positionnement flottant et l'coulement du contenu ; la proprit 'float' le dtail des rgles rgissant ce
comportement.
Une bote flotte doit avoir une largeur explicite (spcifie par la proprit 'width' ou la largeur intrinsque pour
les lments remplcs). Ces botes deviennent des botes de bloc qui sont mues vers la gauche ou la droite et qui
72

vont buter sur le bord du bloc conteneur ou sur le bord externe d'un autre flottant. Leur haut s'aligne sur le haut de
la bote de ligne concerne (ou, quand il n'y a pas de bote de ligne, sur le bas de la bote de bloc prcdente).
Quand il n'y a pas assez de place pour le flottant dans la largeur de la ligne, celuici se dplace vers le bas, d'une
ligne l'autre, jusqu' en trouver une suffisamment large.
Une bote flottante se trouvant hors du flux normal, les botes de bloc non positionnes, cres avant et aprs elle,
s'coulent verticalement comme si celleci n'existait pas. Cependant, les botes de lignes, cres juste aprs la bote
flottante, se rduisent pour laisser de la place celleci. Le contenu de la ligne, celui avant la bote flotte, se
rpand dans la premire ligne disponible contre l'autre bord de cette bote.
Plusieurs flottants peuvent tre adjacents, ce modle s'applique aussi aux flottants adjacents dans la mme ligne.
Exemple(s) :
La rgle suivante fait flotter gauche toutes les botes des lments IMG qui ont un attribut class="icon" (et
leur applique une valeur de marge gauche de '0') :
IMG.icon {
float: left;
marginleft: 0;
}
Considrons la source HTML et la feuille de style suivantes :

<HTML>
<HEAD>
<TITLE>Exemple de flottants</TITLE>
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
</HEAD>
<BODY>
<P><IMG src=img.gif alt="Cette image pour illustrer les flottants.">
Un chantillon de texte qui n'a pas...
</BODY>
</HTML>
La bote de l'lment IMG flotte gauche. Le contenu qui le suit vient contre la droite du flottant, commenant sur
la mme ligne que celuici. Les botes de ligne se trouvant droite du flottant sont raccourcies pour tenir compte
de sa prsence, cellesci reprennent leur largeur "normale" (celle du bloc conteneur tabli par l'lment P) aprs le
flottant. Ce document pourrait apparatre ainsi :
La mise en forme aurait t exactement la mme si ce document avait t :

<BODY>
<P>Un chantillon de texte
<IMG src=img.gif alt="Cette image pour illustrer les flottants.">
qui n'a pas...
</BODY>
car le contenu se trouvant gauche du flottant est dplac par celuici et reformat le long de son flanc droit.
73

Les marges des botes flottantes ne fusionnent jamais avec celles des botes adjacentes. Ainsi, dans l'exemple
prcdent, les marges verticales entre la bote de P et la bote flotte de IMG n'ont pas fusionn.
Un flottant peut chevaucher sur les autres botes du flux normal (par exemple quand une bote proche de celuici
a des marges ngatives). Quand une bote enligne dborde sur un flottant, le contenu, l'arrireplan et les
bordures de celleci apparaissent sur le flottant. Quand c'est une bote de bloc, l'arrireplan et les bordures de
celleci apparaissent derrire le flottant, ceuxci n'tant visibles qu'aux endroits o le flottant est transparent. Par
contre, le contenu de la bote de bloc passe avant le flottant.
Exemple(s) :
Voici une autre illustration d'un flottant qui dborde sur les bordures d'lments dans le flux normal.
Une image flottante qui cache les bordures des botes de bloc qu'elle chevauche.
L'exemple suivant dmontre l'usage de la proprit 'clear' pour empcher l'coulement d'un contenu le long d'un
flottant.
Exemple(s) :
Supposons une rgle telle que :
P { clear: left }
une mise en forme pourrait en tre :
74
La proprit 'clear: left' s'appliquant aux deux paragraphes, le second est "pouss en dessous" du flottant, la marge
du haut de ce paragraphe va crotre pour accomplir cet effet (voir la proprit 'clear').
9.5.1 Le positionnement des flottants : la proprit 'float'
'float'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
left | right | none | inherit

none
tous les lments, sauf ceux positionns et ceux dont le contenu est gnr
non
sans objet
visuel
Cette proprit spcifie le flottement d'une bote gauche, droite ou pas du tout. On peut l'employer pour des
lments gnrant des botes qui ne sont pas en position absolue. Voici la signification des valeurs que celleci
admet :
left
L'lment gnre une bote de bloc qui flotte gauche. Le contenu s'coule sur son flanc droit en
commenant en haut (en fonction de la valeur de la proprit 'clear'). En ignorant la valeur de la proprit
'display', sauf si cette valeur est 'none' ;
right
Inversement et de la mme faon que pour 'left' ;
none
La bote ne flotte pas.
Voici les rgles prcises qui gouvernent le comportement des flottants :
1. Le bord externe gauche d'une bote flottant gauche ne peut pas se trouver audel du bord gauche de
bloc conteneur. Inversement et de la mme faon pour les botes flottants droite ;
2. Pour une bote donne flottant gauche, celle ci suivant dans la source un lment ayant dj gnr une
autre bote flottant gauche, le bord externe gauche de cette bote doit venir droite du bord externe droit
de la bote prcdente, ou, sinon, son sommet doit venir en dessous du bas de la bote prcdente.
Inversement et de la mme faon pour des botes flottants droite ;
3. Le bord externe droit d'une bote flottant gauche du bord externe gauche d'une bote flottant droite,
cette dernire tant situe sa droite. Inversement et de la mme faon pour une bote flottant droite ;
4. Le sommet externe d'une bote flottante ne peut pas se trouver audessus de celui de son bloc conteneur ;
5. Le sommet externe d'une bote flottante ne peut pas se trouver audessus d'une bote de bloc ou flottante,
gnre par un lment prcdent dans le document source ;
6. Le sommet externe d'une bote flottante ne peut pas se trouver audessus du sommet d'une bote de ligne
qui contient une bote gnre par un lment survenu plus tt dans le document source ;
7. Une bote flottant gauche, ayant une autre bote de mme type sa gauche, ne devrait pas avoir son bord
externe droit audel du bord droit de son bloc conteneur. Plus librement, un flottant gauche ne devrait
pas dpasser le bord droit, moins d'tre dj au maximum gauche). Inversement et de la mme faon
75

pour les botes flottant droite ;
8. Une bote flottante doit se trouver aussi haut que possible ;
9. Une bote flottant gauche doit aller au maximum vers la gauche, et au maximum vers la droite pour une
celle flottant droite. Une position plus haute est prfre celle qui est plus gauche ou droite.
9.5.2 Le contrle du flux autour des flottants : la proprit 'clear'
'clear'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
none | left | right | both | inherit

none
ceux des lments de type bloc
non
sans objet
visuel
Cette proprit indique lesquels cts d'une ou des botes d'un lment ne doivent pas tre adjacents une bote
flottante prcdente. Il peut arriver que l'lment luimme aient des descendants flottants, la proprit 'clear' n'a
alors aucun effet sur eux.
Cette proprit ne peut s'appliquer qu'aux lment de type bloc (dont les flottants). Dans le cas des botes
compactes et en enfilade, la proprit s'applique la bote de bloc finale laquelle cellesci appartiennent.
Voici la signification des valeurs admises par la proprit quand on l'applique aux botes de bloc non flottantes :
left
La marge haute de la bote gnre est augmente juste assez pour que le bord haut de sa bordure se
dplace sous le bord externe bas d'une bote flottant gauche, celleci tant issue d'un lment prcdent
du document source ;
right
Inversement et de la mme faon, la bote, issue d'un lment prcdent dans le document source, flottant
droite ;
both
La bote gnre se dplace sous chacune des botes flottantes qui sont issues d'lments prcdents du
document source ;
none
La bote ne subit aucune contrainte de position visvis des flottants.
Quand on applique cette proprits aux lments flottants, une modification des rgles de leur positionnement
intervient. On ajoute une contrainte supplmentaire (la dixime) :
Le sommet du bord externe de cette bote flottante doit se trouver en dessous de toutes botes prcdentes
qui flottent gauche (pour la valeur 'clear:left'), ou qui flottent droite (pour la valeur 'clear: right'), ou
toutes celles qui flottent (pour la valeur 'clear: both').
9.6 Le positionnement absolu

Avec le modle de positionnement absolu, une bote se dcale en fonction de son bloc conteneur. Celleci est
entirement retire du flux normal (elle n'a aucune influence sur les lments de mme parent survenant aprs).
Les bote en position absolue tablissent un nouveau bloc conteneur pour leurs descendants, ceux qui suivent le
flux normal et ou ceux qui sont positionns. Cependant, leurs contenus ne s'coulent pas autour d'autres botes.
Ces contenus peuvent, ou non, cacher ceux des autres botes, selon leur situation dans l'empilement des botes et
leur chevauchement.
Dans cette spcification, quand on se rfre un lment en position absolue (ou sa bote), cela signifie que la
proprit 'position' de celuici a les valeurs 'absolute' ou 'fixed'.
9.6.1 Le positionnement fixe
Le positionnement fixe est une variante du positionnement absolu. La seule diffrence, le bloc conteneur d'une
bote en position fixe est tabli par l'espace de visualisation. Pour les mdias continus, les botes en position fixe
ne bougent pas quand on fait dfilier le document. Sous cet angle, cellesci ont un comportement similaire celui
des images d'arrireplan fixes. Pour les mdias pagins, ces botes se rptent sur chaque page. Par exemple, ceci
peut prsenter un intrt pour placer une signatre en bas de chacune d'entre elles
76

Les auteurs peuvent utiliser le postionnement fixe pour des prsentations comme avec des cadres. Soit la mise en
page suivante :
Ceci pourrait tre ralis avec ce document HTML et ces rgles de style :
<HTML>
<HEAD>
<TITLE>Un document avec des cadres en CSS2</TITLE>
BODY { height: 8.5in } /* Ncessaire pour les hauteurs en pourcentage plus bas */
#entete {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#cote {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#corps {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#pied {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="entete"> ... </DIV>
<DIV id="cote"> ... </DIV>
<DIV id="corps"> ... </DIV>
<DIV id="pied"> ... </DIV>
</BODY>
77

</HTML>
9.7 Les relations entre les proprits 'display', 'position' et 'float'

Ces trois proprits, 'display', 'position' et 'float', qui affectent la gnration des botes et le positionnement,
interagissent ainsi :
1. Quand la valeur de la proprit 'display' est 'none', les agents utilisateurs doivent ignorer les proprits
'position' et 'float'. L'lment ne gnre pas de bote dans ce cas ;
2. Autrement, quand la valeur de la proprit 'position' est 'absolute' ou 'fixed', la proprit 'display' prend la
valeur 'block' et la proprit 'float' la valeur 'none'. L'emplacement de la bote sera dtermin selon les
proprits 'top', 'right', 'bottom' et 'left' ainsi que le bloc conteneur de celleci ;
3. Autrement, quand la valeur de la proprit 'float' est autre que 'none', la proprit 'display' prend la valeur
'block' et la bote est flottante ;
4. Autrement, les autres valeurs pour la proprit 'display' s'appliquent comme spcifies.
Note : CSS2 ne spcifie pas de processus de mise en forme quand les valeurs de ces proprits sont modifies par
le biais de scripts. Par exemple, que se passetil pour un lment, dont la proprit 'width' a la valeur 'auto',
quand celuici est repositionn ? Estce que l'coulement des contenus est recommenc, ou estce que ceuxci
conservent leur formatage original ? La rponse ne se trouve pas dans ce document, les premires
implmentations de CSS2 sont certainement divergentes sur ce point.
9.8 Comparaison entre les positionnements en flux normal, flottant et absolu

L'illustration des diffrences entre les positionnements en flux normal, relatif et absolu se fera partir d'exemples
bass sur cet extrait de document HTML :
<HTML>
<HEAD>
<TITLE>Comparaison entre les schmas de positionnement</TITLE>
</HEAD>
<BODY>
<P>Dbut du corps du contenu.
<SPAN id="Externe"> Dbut du contenu d'Externe.
<SPAN id="Interne"> Contenu d'Interne.</SPAN>
Fin du contenu d'Externe.</SPAN>
Fin du corps du contenu.
</P>
</BODY>
</HTML>
Avec ce document, nous supposerons les rgles suivantes :

BODY { display: block; lineheight: 200%;
width: 400px; height: 400px }
P
{ display: block }
SPAN { display: inline }
Pour chacun des exemples, les emplacements finaux des botes gnres par les lments Externe et Interne seront
variables. Dans les dessins, les nombres gauche indiquent la position des lignes en flux normal, cellesci tant
agrandies pour plus de clart. Note : les chelles verticales et horizontales diffrent selon les illustrations.
9.8.1 Le flux normal
Considrons les dclarations CSS pour les IDs Externe et Interne, cellesci ne modifiant pas le flux normal des
botes :
#Externe { color: red }
#Interne { color: blue }
L'lment P ne contient que des lments enligne, c..d. du texte anonyme enligne et deux lments SPAN.
Ainsi, tout le contenu est dans un contexte de mise en forme enligne, l'intrieur d'un bloc conteneur tablit par
l'lment P luimme, comme ceci :
78
9.8.2 Le positionnement relatif

Pour illustrer l'effet du positionnement relatif, spcifions :
#Externe { position: relative; top: 12px; color: red }
#Interne { position: relative; top: 12px; color: blue }
Le texte suit un cours normal jusqu' l'lment Externe. Celuici s'coule alors pour occuper son volume dans le
flux normal et prend ses marques, l'une tant reprsente par la fin de la ligne 1. Ensuite, l'ensemble, constitu des
botes enligne contenant le texte (qui est rparti sur trois lignes), est dplac de la valeur '12px' (vers le haut).
L'lment Interne, tant un enfant de Externe, devrait normalement voir son contenu poursuivre dans le flux aprs
les mots "contenu d'Externe" (entre la ligne 1 et 2). Cependant, celuici tant luimme plac relativement au
contenu de Externe d'une valeur de '12px' (vers le bas), il va se retrouver sa position de dpart sur la ligne 2.
Noter que le contenu qui suit celui de l'lment Externe n'est pas affect par le positionnement relatif de ce
dernier.
79

Noter que si le dcalage de l'lment Externe avait t '24px', le texte de celuici et le texte du corps du contenu
se seraient chevauchs.
9.8.3 Faire flotter une bote
Voyons maintenant l'effet d'un flottement droite sur le texte de l'lment Interne avec cette rgle :
#Interne { float: right; width: 130px; color: blue }
Le texte suit le flux normal jusqu' la bote d'Interne, celleci tant hors du flot et flottant vers la marge droite (la
proprit 'width' de la bote est explicite). Les botes de ligne sur la gauche du flottant ont t rduites, le reste du
texte du document se rpartissant entre elles.
Pour illustrer l'effet de la proprit 'clear', ajoutons un lment Interne2au document de dmonstration :
<HTML>
<HEAD>
<TITLE>Comparaison entre les schmas de positionnement II</TITLE>
</HEAD>
<BODY>
<P>Dbut du corps du contenu.
<SPAN id=Externe> Dbut du contenu d'Externe.
<SPAN id=Interne> Contenu d'Interne.</SPAN>
<SPAN id=Interne2> Contenu.</SPAN>
Fin du contenu d'Externe.</SPAN>
Fin du corps du contenu.
</P>
</BODY>
</HTML>
Avec les rgles suivantes :

#Interne2 { color: red }
la bote d'Interne va flotter droite comme auparavant, le reste du texte du document se rpandant dans l'espace
laiss vacant :
80
Cependant, si la proprit 'clear' de l'lment Interne2 a la valeur 'right' (c..d., la bote gnre de celuici va
refuser de se placer sur la droite de botes flottantes), le contenu d'Interne2 commence son coulement sous le
flottant :
#Interne2 { clear: right; color: red }
9.8.4 Le positionnement absolu

Voyons enfin, l'effet d'un positionnement absolu. Considrons les dclarations CSS suivantes pour Externe et
Interne :
#Externe {
position: absolute;
top: 200px; left: 200px;
width: 200px;
color: red;
}
81

#Interne { color: blue }
ce qui positionne le sommet de la bote d'Externe en fonction de son bloc conteneur. Celuici, pour une bote
positionne donne, est tabli par l'anctre positionn de cette bote qui est le plus proche (ou, s'il n'y en a pas, par
le bloc conteneur initial, comme dans l'exemple qui suit). Le haut de la bote d'Externe se trouve '200px' en
dessous du haut du bloc conteneur, et la gauche de sa bote '200px' du ct gauche de celuici. La bote de
l'lment enfant d'Externe suit le flot normal par rapport son parent.
Dans l'exemple suivant, nous avons une bote en position absolue qui est un enfant d'une bote en position relative.
Bien que la bote du parent, Externe, ne soit pas en ralit dplace, le fait de spcifier la valeur 'relative' pour sa
proprit 'position' lui permet d'tre un bloc conteneur pour des descendants positionns. Comme la bote enligne
d'Externe est dcoupe en morceaux rpartis sur plusieurs lignes, les bords du haut et de gauche du premier d'entre
eux (reprsents en tirets pais dans le dessin) servent de rfrences pour les dcalages produits par les proprits
'top' et 'left'.
#Externe {
position: relative;
color: red
}
#Interne {
position: absolute;
height: 130px; width: 130px;
color: blue;
}
Ce qui donnerait le rsultat suivant :
82
Si on ne positionne pas la bote d'Externe :

#Interne {
position: absolute;
height: 130px; width: 130px;
color: blue;
}
Le bloc conteneur d'Interne devient le bloc conteneur initial (dans l'exemple). Voici dans ce cas o se placerait la
bote d'Interne :
On peut employer le positionnement relatif ou absolu pour raliser une marque de changement, comme dans
l'exemple suivant. Ainsi avec ce document :
<P style="position: relative; marginright: 10px; left: 10px;"> J'emploie deux tirets
en rouge comme marque de changement. Ceuxci vont "flotter" gauche de la ligne
83

contenant CE <SPAN style="position: absolute; top: auto; left: 1em; color: red;"></SPAN>mot.</P>
Cet extrait pourrait tre reprsent ainsi :
Premirement, le paragraphe (dont les cts du bloc conteneur sont tracs) suit le flux normal. Ce paragraphe est
ensuite dplac de '10px' partir du bord gauche de celuici (c'est pourquoi on a laiss une marge de '10px' sur la
droite, en prvision du dcalage). Les deux tirets qui marquent le changement sont retirs du flux normal, puis
placs sur la ligne concerne (en raison de 'top: auto'), et '1em' du bord gauche du bloc conteneur (celui tabli
par l'lment P son emplacement final). En rsultat, la marque de changement semble "flotter" gauche de ladite
ligne.
9.9 La prsentation en couches

Dans les passages suivants, l'expression "devant" signifie au plus proche du spectateur qui regarde l'cran.
En CSS2, chaque bote reoit un emplacement selon trois dimensions. En plus de leurs positions horizontales et
verticales, les botes schelonnent le long d'un "axez" et s'empilent les unes audessus des autres dans la mise en
forme. Les positions sur l'axez sont particulirement importantes lors des chevauchements visuels des botes.
Cette partie traite de la faon dont cellesci peuvent se positionner sur l'axez.
Chaque bote participe d'un contexte d'empilement. Dans un contexte d'empilement donn, chacune des botes
reoit un entier pour son niveau dans l'empilement, cet entier reprsentant la position de la bote sur l'axez, en
rapport avec les autres botes de ce contexte. La valeur du niveau dans l'empilement d'une bote peut tre ngative.
Pour les botes situes au mme niveau d'un contexte d'empilement, cellesci s'empilent en partant du fond vers
l'avant, en fonction de leur ordre dans l'arborescence du document.
L'lment racine cre un contexte d'empilement racine, mais d'autres lments peuvent tablir des contextes
d'empilement locaux. Un contexte d'empilement local est atomique, les botes d'autres contextes d'empilement
ne pouvant interfrer dans l'empilement des botes de celuici.
Un lment, tablissant un contexte d'empilement local, gnre une bote avec deux ordres d'empilement : l'un
pour le contexte d'empilement que luimme cre (toujours gal '0') et l'autre pour celui dont il fait luimme
partie (donn par la proprit 'zindex').
La bote d'un lment occupe le mme niveau dans l'empilement que celle de son parent, moins que la proprit
'zindex' ne la contraigne un autre niveau.
9.9.1 La spcification du niveau dans l'empilement : la proprit 'zindex'
'zindex'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
auto | <entier> | inherit

auto
non
sans objet
visuel
Pour une bote positionne, la proprit 'zindex' spcifie :

1. Le niveau dans l'empilement pour une bote dans un contexte d'empilement donn ;
2. L'tablissement par une bote d'un contexte d'empilement local.
Voici les significations des valeurs :
84

<entier>
Cet entier correspond au niveau dans l'empilement d'une bote gnre dans un contexte d'empilement
donn. Cette bote tablit galement un contexte d'empilement local dans lequel la valeur de son niveau
est '0' ;
auto
Le niveau d'empilement de la bote gnre dans un contexte d'empilement donn est le mme que celui
de la bote de son parent. Cette bote n'tablit pas un nouveau contexte d'empilement local.
Dans l'exemple suivant, les niveaux dans l'empilement des botes (nommes partir de leur attribut "id") sont :
"texte2"=0, "image"=1, "texte3"=2, and "texte1"=3. Les niveaux des autres botes tant spcifis par la proprit
'zindex'.
<HTML>
<HEAD>
<TITLE>Positionnement selon l'axez</TITLE>
.pile {
position: absolute;
left: 2in;
top: 2in;
width: 3in;
height: 3in;
}
</STYLE>
</HEAD>
<BODY>
<P>
<IMG id="image" class="pile"
src="butterfly.gif" alt="L'image d'un papillon"
style="zindex: 1">
<DIV id="texte1" class="pile"
style="zindex: 3">
Ce texte se surimposera l'image du papillon.
</DIV>
<DIV id="texte2">
Ce texte sera endessous de tout.
</DIV>
<DIV id="texte3" class="pile"
style="zindex: 2">
Ce texte se trouvera sous texte1, mais se surimposera l'image du papillon.
</DIV>
</BODY>
</HTML>
Cet exemple illustre la notion de transparence. Par dfaut, une bote laisse voir celles situes en arrire travers
les zones transparentes de son contenu. Ici, chacune des botes vient recouvrir celles en dessous de faon
transparente. On peut annuler ce comportement en employant l'une des proprits d'arrireplan.
9.10 Le sens du texte : les proprits 'direction' et 'unicodebidi'

Les caractres de certaines critures s'inscrivent de droite gauche. Dans certains documents, notamment ceux en
arabe ou en hbreu, et ceux avec un contexte de langues mixtes, plusieurs sens de lecture peuvent apparatre dans
le texte d'un bloc (visuel) particulier. On appelle ce phnomne bidirectionalit, ou "bidi" pour faire court.
Le standard Unicode ([UNICODE], chapitre 3.11), dfinit un algorithme complexe pour dterminer la
directionalit d'un texte. Cet algorithme comporte une partie implicite, base sur les proprits des caractres, et
des contrles explicites, portant sur leurs incorporations et leurs contraintes. CSS2 s'appuie sur celuici pour
atteindre un rendu bidirectionnel convenable. Les proprits 'direction' et 'unicodebidi' permettent aux auteurs de
spcifier une adquation des lments et attributs d'un document avec cet algorithme.
Quand un document contient des caractres allant de droite gauche, et si l'agent utilisateur peut afficher ces
caractres (dans les glyphes appropris, et non pas avec des substituts arbitraires comme des points
d'interrogation, un code hexadcimal, un carr noir, etc.), l'agent utilisateur doit utiliser l'algorithme
bidirectionnel. En apparence, cette obligation est univoque ; bien que les textes des documents en hbreu ou en
arabe ne contiennent pas tous de parties bidirectionnelles, ceuxci sont plus enclins en contenir (par exemple des
nombres, des extraits en d'autres langues) que ceux des documents crits de gauche droite ne contiendraient de
85

parties crites de droite gauche.
Comme le sens de lecture d'un texte dpend de la structure et de la smantique du langage du document, ces
proprits ne devraient la plupart du temps tre utilises que par les auteurs de descriptions de type de document
(DTDs) ou d'autres documents spciaux. Quand une feuille de style par dfaut utilise cellesci, les auteurs et les
utilisateurs ne devraient pas spcifier de rgles pour les surclasser. Une exception typique : la suppression du
comportement bidi d'un agent utilisateur, et sa transcription du yiddish (habituellement en caractres hbreux) en
caracts latins pour rpondre une requte de l'utilisateur.
La spcification HTML 4.0 ([HTML40], chapitre 8.2) dfinit le comportement bidirectionnel des lments
HTML. Les agents utilisateurs conformes pour HTML peuvent ignorer les proprits 'direction' et 'unicodebidi'
des feuilles de style des auteurs et des utilisateurs. Le mot "ignorer" signifie ici que, si une valeur des proprits
'unicodebidi' ou 'direction' entrait en conflit avec l'attribut HTML 4.0 "dir", c'est la valeur de ce dernier que les
agents utilisateurs peuvent choisir d'honorer. Ceuxci ne sont pas tenus de reconnatre les proprit 'direction' et
'unicodebidi' pour tre conformes CSS2, moins d'tre capables de reprsenter du texte bidirectionnel (et aussi,
sauf pour le cas de HTML 4.0 comme prcis audessus). Les rgles de style pour obtenir le comportement bidi,
tel que dfini dans [HTML40], sont intgres dans l'exemple de feuille de style. Voir aussi la spcification HTML
4.0 pour d'autres questions lies la bidirectionalit.
'direction'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
ltr | rtl | inherit

ltr
tous les lments, mais voir les explications audessus
oui
sans objet
visuel
Cette proprit spcifie le sens d'criture principal des blocs et le sens des incorporations et contraintes (voir
'unicodebidi') pour l'algorithme bidirectionnel Unicode. En outre, elle spcifie le sens de mise en forme des
colonnes des tables, le sens du dbordement horizontal et l'emplacement d'une dernire ligne incomplte quand la
proprit 'textalign' a pour valeur 'justify'.
Les valeurs de cette proprit ont la signification suivante :
ltr
Sens de gauche droite [ndt. lefttoright] ;
rtl
Sens de droite gauche [ndt. righttoleft].
La proprit 'unicodebidi' doit avoir les valeurs 'embed' ou 'override' pour que la proprit 'direction' puisse agir
sur les lments de type enligne.
Note : Quand la proprit 'direction' est spcifie pour les lments des colonnes d'une table, celleci n'est pas
hrite par les cellules des colonnes, les colonnes n'apparaissant pas dans l'arborescence du document. Ainsi, on
ne peut pas adresser facilement les rgles d'hritage de l'attribut "dir", telles que dcrites dans la spcification
[HTML40], chapitre 11.3.2.1.
'unicodebidi'
Valeur :
Initiale :
S'applique :
Inherited:
Pourcentage :
Mdias :
normal | embed | bidioverride | inherit

normal
tous les lments, mais voir les explications audessus
non
N/A
visuel
Les valeurs de cette proprit ont la signification suivante :

normal
L'lment n'ouvre pas un niveau supplmentaire d'incorporation en fonction de l'algorithme
bidirectionnel. Pour les lments de type enligne, un rordonnancement implicite s'effectue audel des
limites de l'lment ;
embed
Quand il s'agit d'un lment de type enligne, cette valeur ouvre un niveau supplmentaire d'incorporation
en fonction de l'algorithme bidirectionnel. La proprit 'direction' donne le sens du niveau d'incorporation.
Le rordonnancement s'effectue implicitement l'intrieur de l'lment. Celuici correspond l'insertion
86

des caractres LRE (U+202A pour 'direction: ltr') ou RLE (U+202B pour 'direction: rtl') au dbut de
l'lment et du caractre PDF la fin de celuici ;
bidioverride
Quand il s'agit d'un lment de type enligne, ou bloc, ne contenant son tour que des lments de type
enligne, ceci cre une contrainte. Cela signifie que le rordonnancement l'intrieur de l'lment
s'effectue strictement dans l'ordre de la proprit 'direction', la partie implicite de l'algorithme tant
ignore. Le rordonnancement correspond l'insertion des caractres LRO (U+202D pour 'direction: ltr')
ou RLO (U+202E pour 'direction: rtl') au dbut de l'lment et du caractre PDF (U+202C) la fin de
celuici.
L'ordonnancement final des caractres de chaque lment de type bloc est le mme que celui dcrit cidessus,
comme si les caractres de contrle bidi avaient t ajouts, le balisage retir et la succession de caractres qui en
rsulte, transmise une implmentation de l'algorithme bidirectionnel Unicode comme du texte brut qui produirait
les mmes retours la ligne que du texte styl. Dans ce processus, les entits non textuelles, comme les images,
sont traites comme des caractres neutres, moins que leur proprit 'unicodebidi' n'ait une valeur autre que
'normal', auquel cas ces entits seraient considres comme ayant une importance pour le sens indiqu par la
proprit 'direction'.
Noter que pour autoriser l'coulement de botes enligne dans une direction uniforme (soit entirement de gauche
droite, ou inversement), plusieurs autres de ces botes enligne (dont des botes enligne anonymes) pourraient
devoir tre cres, et certaines d'entre elles devoir tre dcoupes et rordonne avant leur coulement.
Du fait d'une limitation de l'algorithme Unicode 15 niveaux d'incorporation, l'utilisation d'une autre valeur que
'normal' avec la proprit 'unicodebidi' ne devrait se faire que de faon approprie. Plus particulirement, la
valeur 'inherit' devrait faire l'objet d'une extrme prudence. Cependant, pour ceux des lments destins
habituellement un rendu en bloc (visuel), on prfrera la spcification 'unicodebidi: embed', pour conserver
leur cohsion, dans le cas o leur proprit 'display' prendrait la valeur 'inline' (voir l'exemple plus loin).
Voici l'exemple d'un document XML contenant du texte bidirectionnel, qui illustre un principe de construction
important : les auteurs de DTD devraient prendre en compte les questions bidi tant dans les lments et attributs
du langage concern que dans les feuilles de style qui accompagnent le document. Cellesci devraient tre
construites en distinguant les rgles bidi des autres rgles. Les rgles bidi ne devraient pas tre surclasses par
d'autres feuilles de style, de manire prserver les comportements bidi du langage du document ou du DTD.
Exemple(s) :
Pour cet exemple, les lettres en minuscules reprsentent des caractres lus de faon inhrente de gauche droite,
et les lettres en majuscules, ceux de droite gauche :
<HEBREU>
<PAR>HBREU1 HBREU2 anglais3 HBREU4 HBREU5</PAR>
<PAR>HBREU6 <EMPH>HBREU7</EMPH> HBREU8</PAR>
</HEBREU>
<ANGLAIS>
<PAR>anglais9 anglais10 anglais11 HBREU12 HBREU13</PAR>
<PAR>anglais14 anglais15 anglais16</PAR>
<PAR>anglais17 <HEQUO>HBREU18 anglais19 HBREU20</HEQUO></PAR>
</ANGLAIS>
S'agissant d'un document XML, c'est la feuille de style qui indique le sens d'criture. Voici celleci :
/* Rgles bidi */
HEBREW, HEQUO {direction: rtl; unicodebidi: embed}
ANGLAIS
{direction: ltr; unicodebidi: embed}
/* Rgles de prsentation */
HEBREW, ANGLAIS, PAR {display: block}
EMPH
{fontweight: bold}
L'lment HEBREU forme un bloc avec un sens de lecture de droite gauche, l'lment ANGLAIS un bloc avec
un sens de lecture de gauche droite. Les lments PAR sont des blocs qui hritent du sens de lecture de leurs
parents, Ainsi, les deux premiers sont lus en commenant en haut droite, et les trois derniers en commenant en
haut gauche. Noter que les noms des lments HEBREU et ANGLAIS ont t choisis exprs pour la
dmonstration ; en gnral, ceuxci devraient l'tre pour reflter la structure du document, sans rfrence la
langue employe.
L'lment EMPH, de type enligne, dont la proprit 'unicodebidi' a la valeur 'normal' (la valeur par dfaut),
celuici n'a pas d'effet sur l'ordonnancement du texte. Par contre, l'lment HEQUO cre une incorporation.
87

Quand la ligne a une grande longueur, la mise en forme de ce texte pourrait ressembler ceci :
5UERBH 4UERBH anglais3 2UERBH 1UERBH
8UERBH 7UERBH 6UERBH
anglais9 anglais10 anglais11 13UERBH 12UERBH
anglais14 anglais15 anglais16
anglais17 20UERBH anglais19 18UERBH
Noter que l'incorporation de HEQUO amne HBREU18 se trouver droite de anglais19.

Si les lignes devaient tre dcoupes, cela pourrait ressembler :
2UERBH 1UERBH
H 4UERBH anglais3
5UERB
H 7UERBH 6UERBH
8UERB
anglais9 anglais10 an
glais11 12UERBH
13UERBH
anglais14 anglais15
anglais16
anglais17 18UERBH
20UERBH anglais19
HBREU18 devant tre lu avant anglais 19, il se trouve dans la ligne audessus d'anglais19. Un simple
dcoupage de la longue ligne de la mise en forme prcdente n'aurait pas t correct. Noter aussi que la premire
syllabe de anglais19 aurait pu tenir sur la ligne d'avant, bien que, pour les mots lus de gauche droite dans un
contexte de lecture de droite gauche, et vice versa, leurs csures soient gnralement supprimes pour viter
l'affichage d'un tiret en plein milieu d'une ligne.
88
10 Dtails du modle de mise en forme visuel

10.1 Dfinition du "bloc conteneur"
La position et la taille de la bote d'un lment sont parfois calcules par rapport un certain rectangle, appel le
bloc conteneur de l'lment. On le dfinit ainsi :
1. Le bloc conteneur dans lequel se range l'lment racine (on l'appelle dans ce cas le bloc conteneur initial),
est dtermin par l'agent utilisateur ;
2. Pour les autres lments, sauf ceux en position absolue, le bloc conteneur est matrialis par le bord du
contenu de la bote de type bloc de leur anctre le plus proche ;
3. Pour ceux des lments avec une spcification 'position: fixed', le bloc conteneur est tabli par l'espace de
visualisation ;
4. Pour ceux des lments avec une spcification 'position: absolute', le bloc conteneur est tabli par l'anctre
le plus proche dont la valeur de la proprit 'position' est autre que 'static', de cette manire :
1. Quand l'anctre est un lment de type bloc, le bloc conteneur est matrialis par le bord de
l'espacement de cet anctre ;
2. Quand l'anctre est un lment de type enligne, le bloc conteneur dpend de la proprit
'direction'
1. Si cette proprit a la valeur 'ltr', les bords du haut et de gauche du bloc conteneur se
confondent avec ceux de la premire bote gnre par cet anctre, et les bords du bas et
de droite avec ceux de la dernire bote gnre par celuici ;
2. Si cette proprit a la valeur 'rtl', les bords du haut et de droite du bloc conteneur se
confondent avec ceux de la premire bote gnre par cet anctre, et les bords du bas et
de gauche avec ceux de la dernire bote gnre par celuici.
Quand il n'existe pas un tel anctre, c'est le bord du contenu de la bote de l'lment racine qui tablit le
bloc conteneur.
Exemple(s) :
Dans ce document, sans positionnement :
<HTML>
<HEAD>
<TITLE>Illustration des blocs conteneurs</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">Voici un texte dans le premier paragraphe...</P>
<P id="p2">Voici un texte <EM id="em1">dans le
<STRONG id="strong1">second</STRONG> paragraphe...</EM></P>
</DIV>
</BODY>
</HTML>
Les blocs conteneurs sont tablis ainsi :

Pour la bote gnre par
Le bloc conteneur est tabli par
body
bloc conteneur initial (selon l'agent utilisateur)
div1
body
p1
div1
p2
div1
em1
p2
strong1
p2
Si on positionne "div1" :
#div1 { position: absolute; left: 50px; top: 50px }
son bloc conteneur n'est plus "body" ; c'est "div1" qui est devenu le bloc conteneur initial (car il n'y a pas de botes
d'autres anctres positionns).
89

Si on positionne galement "em1" :
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
La table des blocs conteneurs devient :

Pour la bote gnre par Le bloc conteneur est tabli par
body
bloc conteneur initial
div1
bloc conteneur initial
p1
div1
p2
div1
em1
div1
strong1
em1
En positionnant "em1", son bloc conteneur devient la bote de son plus proche anctre positionn (c..d. celle
gnre par "div1").
10.2 La largeur du contenu : la proprit 'width'

'width'
Valeur :
Initiale :
S'applique
:
Hrite :
Pourcentage
:
Mdias :

auto
tous les lments sauf ceux de type enligne non remplacs ainsi que les ranges et groupes
de ranges des tables.
non
visuel
Cette proprit spcifie la largeur du contenu des botes gnres par les lments de type bloc et ceux remplacs.
Celleci ne s'applique pas aux lments non remplacs et de type enligne. Les largeurs de leurs botes
correspondent celles de leur contenus reprsents avant un dcalage relatif de leurs enfants. Les botes enligne
se rpandent dans des botes de ligne. Les largeurs des botes de ligne sont donnes par leur bloc conteneur, et
cellesci pouvant retrcir du fait de la prsence de flottants.
La bote d'un lment remplac a une largeur intrinsque l'agent utilisateur pouvant la faire varier en chelle
quand la valeur de la proprit est diffrente de 'auto'.
Les valeurs ont les significations suivantes :
<longueur>
Spcifie une largeur fixe ;
<pourcentage>
Spcifie une largeur en pourcentage. Le pourcentage est calcul en fonction de la largeur du bloc
conteneur de la bote gnre ;
auto
La largeur dpend de celles d'autres proprits. Voir plus loin.
La proprit 'width' n'admet pas de valeurs ngatives.
Exemple(s) :
Par exemple, cette rgle la largeur du contenu des paragraphes 100 pixels :
P { width: 100px }
10.3 Le calcul des largeurs et des marges

Pour un lment donn, les valeurs calcules des proprits 'width', 'marginleft', 'marginright', 'left' et 'right'
dpendent du type de la bote gnre par cet lment et de chacune d'entre elles. En principe, ces valeurs sont les
mmes que celles qui sont spcifies, les valeurs 'auto' tant remplaces par certaines valeurs appropries, mais il
90

y a des exceptions. On doit distinguer les cas suivants :
1. les lments de type enligne non remplacs
2. les lments de type enligne remplacs
3. les lments de type bloc non remplacs dans un flux normal
4. les lments de type bloc remplacs dans un flux normal
5. les lments flottants non remplacs
6. les lments flottants remplacs
7. les lments non remplacs en position absolue
8. les lments remplacs en position absolue
Les points 1 6 incluent le positionnement relatif.
10.3.1 Les lments de type enligne non remplacs
La proprit 'width' ne s'applique pas. Quand on spcifie une valeur 'auto' pour les proprits 'left', 'right',
'marginleft' ou 'marginright', leur valeur calcule devient '0'.
10.3.2 Les lments de type enligne remplacs
Quand on spcifie une valeur 'auto' pour les proprits 'left', 'right', 'marginleft' ou 'marginright' leur valeur
calcule devient '0'. Pour la valeur spcifie 'auto', la proprit 'width' prend, comme valeur calcule, la largeur
intrinsque de l'lment.
Quand on spcifie la valeur 'auto' aux proprits 'width' et 'height', la valeur calcule de 'width' correspond la
largeur intrinsque de l'lment. Si on spcifie la valeur 'auto' pour la proprit 'width' et une autre valeur pour la
proprit 'height', la valeur calcule de 'width' est le rsultat de l'opration (largeur intrinsque) * ( (hauteur
calcule) / (hauteur intrinsque) ).
10.3.3 Les lments de type bloc non remplacs dans un flux normal
Quand on spcifie la valeur 'auto' aux proprits 'left' ou 'right', leur valeur calcule est '0'. Les quations suivantes
doivent tre vrifies pour les autres proprits :
'marginleft' + 'borderleftwidth' + 'paddingleft' + 'width' + 'paddingright' +
'borderrightwidth' + 'marginright' = largeur du bloc conteneur
Quand la valeur de la proprit 'borderstyle' est 'none', utiliser pour l'paisseur de la bordure la valeur '0'. Quand
toutes les proprits prcdentes ont une valeur spcifie autre que 'auto', on dit que les valeurs sont
"surcontraintes" et l'une des valeurs calcules devra tre diffrente de celle qui aura t spcifie. Quand la
proprit 'direction' a la valeur 'ltr', la valeur spcifie pour la proprit 'marginright' sera carte;e, sa valeur
calcule sera dtermine de manire ce que l'galit prcdente soit vrifie. Et de la mme faon, pour la
proprit 'marginleft', quand la proprit 'direction' a la valeur 'rtl'.
Si l'une exactement des valeurs spcifies est 'auto', sa valeur calcule est dduite de l'galit.
Si la proprit 'width' a la valeur 'auto', les valeurs spcifies 'auto' d'autres proprits deviennent '0', la valeur
calcule de 'width' se dduisant alors de l'galit.
Si les deux proprits 'marginleft' et 'marginright' ont la valeur 'auto', leurs valeurs calcules sont gales.
Noter que la valeur de la proprit 'width' ne peut tre suprieure celle de 'maxwidth', ni infrieure celle de
'minwidth'. En particulier, elle ne peut pas tre ngative. Voir les rgles s'y rapportant au chapitre 10.4 plus loin.
10.3.4 Les lments de type bloc remplacs dans un flux normal
Quand les proprits 'left' ou 'right' ont la valeur 'auto', leur valeur calcule devient '0'. Quand on spcifie la valeur
'auto' pour la proprit 'width', sa valeur calcule prend celle de la largeur intrinsque de l'lment. Si l'une des
proprits, 'marginleft' ou 'marginright', a la valeur 'auto', sa valeur calcule se dduit de l'quation. Et si
cellesci ont toutes les deux la valeur 'auto', leurs valeurs calcules sont gales
Quand les proprits 'width' et 'height' ont toutes deux la valeur spcifie 'auto', la valeur calcule de la premire
est gale la largeur intrinsque de l'lment. Si la valeur spcifie de 'width' est 'auto' et celle de 'height' une
autre valeur, alors la valeur calcule de 'width' est obtenue par l'opration (largeur intrinsque) * ( (hauteur
calcule) / (hauteur intrinsque) ).
91

10.3.5 Les lments flottants non remplacs
Quand les proprits 'left', 'right', 'width', 'marginleft' ou 'marginright' ont une valeur spcifie 'auto', leur valeur
calcule devient '0'.
10.3.6 Les lments flottants remplacs
Quand les proprits 'left', 'right', 'marginleft' ou 'marginright' ont une valeur spcifie 'auto', leur valeur
calcule devient '0'. Pour la proprit 'width' et une valeur spcifie 'auto', sa valeur calcule devient celle de la
largeur intrinsque de l'lment.
Quand les proprits 'width' et 'height' ont toutes deux une valeur spcifie 'auto', la valeur calcule de 'width'
devient celle de la largeur intrinsque de l'lment. Si la proprit 'height' a une valeur spcifie autre que 'auto', la
proprit 'width' ayant une valeur 'auto', la valeur calcule de 'width' est obtenue par l'opration (largeur
intrinsque) * ( (hauteur calcule) / (hauteur intrinsque) ).
10.3.7 Les lments non remplacs en position absolue
Les valeurs calcules de ces lments sont drmines selon cette quation :
'left' + 'marginleft' + 'borderleftwidth' + 'paddingleft' + 'width' + 'paddingright' +
'borderrightwidth' + 'marginright' + 'right' = largeur du bloc conteneur
Quand la valeur de la proprit 'borderstyle' est 'none', utiliser pour l'paisseur de la bordure la valeur '0'. Cette
quation se rsoud dans une succession de substitutions selon l'ordre suivant :
1. Si la proprit 'left' a la valeur spcifie 'auto' et la proprit 'direction' la valeur 'ltr', la valeur calcule de
'left' devient celle de la distance entre le bord gauche du bloc conteneur et le bord de la marge gauche
d'une bote hypothtique, celleci aurait t la premire bote de l'lment dont la proprit 'position'
aurait eu la valeur 'static'. Les agents utilisateurs tant libres d'valuer un emplacement probable de cette
bote, plutt que d'en calculer l'emplacement effectif. Cette valeur peut tre ngative si cette bote
hypothtique se trouve gauche du bord du bloc conteneur ;
2. Si la proprit 'right' a la valeur spcifie 'auto' et la proprit 'direction' la valeur 'rtl', la valeur calcule de
'right' devient celle de la distance entre le bord droit du bloc conteneur et le bord de la marge droite de la
bote hypothtique, de la mme manire que cidessus. Cette valeur peut tre ngative si cette bote se
trouve droite du bord du bloc conteneur ;
3. Si la proprit 'width' a la valeur spcifie 'auto', remplacer par '0' les valeurs 'auto' ventuelles des
proprits 'left' ou 'right' ;
4. Si les proprits'left', 'right' ou 'width' ont (encore) la valeur spcifie 'auto', remplacer par '0' les valeurs
'auto' ventuelles des proprits'marginleft' ou 'marginright' ;
5. Si, ce stade, les proprits 'marginleft' et 'marginright' ont toujours la valeur 'auto', rsoudre l'quation
avec la contrainte supplmentaire que ces deux marges doivent avoir la mme valeur ;
6. Si, ce stade, il ne reste plus qu'une seule valeur 'auto', rsoudre l'quation pour obtenir la valeur calcule
de cette proprit ;
7. Si, ce stade, les valeurs sont surcontraintes, ignorer la valeur spcifie pour la proprit 'left' (quand la
proprit 'direction' a la valeur 'rtl'), ou celle de 'right' (quand la proprit 'direction' a la valeur 'ltr'), puis
rsoudre l'quation pour en obtenir la valeur calcule.
10.3.8 Les lments remplacs en position absolue
Ce cas est similaire au prcdent, l'exception que l'lment a une largeur intrinsque. La succession des
substitutions tant maintenant :
1. Si les proprits 'width' et 'height' ont toutes deux la valeurs spcifi 'auto', la valeur calcule de 'width'
devient celle de la largeur intrinsque de l'lment. Pour 'width' ayant la valeur spcifie 'auto', et 'height'
une autre valeur, alors la valeur calcule de 'width' est le rsultat de l'opration (largeur intrinsque) * (
(hauteur calcule) / (hauteur intrinsque) ) ;
2. Si la proprit 'width' a la valeur spcifie 'auto', lui substituer la largeur intrinsque de l'lment ;
3. Si la proprit 'left' a la valeur 'auto' et la proprit 'direction' la valeur 'ltr', remplacer la valeur 'auto' par
celle de la distance entre le bord gauche du bloc conteneur et le bord de la marge gauche d'une bote
hypothtique, celleci aurait t la premire bote d'un lment dont la proprit 'position' aurait t
'static'. Les agents utilisateurs tant libres d'valuer un emplacement probable de cette bote, plutt que
d'en calculer l'emplacement effectif. Cette valeur peut tre ngative si cette bote hypothtique se trouve
gauche du bord du bloc conteneur ;
92

4. Si la proprit 'right' a la valeur 'auto' et la proprit 'direction' la valeur 'rtl', remplacer la valeur 'auto' par
celle de la distance entre le bord droite du bloc conteneur et le bord de la marge droite d'une bote
hypothtique, de la mme manire que cidessus. Cette valeur peut tre ngative si cette bote se trouve
droite du bord du bloc conteneur ;
5. Si les proprits 'left' ou 'right' ont la valeur 'auto', remplacer par '0' les valeurs 'auto' ventuelles des
proprits 'marginleft' ou 'marginright' ;
6. Si, ce stade, les proprits 'marginleft' et 'marginright' ont toutes deux la valeur 'auto', rsoudre
l'quation avec la contrainte supplmentaire que ces deux marges doivent avoir la mme valeur ;
de cette proprit ;
8. Si, ce stade, les valeurs sont surcontraintes, ignorer la valeur spcifie pour la proprit 'left' (quand la
proprit 'direction' a la valeur 'rtl'), ou celle de 'right' (quand la proprit 'direction' a la valeur 'ltr'), puis
10.4 Les largeurs minimales et maximales : 'minwidth' et 'maxwidth'

'minwidth'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<longueur> | <pourcentage> | inherit

selon l'agent utilisateur
tous les lments, sauf ceux de type enligne non remplacs et aux lments des tables
non
visuel
'maxwidth'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<longueur> | <pourcentage> | none | inherit

none
tous les lments, sauf ceux de type enligne non remplacs et aux lments des tables
non
visuel
Ces proprits permettent aux auteurs de restreindre les dimensions d'une bote dans certaines proportions. Les
significations des valeurs sont :
<longueur>
Spcifie une largeur calcule minimale ou maximale fixe ;
<pourcentage>
Spcifie un pourcentage pour dterminer la valeur calcule. Celuici est obtenu en fonction de la largeur
du bloc conteneur ;
none
Aucune limite sur la largeur de la bote (seulement pour 'maxwidth').
L'algorithme suivant dcrit l'action de ces deux proprits pour obtenir la valeur calcule de la proprit 'width' :
1. La largeur est calcule, sans l'intervention des proprits 'minwidth' et et 'maxwidth'), selon les rgles
dfinies plus haut dans "Le calcul des largeurs et des marges" ;
2. Si la valeur calcule de 'minwidth' est suprieure celle de 'maxwidth', la proprit 'maxwidth' prend
la valeur de 'minwidth' ;
3. Si la largeur calcule est suprieure la valeur de 'maxwidth', les rgles de calcul des largeurs et marges
sont rappliques, en utilisant cette fois la valeur de 'maxwidth' comme valeur spcifie pour la proprit
'width' ;
4. Si la largeur calcule est infrieure la valeur de 'minwidth', les mmes rgles sont rappliques, en
utilisant cette foisci la valeur de 'minwidth' comme valeur spcifie pour la proprit 'width'.
L'agent utilisateur peut dfinir une valeur minimum non ngative pour la proprit 'minwidth', celleci pouvant
varier d'un lment l'autre et pouvant mme dpendre d'autres proprits. Si la valeur de 'minwidth' descend en
dessous de cette limite, celleci tant spcifie explicitement ou ayant la valeur 'auto' et les rgles cidessous la
rendant ainsi trop petite, alors l'agent utilisateur peut considrer cette valeur limite comme tant la valeur calcule.
10.5 La hauteur du contenu : la proprit 'height'

'height'
Valeur :

93

Initiale :
S'applique
:
Hrite :
Pourcentage
:
Mdias :
auto
tous les lments, sauf ceux de type enligne non remplacs, et les colonnes et groupes de
colonnes des tables
non
voir plus loin
visuel
Cette proprit spcifie la hauteur du contenu des botes gnres par les lments de type bloc et ceux remplacs.
Celleci ne s'applique pas au lments de type enligne non remplacs. C'est la valeur (pouvant tre hrite) de
leur proprit 'lineheight' qui donne la hauteur des botes de ceuxci.
Les significations des valeurs sont :
<longueur>
Spcifie une hauteur fixe ;
<pourcentage>
Spcifie une hauteur en pourcentage. Celuici est calcul en fonction du bloc conteneur de la bote
gnre. Si la hauteur du bloc conteneur n'est pas spcifie explicitement (c..d., celleci dpendant de la
hauteur du contenu), sa valeur est considre comme tant 'auto' ;
auto
La hauteur dpend des valeurs des autres proprits. Voir les explications plus loin.
La proprit 'height' n'admet pas de valeur ngative.
Exemple(s) :
Par exemple, cette rgle fixe la hauteur des paragraphes 100 pixels :
P { height: 100px }
Les paragraphes qui requirent une hauteur suprieure 100px vont dborder selon la proprit 'overflow'.
10.6 Le calcul des hauteurs et des marges

Pour le calcul des valeurs des proprits 'top', 'margintop', 'height', 'marginbottom' et 'bottom', on doit effectuer
une distinction entre les diffrentes sortes de botes :
1. les lments de type enligne non remplacs
2. les lments de type enligne remplacs
3. les lments de type bloc non remplacs dans un flux normal
4. les lments de type bloc remplacs dans un flux normal
5. les lments flottants non remplacs
6. les lments flottants remplacs
7. les lments non remplacs en position absolue
8. les lments remplacs en position absolue
Les points 1 6 incluent le positionnement relatif.
10.6.1 Les lments de type enligne non remplacs
Quand les proprits 'top', 'bottom', 'margintop' ou 'marginbottom' ont la valeur spcifie 'auto', leur valeur
calcule devient '0'. La proprit 'height' ne s'applique pas. La hauteur de l'aire du contenu est gale la taille
effective de la police de l'lment. Les espacements, bordures et marges verticales d'une bote enligne non
remplace commencent en haut et en bas de la police, et non pas en haut et en bas de la ligne. Le calcul de la
hauteur de la bote de la ligne employant seulement la proprit 'lineheight'.
Si plusieurs tailles de polices sont utilises (cela peut arriver quand les glyphes proviennent de diffrentes
polices), la hauteur de l'aire du contenu n'est pas dfinie par cette spcification. On recommande nanmoins que la
plus grande taille de police soit retenue pour la dtermination de cette hauteur.
94

10.6.2 Les lments de types enligne et bloc remplacs dans un flux normal et lments
flottants remplacs
Quand les proprits 'top', 'bottom', 'margintop' ou 'marginbottom' ont la valeur spcifie 'auto', leur valeur
calcule devient '0'. Si les proprits 'width' et 'height' ont toutes deux la valeur spcifie 'auto', la valeur calcule
de 'width' prend celle de la largeur intrinsque de l'lment. Si la proprit 'width' a la valeur spcifie 'auto' et la
proprit 'height' une autre valeur, alors la valeur calcule de 'width' est obtenue par l'opration (largeur
intrinsque) * ( (hauteur calcule) / (hauteur intrinsque) ).
10.6.3 Les lments de type bloc non remplacs dans un flux normal et lments flottants non
remplacs
Quand les proprits 'top', 'bottom', 'margintop', ou 'marginbottom' ont la valeur spcifie 'auto', leur valeur
calcule devient '0'. Si la proprit 'height' a la valeur spcifie 'auto', la hauteur de l'lment dpend d'un ventuel
enfant de type bloc et des espacements et bordures de celuici.
Si l'lment a des enfants de type enligne, la hauteur de celuici est gale la distance entre le sommet de la
bote de ligne la plus leve et le bas de celle la plus basse.
Si l'lment a des enfants de type bloc, la hauteur de celuici est gale la distance entre la bordure du haut de la
bote d'un enfant la plus leve et la bordure du bas de celle d'un enfant la plus basse. Cependant, quand
l'espacement et/ou la bordure du haut de l'lment ne sont pas nuls, alors le contenu de l'lment commence
partir du bord de la marge haute de l'enfant le plus lev. Et, de faon similaire, le contenu finit au bord de la
marge basse de l'enfant le plus en bas.
Seuls les enfants dans un flux normal sont pris en compte (c..d. les botes des lments flottants et celles des
lments en position absolue sont ignores, les botes des lments en position relative sont considres sans leur
dcalage). Noter que la bote de l'enfant peut tre anonyme.
10.6.4 Les lments non remplacs en position absolue
Pour les lments en position absolue, les dimensions verticales doivent vrifier cette quation :
'top' + 'margintop' + 'bordertopwidth' + 'paddingtop' + 'height' + 'paddingbottom' +
'borderbottomwidth' + 'marginbottom' + 'bottom' = hauteur du bloc conteneur.
Quand la valeur de la proprit 'borderstyle' est 'none', utiliser pour l'paisseur de la bordure la valeur '0'. Cette
quation se rsoud dans une succession de substitutions selon l'ordre suivant :
1. Si la proprit 'top' a la valeur spcifie 'auto', la remplacer par la distance entre le bord haut du bloc
conteneur et le bord de la marge haute d'une bote hypothtique, cellci aurait t la premire bote de
l'lment dont la proprit 'position' aurait eu la valeur 'static'. Les agents utilisateurs tant libres d'valuer
un emplacement probable de cette bote, plutt que d'en calculer l'emplacement effectif. Cette valeur peut
tre ngative si cette bote hypothtique se trouve audessus du bord du bloc conteneur ;
2. Si les proprits 'height' et 'bottom' ont toutes deux la valeur spcifie 'auto', remplacer celle de 'bottom'
par '0' ;
3. Si les proprits 'bottom' ou 'height' ont toujours la valeur 'auto', remplacer par '0' les valeurs 'auto'
ventuelles des proprits 'margintop' ou 'marginbottom' ;
4. Si, ce stade, les proprits 'margintop' et 'marginbottom' ont toujours la valeur 'auto', rsoudre
de cette proprit ;
6. Si, ce stade, les valeurs sont surcontraintes, ignorer la valeur spcifie pour la proprit 'bottom' et
10.6.5 Les lments remplacs en position absolue
Ce cas est similaire au prcdent, l'exception que l'lment a une hauteur intrinsque. La succession des
substitutions tant maintenant :
1. Si la proprit 'height' a la valeur spcifie 'auto', lui substituer la hauteur intrinsque de l'lment ;
2. Si la proprit 'top' a la valeur spcifie 'auto', la remplacer par la distance entre le bord haut du bloc
conteneur et le bord de la marge haute d'une bote hypothtique, cellci aurait t la premire bote de
l'lment dont la proprit 'position' aurait eu la valeur 'static'. Les agents utilisateurs tant libres d'valuer
un emplacement probable de cette bote, plutt que d'en calculer l'emplacement effectif. Cette valeur peut
95

tre ngative si cette bote hypothtique se trouve audessus du bord du bloc conteneur ;
3. Si la proprit 'bottom' a la valeur 'auto', remplacer par '0' les valeurs 'auto' ventuelles des proprits
'margintop' ou 'marginbottom' ;
4. Si, ce stade, les proprits 'margintop' et 'marginbottom' ont toujours la valeur 'auto', rsoudre
de cette proprit ;
6. Si, ce stade, les valeurs sont surcontraintes, ignorer la valeur spcifie pour la proprit 'bottom' et
10.7 Les hauteurs minimales et maximales : 'minheight' et 'maxheight'

Il est parfois utile de restreindre la hauteur d'un lment dans certaines proportions. Deux proprits offrent cette
fonctionnalit :
'minheight'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

0
tous les lments, sauf ceux de type enligne non remplacs et les lments des tables
non
visuel
'maxheight'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

none
tous les lments, sauf ceux de type enligne non remplacs et les lments des tables
non
visuel
Ces deux proprits permettent aux auteurs de restreindre les hauteurs des botes dans certaines proportions. Les
<longueur>
Spcifie une hauteur calcule minimale ou maximale fixe ;
<pourcentage>
Spcifie un pourcentage pour dterminer la valeur calcule. Celuici est obtenu en fonction de la hauteur
du bloc conteneur. Si la hauteur du bloc conteneur n'est pas spcifie explicitement (c..d. celleci
dpendant de la hauteur du contenu), sa valeur est considre comme tant 'auto' ;
none
Aucune limite sur la hauteur de la bote (seulement pour 'maxheight').
L'algorithme suivant dcrit l'action de ces deux proprits pour obtenir la valeur calcule de la proprit 'height' :
1. La hauteur est calcule, sans l'intervention des proprits ('minheight' et 'maxheight'), selon les rgles
dfinies plus haut dans "Le calcul des hauteurs et des marges" ;
2. Si la valeur calcule de 'minheight' est suprieure celle de 'maxheight', la proprit 'maxheight'
prend la valeur de 'minheight' ;
3. Si la hauteur calcule est suprieure la valeur de 'maxheight', les rgles de calcul des hauteurs et
marges sont rappliques, en utilisant cette fois la valeur de 'maxheight' comme valeur spcifie pour la
proprit 'height' ;
4. Si la hauteur calcule est infrieure la valeur de 'minheight', les mmes rgles sont rappliques, en
utilisant cette foisci la valeur de 'minheight' comme valeur spcifie pour la proprit 'height'.
10.8 Le calcul de la hauteur de ligne : les proprits 'lineheight' et

'verticalalign'
Comme dcrit dans le passage traitant des contextes de mise en forme enligne, les agents utilisateurs rangent les
botes enligne dans des botes de ligne, les empilant les unes sur les autres. On dtermine la hauteur de ces botes
de ligne ainsi :
1. On calcule la hauteur de chaque bote enligne contenues dans la bote de ligne (voir "Le calcul des
hauteurs et des marges" ainsi que la proprit 'lineheight') ;
96

2. Puis on aligne ces boites enligne verticalement en fonction de la valeur de leur proprit 'verticalalign'
;
3. La hauteur de la bote de ligne correspond la distance entre le haut de la bote la plus leve et le bas de
celle la plus basse.
Les lments enligne vides engendrent des botes enligne vide, mais ces dernires ont quand mme des marges,
des espacements, des bordures et une hauteur de ligne, et donc, elles influencent ces calculs tout comme les
lment avec un contenu.
Noter que, quand toutes les botes, dans la bote de ligne, sont alignes sur leurs bas, la bote de ligne aura
exactement la hauteur de celle qui a la plus grande hauteur. Cependant, quand cellesci sont alignes sur une ligne
de base commune, le haut et le bas de la bote de ligne peuvent ne pas concider avec ceux de la bote de plus
grande hauteur.
10.8.1 L'interlignage et le demiinterlignage
La hauteur d'une bote de ligne pouvant diffrer de celle de la taille de police du texte contenu dans une bote (ex.
'lineheight' > 1em), il peut y avoir un espace audessus et endessous des glyphes ainsi rendus. On appelle cette
diffrence, entre la taille de la police et la valeur calcule pour la proprit 'lineheight', l'interlignage, et la moiti
de celleci, le demiinterlignage.
Les agents utilisateurs centrent verticalement les glyphes dans une bote enligne, ajoutant un demiinterlignage
audessus et endessous de ceuxci. Par exemple, un extrait de texte dont la hauteur est de '12pt' et la valeur de la
proprit 'lineheight' est '14pt', il serait ajout un espace supplmentaire de 2pts, rpartis en 1pt audessus et 1pt
audessous des lettres. Ceci concerne aussi les botes vides, cellesci se comportant comme si elles contenaient
des lettres infiniment rduites.
Quand la valeur de la proprit 'lineheight' est infrieure la taille de la police, la hauteur finale de la bote
enligne sera infrieure la taille de la police et l'affichage des glyphes "dbordera" de la bote de ligne. Si une
telle bote enligne touche le bord de la bote de ligne, l'affichage "dbordera" aussi dans la bote de ligne
adjacente.
Bien que les marges, bordures et espacements des lments non remplacs n'interviennent pas dans le calcul de la
hauteur de la bote enligne (et ainsi dans celui de la bote de ligne), ceuxci sont quand mme rendus autour de
la bote de ligne. En consquence, si la hauteur de la bote de ligne est infrieure celle comprise entre les bords
externes des botes qui y sont contenues, les arrireplans et les couleurs des espacements peuvent "dborder"
dans les botes de ligne adjacentes. Cependant, certains agents utilisateurs peuvent utiliser la bote de ligne pour
"dcouper" les aires de bordure et d'espacement (et ne pas les rendre).
'lineheight'
Valeur :
Initiale :
S'applique :
Hrite :
Percentages:
Mdias :
normal | <nombre> | <longueur> | <pourcentage> | inherit

normal
tous les lments
oui
se rapporte la taille de la police de l'lment luimme
visuel
Quand on applique cette proprit un lment de type bloc dont le contenu est compos d'lments de type
enligne, celleci spcifie la hauteur minimale de chacune des botes enligne gnres. Cette hauteur minimale
se dcompoe en une hauteur minimale audessus de la ligne de base de l'lment de type bloc et en une
profondeur minimale audessous de celuici, exactement comme si chacune des botes de ligne commenait par
une bote enligne de largeur nulle, celleci ayant les valeurs des proprits de police et de hauteur de ligne de
l'lment de type bloc (ce que TEX appelle un "tai").
Quand on l'applique un lment de type enligne, celleci spcifie la hauteur exacte de chacune des botes
gnres par l'lment. Sauf dans le cas des lments de type enligne remplacs, o la hauteur de la bote est
donne par la proprit 'height'.
Les significations des valeurs pour cette proprit sont :
normal
Indique aux agents utilisateurs une valeur calcule "raisonnable", base sur la taille de la police de
l'lment. Cette valeur revt la mme signification que <number>. On recommande pour 'normal' une
valeur calcule entre 1.0 et 1.2 ;
<longueur>
97

Cette longueur est applique la hauteur de la bote. Les valeurs ngatives ne sont pas admises ;
<nombre>
La valeur calcule de la proprit est obtenue en multipliant ce nombre par la taille de la police de
l'lment. Les valeurs ngatives ne sont pas admises. Cependant, ce nombre est hrit, et non la valeur
calcule ;
<pourcentage>
La valeur calcule de la proprit correspond ce pourcentage multiplie par la valeur calcule pour la
taille de la police. Les valeurs ngatives ne sont pas admises.
Exemple(s) :
Les trois rgles suivantes produisent une mme hauteur de ligne :
DIV { lineheight: 1.2; fontsize: 10pt }
DIV { lineheight: 1.2em; fontsize: 10pt }
DIV { lineheight: 120%; fontsize: 10pt }
/* nombre */
/* longueur */
/* pourcentage */
Quand un lment contient du texte dont l'affichage requiert plusieurs polices, les agents utilisateurs devraient en
dterminer la valeur pour la proprit 'lineheight' en fonction de celle qui a la plus grande taille.
Gnralement, quand la proprit 'lineheight' a une seule valeur pour toutes les botes enligne d'un paragraphe
(sans images trop hautes), la recommandation prcdente devrait faire que les lignes de base des lignes
successives soient indpendantes de la hauteur de ligne. Ceci est important quand on doit aligner des colonnes de
texte dans diffrentes polices, par exemple dans une table.
Noter que les lments remplacs ont une proprit 'fontsize' et une proprit 'lineheight', mme si on ne les
utilise pas directement dans la dtermination de la hauteur de la bote : les valeurs exprimes en 'em' et en 'ex' sont
relatives celle de la proprit 'fontsize', et les valeurs en pourcentage de la proprit 'verticalalign', relatives
celle de la proprit 'lineheight'.
'verticalalign'
Valeur :
Initiale :
S'applique
:
Hrite :
Pourcentage
:
Mdias :
baseline | sub | super | top | texttop | middle | bottom | textbottom | <pourcentage> |

<longueur> | inherit
baseline
ceux des lments de type enligne et l'lment 'tablecell'
non
se rapporte la valeur de la proprit 'lineheight' de l'lment luimme
visuel
Cette proprit agit sur le positionnement vertical l'intrieur de la bote de ligne des botes gnres par un
lment de type enligne. Les rgles suivantes n'ont de sens que par rapport un lment parent de type enligne,
ou de type bloc si celuici gnre des botes enligne anonymes ; elles sont inoprantes autrement.
Note : la signification des valeurs pour cette proprit est lgrement diffrente dans le contexte des tables.
Consulter le chapitre traitant des algorithmes pour la hauteur des tables pour le dtail.
baseline
Aligne la ligne de base d'une bote avec celle de son parent. Si la bote en est dpourvue, aligner le bas de
celleci avec la ligne de base de son parent ;
middle
Aligne le milieu vertical de la bote avec la ligne de base de la bote de son parent, ce milieu tant
augment de la moiti de la valeur de la proprit 'xheight' du parent ;
sub
Abaisse la ligne de base de la bote la position approprie pour une criture en indice dans la bote du
parent. Cette valeur n'a pas d'effet sur la taille de la police de texte de l'lment ;
super
lve la ligne de base de la bote la position approprie pour une criture en exposant dans la bote du
parent. Cette valeur n'a pas d'effet sur la taille de la police de texte de l'lment ;
texttop
Aligne le haut de la bote avec le haut du texte de l'lment parent ;
textbottom
Aligne le bas de la bote avec le bas du texte de l'lment parent ;
<pourcentage>
98

lve (pour une valeur positive) ou abaisse (pour une valeur ngative) la bote de ce pourcentage (qui se
rapporte la valeur de la proprit 'lineheight'). La valeur '0%' signifie la mme chose que 'baseline' ;
<longueur>
lve (pour une valeur positive) ou abaisse (pour une valeur ngative) la bote de cette quantit. La valeur
'0cm' signifie la mme chose que 'baseline'.
Ces dernires valeurs se rapportent la bote de ligne dans laquelle survient la bote gnre :
top
Aligne le haut de la bote avec le haut de la bote de ligne ;
bottom
Aligne le bas de la bote avec le bas de la bote de ligne.
99
11 Les effets visuels

11.1 Le dbordement et le rognage
Gnralement, le contenu d'une bote de bloc est confin entre les bords du contenu de celleci. Parfois, une bote
peut dborder, son contenu s'talant en partie ou entirement en dehors de la bote. Des exemples :
Une ligne ne peut pas tre coupe, ce qui rend ainsi la bote de ligne plus large que la bote du bloc ;
Une bote de bloc est trop large pour le bloc conteneur. Ceci peut arriver quand la proprit 'width' d'un
lment a une valeur telle que la bote de bloc gnre se rpand audel des cts du bloc conteneur ;
La hauteur d'un lment excde la hauteur explicite assigne au bloc conteneur (c..d. la hauteur de
celuici est dtermine par la proprit 'height', et non par la hauteur du contenu) ;
La bote d'un descendant en position absolue se trouve en partie hors de la bote de son parent ;
Les marges de la bote d'un descendant sont ngatives, ce qui dplace celleci en partie hors de la bote de
son parent.
chaque fois qu'un dbordement survient, c'est la proprit 'overflow' qui spcifie , s'il y a lieu, la faon dont la
bote sera rogne. La proprit 'clip' spcifie la taille et la forme de la zone rogne. Quand on spcifie un rognage
laissant une petite surface, des contenus qui seraient visibles autrement peuvent disparatre.
11.1.1 Le dbordement : la proprit 'overflow'
'overflow'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
visible | hidden | scroll | auto | inherit

visible
ceux des lments de type bloc et ceux remplacs
non
sans objet
visuel
Cette proprit spcifie si le contenu d'un lment de type bloc doit tre rogn quand celuici dborde de la bote
de cet lment (qui se comporte comme un bloc conteneur). Les significations des valeurs sont :
visible
Le contenu ne sera pas rogn, et celuici peut tre reprsent hors de la bote du bloc ;
hidden
Le contenu sera rogn et aucun mcanisme de dfilement ne devrait tre fourni pour voir la partie qui aura
t rogne. On spcifie la taille et la forme du reliquat du rognage avec la proprit 'clip' ;
scroll
Le contenu sera rogn et, si disponible, l'agent utilisateur fournit un mcanisme de dfilement visible
l'cran (tel qu'une barre de dfilement ou un dispositif panoramique), celuici devrait apparatre pour une
bote donne, que le contenu de celleci soit rogn ou non. Ceci pour viter l'inconvnient que
reprsenterait des barres de dfinalement apparaissant et disparaissant dans un environnement dynamique.
Quand cette valeur est spcifie conjointement avec un type de mdia 'print, la partie du contenu ayant
dborde devrait aussi tre imprime ;
auto
L'interprtation de cette valeur dpend de l'agent utilisateur, cependant, celuici devrait fournir un
mcanisme de dfilement quand les botes dbordent.
Mme quand la valeur de la proprit 'overflow' est 'visible', il peut arriver que le contenu soit rogn par le
systme d'exploitation, pour tenir dans la fentre du document de l'agent utilisateur.
Exemple(s) :
Considrons le bloc de citation suivant (BLOCKQUOTE), trop grand pour tenir dans son bloc conteneur (tabli
par un lment DIV). En voici le document source :
<DIV>
<BLOCKQUOTE>
<P>Je n'aimais pas la pice, et puis, je la vis
dans des conditions adverses le rideau tait lev.
<DIV class="attributedto"> Groucho Marx</DIV>
</BLOCKQUOTE>
100

</DIV>
Et ici, la feuille de style rgissant les tailles et le style des botes gnres :
DIV { width : 100px; height: 100px;
border: thin solid red;
}
BLOCKQUOTE
{ width : 125px; height : 100px;
margintop: 50px; marginleft: 50px;
border: thin dashed black
}
DIV.attributedto { textalign : right; border: none; }
La proprit 'overflow' ayant la valeur initiale 'visible', l'lment BLOCKQUOTE ne sera pas rogn lors de sa
mise en forme, donnant quelque chose comme ceci :
Si, par ailleurs, on donne la valeur 'hidden' la proprit 'overflow' de l'lment DIV, l'lment BLOCKQUOTE
sera rogn par le bloc conteneur, ainsi :
La valeur 'scroll' aurait signifi, ceux des agents utilisateurs l'implmentant, de faire apparatre un mcanisme de
dfilement pour que les utilisateurs puissent accder au contenu de la partie ayant t rogne.
11.1.2 Le rognage : la proprit 'clip'
Une zone de rognage dfinit la partie du contenu rendu d'un lment qui est visible. Par dfaut, la zone de
rognage a la mme taille et forme que la bote, ou les botes, de l'lment. Cependant, celleci peut tre modifie
l'aide de la proprit 'clip'.
'clip'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<forme> | auto | inherit

auto
ceux des lments de type bloc et ceux remplacs
non
sans objet
visuel
La proprit 'clip' s'applique aux lments dont la valeur de la proprit 'overflow' est autre que 'visible'. Les
auto
La zone de rognage a la mme taille et emplacement que la bote, ou les botes, de l'lment ;
<forme>
En CSS2, la seule valeur admise pour <forme> est : rect (<haut>, <droite>, <bas>, <gauche>) o <haut>,
<droite>, <bas> et <gauche> reprsentent les dcalages par rapport aux cts respectifs de la bote.
101

Les valeurs <haut>, <droite>, <bas>, et <gauche> peuvent tre une valeur de <longueur> ou bien 'auto'.
Les valeurs ngatives sont admises. La valeur 'auto' fait correspondre un bord donn de la zone de
rognage celui de la bote gnre par l'lment (c..d. la valeur 'auto' a la mme signification que '0').
Avec des coordonnes ayant des valeurs en pixels, il faudrait faire attention ce qu'aucuns pixels ne
restent visibles quand la somme de <gauche> et <droite> est gale la largeur de l'lment (et de mme,
pour la somme de <haut> et <bas> avec la hauteur de l'lment), et inversement, ce qu'aucuns pixels ne
restent cachs quand leurs sommes sont nulles.
Les anctres de l'lment peuvent aussi avoir des zones de rognage (quand leur proprit 'overflow' n'a pas la
valeur 'visible' ; c'est l'intersection des diverses zones de rognage qui est rendue.
Si la zone de rognage excde les limites de la fentre du document de l'agent utilisateur, son contenu peut se
trouver rogner par la fentre, en fonction du systme d'exploitation.
Exemple(s) :
Ces deux rgles :
P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, 5px, 10px, 5px); }
cellesci vont crer les zones de rognage rectangulaires, matrialises par les lignes en pointills dans leurs
illustrations respectives suivantes :
Note En CSS2, toutes les zones de rognage sont rectangulaires. Il faut s'attendre ce que les volutions
ultrieures autorisent des formes qui ne soient pas rectangulaires.
11.2 La visibilit : la proprit 'visibility'

'visibility'
Valeur :
Initiale :
S'applique :
102
visible | hidden | collapse | inherit

visible
tous les lments

Hrite :
Pourcentage :
Mdias :
oui
sans objet
visuel
La proprit 'visibility' spcifie le rendu, ou non, des botes gnres par un lment donn. Ces botes, bien
qu'invisibles, influencent toujours la mise en forme du document (utiliser la proprit 'display' avec la valeur
'none' pour prohiber la gnration d'une bote, et ainsi toutes influences sur la mise en forme). Les valeurs ont les
significations suivantes :
visible
La bote gnre est visible ;
hidden
La bote gnre est invisible (entirement transparente), mais celleci influenant toujours la mise en
forme ;
collapse
Consulter le passage traitant des effets dynamiques sur les ranges et colonnes des tables. Quand on
l'utilise avec autre chose, cette valeur 'collapse' correspond 'hidden'.
On peut employer cette proprit conjointement avec des scripts pour crer des effets dynamiques.
Dans l'exemple suivant, quand on presse l'un ou l'autre bouton du formulaire, un script actionn par un utilisateur
provoque l'apparition de la bote qui lui correspond et, en mme temps, la disparition de l'autre. Ces botes
conservant leur taille et leur emplacement, l'effet produit le remplacement de l'une par l'autre (le script, crit dans
un langage hypothtique, pouvant, ou non, produire un effet avec un agent utilisateur conforme).
<HTML>
<HEAD>
<!
#conteneur1 { position: absolute;
top: 2in; left: 2in; width: 2in }
#conteneur2 { position: absolute;
top: 2in; left: 2in; width: 2in;
visibility: hidden; }
>
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="conteneur1">
<IMG alt="Al Capone"
width="100" height="100"
src="suspect1.jpg">
<P>Nom : Al Capone</P>
<P>Rsidence : Chicago</P>
</DIV>
<DIV id="conteneur2">
<IMG alt="Lucky Luciano"
width="100" height="100"
src="suspect2.jpg">
<P>Nom : Lucky Luciano</P>
<P>Rsidence : New York</P>
</DIV>
<FORM method="post"
action="http://www.suspect.org/processbums">
<P>
<INPUT name="Capone" type="button"
value="Capone"
onclick='show("conteneur1");hide("conteneur2")'>
<INPUT name="Luciano" type="button"
value="Luciano"
onclick='show("conteneur2");hide("conteneur1")'>
</FORM>
</BODY>
</HTML>
103
12 Le contenu gnr, le numrotage automatique et les listes

Dans certains cas, les auteurs peuvent souhaiter que les agents utilisateurs puissent reprsenter un contenu qui
n'apparat pas dans l'arborescence du document. Une liste numrote en est une illustration familire, o l'auteur
ne veut pas avoir fournir la liste des numros explicitement, prfrant laisser l'agent utilisateur les gnrer
automatiquement. De faon similaire, l'auteur peut vouloir que le mot "Illustration" soit insr avant la lgende
d'une illustration, ou encore, "Chapitre 7" avant le titre du septime chapitre. Les agents utilisateurs, notamment
pour des appareils audio ou braille, devraient tre capables d'effectuer ce genre d'opration.
En CSS2, plusieurs mcanismes peuvent gnrer un contenu :
La proprit 'content' conjointement avec les pseudolments :before et :after ;
Les proprits auditives 'cuebefore' et 'cueafter' (voir le chapitre sur les feuilles de style auditives).
Quand on utilise la proprit 'content' en combinaison avec ces proprits auditives, l'interprtation se fait
dans cet ordre : :before, 'cuebefore', ('pausebefore'), le contenu de l'lment en question, ('pauseafter'),
'cueafter' et :after ;
Les lments dont la valeur de la proprit 'display' est 'listitem'.
On dcrit plus loin le mcanisme associ la proprit 'content'.
12.1 Les pseudolments :before et :after

L'auteur spcifie le style et l'emplacement d'un contenu gnr au moyen des pseudolments :before et :after.
Comme leurs noms l'indiquent, ceuxci prcisent l'emplacement du contenu avant ou aprs celui d'un lment de
l'arborescence du document. La proprit 'content', utilise en conjonction avec eux, spcifie la nature de ce qui
est insr.
Exemple(s) :
Par exemple, cette rgle insre la chane "Note : " avant le contenu de chacun des lments P dont l'attribut "class"
a la valeur "note" :
P.note:before { content: "Note : " }
Les objets de mise en forme (ex. les botes) gnrs par un lment comprennent galement le contenu gnr.
Ainsi, en changeant la feuille de style prcdente pour :
P.note:before { content: "Note : " }
P.note
{ border: solid green }
ceci produirait une bordure verte en trait plein autour du paragraphe, y compris la chane rajoute.
Les pseudolments :before et :after hritent de chacune des proprits, celles qui sont transmissibles, de
l'lment de l'arborescence du document auquel ceuxci se rattachent.
Exemple(s) :
Par exemple, les rgles suivantes insrent un guillemet ouvrant avant chacun des lments Q. Ce guillemet aura
une couleur rouge et sa police sera la mme que celle employe ailleurs dans ces lments :
Q:before {
content: openquote;
color: red
}
Dans les dclarations avec les pseudolments :before ou :after, les proprits non hrites prennent leur valeur
initiale.
Exemple(s) :
Ainsi, dans l'exemple prcdent, la valeur initiale de la proprit 'display' tant 'inline', le guillemet s'inscrit dans
une bote enligne (c..d. celleci se trouve sur la mme ligne que le texte initial de lment). Dans celui qui suit,
la proprit 'display' a la valeur explicite 'block', le texte en insertion s'inscrit dans une bote de bloc :
104

BODY:after {
content: "Fin";
display: block;
margintop: 2em;
textalign: center;
}
Noter qu'un agent utilisateur auditif synthtiserait le mot "Fin" aprs avoir rendu tout le contenu de l'lment
BODY.
Les agents utilisateurs doivent ignorer les proprits suivantes avec les pseudolments :before et :after : les
proprits 'position', 'float', celles des listes et celles des tables.
Les pseudolments :before et :after admettent certaines valeurs en conjonction avec la proprit 'display' :
Si le sujet du slecteur est un lment de type bloc, les valeurs admises sont 'none', 'inline', 'block' et
'marker'. Pour toute autre valeur de la proprit 'display', le pseudolment se comporte comme si la
valeur tait 'block' ;
Si le sujet du slecteur est un lment de type enligne, les valeurs admises sont 'none' et 'inline'. Pour
toute autre valeur de la proprit 'display', le pseudolment se comporte comme si la valeur tait 'inline'.
Note : D'autres valeurs pourraient tre admises dans les versions ultrieures de CSS.
12.2 La proprit 'content'

'content'
Valeur :
Initiale :
S'applique
:
Hrite :
Pourcentage
:
Mdias :
[ <chane> | <uri> | <compteur> | attr(X) | openquote | closequote | noopenquote |

noclosequote ]+ | inherit
chane vide
ceux des lments avec 'display : marker' et les pseudolments :before et :after
non
sans objet
tous
Cette proprit est utilise en conjonction avec les pseudolments :before et :after pour gnrer un contenu dans
un document. Ces pseudolments admettent les valeurs suivantes pour la proprit 'display' :
Si le sujet du slecteur est un lment de type bloc, les valeurs admises sont 'none', 'inline', 'block' et
'marker'. Pour toute autre valeur de la proprit 'display', le pseudolment se comporte comme si la
valeur tait 'block' ;
Si le sujet du slecteur est un lment de type enligne, les valeurs admises sont 'none' et 'inline'. Pour
toute autre valeur de la proprit 'display', le pseudolment se comporte comme si la valeur tait 'inline'.
<chane>
Un contenu de texte (voir le chapitre sur les chanes) ;
<uri>
La valeur est un URI qui pointe sur une ressource externe. Si un agent utilisateur ne reconnat pas cette
ressource, cette dernire ne correspondant pas aux types de mdia que celuici reconnat, alors il doit
l'ignorer. Note : CSS2 ne propose pas de mcanismes pour modifier la taille de l'objet dsign, ou pour en
fournir une description textuelle, comme les attributs "alt" ou "longdesc" pour les images en HTML. Ceci
pourrait changer dans les versions ultrieures de CSS.
<compteur>
On peut spcifier des compteurs l'aide de deux fonctions : 'counters()' ou 'counter()'. La premire peut se
prsenter sous deux formes : 'counters(nom)' ou 'counters(nom, style)'. Le texte gnr correspond la
valeur du compteur nomm cet endroit de la structure de mise en forme, et son style, celui indiqu (par
dfaut, c'est 'decimal'). La deuxime prend aussi deux formes : 'counter(nom, chane)' ou 'counter(nom,
chane, style)'. Le texte gnr correspond la valeur de tous les compteurs, qui ont ce nom dans la
structure de mise en forme. Les compteurs prennent le style indiqu (par dfaut, 'decimal'). Voir le
passage traitant des compteurs et du numrotage automatiques pour plus d'informations ;
openquote et closequote
Ces valeurs sont remplaces par les chanes appropries, cellesci tant indiques par la proprit 'quotes'
;
105

noopenquote et noclosequote
Rien n'est insr (sinon la chane vide), mais le niveau d'imbrication des citations est incrment (ou
dcrment) ;
attr(X)
Cette fonction retourne, sous forme de chane, la valeur de l'attribut X du sujet du slecteur. Cette chane
n'est pas parcourue par l'interprteur CSS. Au cas o le sujet du slecteur n'a pas d'attribut X, il est
retourn une chane vide. La sensibilit la casse du nom des attributs dpend du langage du document.
Note : En CSS2, il n'est pas possible de se rfrer aux valeurs d'attribut d'autres lments du slecteur.
La proprit 'display' contrle le placement du contenu dans une bote de bloc, enligne ou de marqueur.
Les auteurs devraient placer les dclarations de la proprit 'content' dans des rgles @media quand le contenu
dpend du type du mdia. Par exemple, un texte littral peut convenir tous les types de mdias, mais les images
seulement aux groupes de mdias visuel et bitmap, et les fichiers de sons seulement au groupe de mdia auditif.
Exemple(s) :
Cette rgle fait jouer un fichier son la fin d'une citation (voir le chapitre sur les feuilles de style auditives pour
d'autres mcanismes) :
@media aural {
BLOCKQUOTE:after { content: url("beautifulmusic.wav") }
}
Exemple(s) :
La rgle suivante insre le texte de l'attribut HTML "alt" avant l'image. Si l'image n'est pas affiche, le lecteur
verra quand mme ce texte :
IMG:before { content: attr(alt) }
Les auteurs peuvent produire des retours la ligne dans le contenu gnr en crivant la squence d'chappement
"\A" dans l'une des chanes aprs la proprit 'content'. Ceci insre un retour la ligne forc, semblable
l'lment BR en HTML. Voir les chapitres "Les chanes" et "Les caractres et la casse" pour informations.
Exemple(s) :
H1:before {
display: block;
textalign: center;
content: "chapter\A hoofdstuk\A chapitre"
}
Le contenu gnr n'altre pas l'arborescence du document. Et, en particulier, celuici n'est pas rintroduit dans le
processeur du langage du document (par exemple pour y tre reinterprt).
Note : Dans des versions ultrieures, la proprit 'content' pourrait accepter d'autres valeurs, qui lui permettrait
de modifier le style de certaines parties du contenu gnr, en CSS2, l'ensemble du contenu des pseudolments
:before et :after recevant le mme style.
12.3 L'interaction de :before et :after avec les lments ayant les valeurs
'compact' et 'runin'
Les cas suivants peuvent survenir :
1. Un lment 'runin' ou 'compact' a un pseudolment :before de type enligne : le pseudolment
est pris en compte au moment o la taille de la bote de l'lment est calcule (pour 'compact'), puis est
rendu dans la mme bote de bloc que l'lment ;
2. Un lment 'runin' ou 'compact' a un pseudolment :after de type enligne : mme chose que pour
le point prcdent ;
3. Un lment 'runin' ou 'compact' a un pseudolment :before de type bloc : le pseudolment est
mis en forme en tant que bloc audessus de l'lment et n'est pas considr lors du calcul de la taille de
l'lment (pour 'compact') ;
4. Un lment 'runin' ou 'compact' a un pseudolment :after de type bloc : l'lment et son
pseudolment :after sont tous deux mis en forme en tant que botes de bloc. L'lment n'est pas format
comme une bote enligne l'intrieur de son propre pseudolment :after ;
106

5. L'lment qui suit un lment 'runin' ou 'compact' a un pseudolment :before de type bloc : la mise
en forme de l'lment 'runin', ou 'compact', dpend de la bote de bloc rsultante du pseudolment
:before ;
6. L'lment qui suit un lment 'runin' ou 'compact' a un pseudolment :before de type enligne : la
mise en forme de l'lment 'runin', ou 'compact', dpend de la valeur de la proprit 'display' de l'lment
auquel le pseudolment :before est attach.
Exemple(s) :
Voici un exemple de titre en enfilade [ndt. runin] avec un pseudolment :after, suivi par un paragraphe avec
un pseudolment :before. Les pseudolments sont tous de type enligne (par dfaut). Soit cette feuille de
style :
H3 { display: runin }
H3:after { content: " : " }
P:before { content: "... " }
quand on l'applique ce document source :

<H3>Les Centaures</H3>
<P>ont des sabots
<P>ont une queue
Une mise en forme visuelle en serait :

Les Centaures : ... ont des sabots
... ont une queue
12.4 Les guillemets

En CSS2, les auteurs peuvent demander aux agents utilisateurs de reprsenter les marques de citation, en fonction
du style et du contexte. La proprit 'quotes' spcifie des paires de guillemets pour chaque niveau d'imbrication
des citations. C'est la proprit 'content' qui permet la mise en uvre de ces marques, en les insrant avant ou
aprs les citations.
12.4.1 Spcifier des guillemets avec la proprit 'quotes'
'quotes'
Valeur :
Initiale :
S'applique :
Hrite :
Percentages:
Mdias :
[<chane> <chane>]+ | none | inherit

propre l'agent utilisateur
tous les lments
oui
N/A
visuel
Cette proprit spcifie des guillemets, quel que soit le nombre de citations imbriques. Les significations des
valeurs sont :
none
Les valeurs 'openquote' et 'closequote' de la proprit 'content' ne produisent pas de guillemets ;
[<chane> <chane>]+
Les valeurs 'openquote' et 'closequote' de la proprit 'content' sont tires de cette liste de paires de
guillemets (ouvrants et fermants). La premire paire (celle la plus gauche) correspond au niveau de
citation le plus extrieur, la deuxime paire, le premier niveau d'imbrication, etc. L'agent utilisateur doit
appliquer la paire de guillemets approprie en fonction du niveau d'imbrication.
Exemple(s) :
Par exemple, la feuille de style suivante :
/* Spcifie des paires de guillemets sur deux niveaux et pour deux langues */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "" "" "<" ">" }
/* Ins des guillemets avant et aprs le contenu d'un lment Q */
Q:before { content: openquote }
Q:after { content: closequote }
107

celleci applique cet extrait, en anglais :
<HTML lang="en">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Quote me!</Q>
</BODY>
</HTML>
un agent utilisateur pourrait le rendre ainsi :

"Quote me!"
alors que pour cet extraitci, en norvgien :

<HTML lang="no">
<HEAD>
<TITLE>Citations</TITLE>
</HEAD>
<BODY>
<P><Q>Trndere grter nr <Q>Vinsjan p kaia</Q> blir deklamert.</Q>
</BODY>
</HTML>
l'agent utilisateur donnerait :

Trndere grter nr <Vinsjan p kaia> blir deklamert.
Note : Dans l'exemple prcdent, bien que les guillemets dsigns par la proprit 'quotes' se trouvent facilement
sur un clavier, une typographie de meilleure qualit demanderait des caractres supplmentaires. Le tableau
informatif ciaprs donne une liste de quelques marques de citation issus de ISO 10646 :
Aspect approximatif
"
'
<
>
Code ISO 10646

(hexadcimal)
0022
0027
2039
203A
Description
MARQUE DE CITATION [le guillemet double en ASCII]

APOSTROPHE [le guillemet simple en ASCII]
MARQUE DE CITATION CHEVRON SIMPLE GAUCHE
MARQUE DE CITATION CHEVRON SIMPLE DROIT
MARQUE DE CITATION CHEVRON DOUBLE GAUCHE
00AB
[guillemet franais ouvrant]
MARQUE DE CITATION CHEVRON DOUBLE DROIT
00BB
[guillement franais fermant]
GUILLEMET SIMPLE GAUCHE HAUT [guillemet anglais
2018
ouvrant simple, ou apostrophe typographique]
GUILLEMET SIMPLE DROIT HAUT [guillemet anglais fermant
2019
simple]
GUILLEMET DOUBLE GAUCHE HAUT [guillemet anglais
201C
ouvrant double]
GUILLEMET DOUBLE DROIT HAUT [guillemet anglais
201D
fermant double]
201E
GUILLEMET DOUBLE BAS [guillemet double bas]
12.4.2 Insrer des guillemets avec la proprit 'content'
Les valeurs 'openquote' et 'closequote' de la proprit 'content' insrent les guillemets aux endroits appropris
du document. L'une des chanes issues des valeurs de la proprit 'quotes' se substituent chaque survenue de
'openquote', ou ' closequote', selon le niveau d'imbrication.
La valeur 'openquote' se rapporte au premier guillemet d'une paire donne, celle de 'closequote' au second
guillemet. L'utilisation de telle ou telle paire de guillemet dpend de la profondeur d'imbrication de la citation : le
nombre d'apparitions de 'openquote' dans tout le texte gnr avant la citation en question, moins le nombre
d'apparitions de 'closequote'. Pour une profondeur gale 0, la premire paire est retenue, pour une profondeur
108

de 1, c'est la deuxime paire, etc. Si la profondeur est suprieure au nombre de paires, la dernire paire est
rutilise. Une valeur de 'closequote' qui rendrait la profondeur ngative est incorrecte et ignore : la profondeur
reste 0 et aucun guillemet n'est rendu (bien que le reste de la valeur de la proprit 'content' soit quand mme
insr).
Noter que cette profondeur de citation est indpendante de l'imbrication du document source ou de la structure de
mise en forme.
Certains styles typographiques requirent des guillemets ouvrants avant chacun des paragraphes si la citation
s'tend sur ceuxci, le dernier paragraphe se terminant avec un guillemet fermant. En CSS, on peut raliser cet
effet en insrant des guillemets fermants "phantmes". Le motcl 'noclosequote' dcrmente ainsi le niveau de
citation, sans pour autant faire apparatre de guillemet fermant.
Exemple(s) :
Cette feuille de style place des guillemets ouvrants devant chaque paragraphe d'un lment BLOCKQUOTE, et un
guillemet fermant la fin du dernier :
BLOCKQUOTE P:before
{ content: openquote }
BLOCKQUOTE P:after
{ content: noclosequote }
BLOCKQUOTE P.dernier:after { content: closequote }
Ceci s'appuyant sur le fait que le dernier paragraphe a la classe "dernier", car il n'existe pas de slecteurs qui
puissent correspondre au dernier enfant d'un lment.
De faon symtrique, le motcl 'noopenquote', qui ne fait pas apparatre de guillemet ouvrant, incrmente la
profondeur de citation d'une unit.
Note : Quand une citation est dans une langue diffrente de celle du texte qui la contient, on utilise habituellement
les marques de citation de la langue de ce texte, et non pas celles de la citation en question.
Exemple(s) :
Par exemple, une citation en franais dans un texte en anglais :
The device of the order of the garter is Honni soit qui mal y pense. [la devise de l'ordre de la
Jarretire].
et ici, une citation en anglais dans un texte en franais :
Il disait : Il faut faire dfiler la bande en fast forward.
Cette feuille de styleci va spcifier les valeurs de la proprit 'quotes' de manire ce que les guillemets ouvrants
et fermants fonctionnent correctement pour tous les lments. Les rgles s'appliquent aux documents de langue
anglaise, franaise, ou bien ceux dans les deux langues. On associe une rgle chaque langue supplmentaire.
Noter l'emploi de la conjonction (">"), concernant les enfants de l'lment, pour faire correspondre les guillemets
la langue contextuelle :
[LANG|=fr] > *
[LANG|=en] > *
{ quotes: "" "" "\2039" "\203A" }

{ quotes: "\201C" "\201D" "\2018" "\2019" }
On a tap ici les caractres reprsentant les marques de citation anglaises dans une forme que la plupart des gens
peuvent utiliser. Quand on peut les taper directement, il apparassent ainsi :
[LANG|=fr] > * { quotes: "" "" "" "" }
[LANG|=en] > * { quotes: "" "" "" "" }
12.5 Compteurs et numrotage automatiques

En CSS2, le numrotage automatique est rgi par deux proprits, 'counterincrement' et 'counterreset'. Les
compteurs dfinis par cellesci sont employs par les fonctions counter() et counters() de la proprit 'content'.
'counterreset'
Valeur :
Initiale :
S'applique :
[ <identifiant> <entier>? ]+ | none | inherit

none
tous les lments
109

Hrite :
Pourcentage :
Mdias :
'counterincrement'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
non
sans objet
tous
none
tous les lments
non
sans objet
tous
La proprit 'counterincrement' accepte un ou plusieurs noms de compteurs (des identifiants), chacun d'eux tant
suivi d'un entier facultatif. Cet entier indique la valeur de l'incrmentation du compteur chaque fois que survient
l'lment. L'incrmentation par dfaut est d'une unit. Les entiers nuls ou ngatifs sont admis.
La proprit 'counterreset' contient aussi une liste de noms de compteurs, un ou plusieurs, chacun d'eux tant
suivi d'un entier facultatif. Cet entier indique la valeur que prend un compteur chaque fois que survient
l'lment. Par dfaut, celuici a une valeur nulle.
Quand la proprit 'counterincrement' se rfre un compteur qui est hors de porte (voir plus loin) de la
proprit 'counterreset', le compteur est considr avoir t mis zro par l'lment racine.
Exemple(s) :
Voici une manire de numroter des chapitres et leurs sections, tel que "Chapitre 1", "1.1", "1.2", etc. :
H1:before {
content: "Chapitre " counter(chapitre) ". ";
counterincrement: chapitre; /* Ajoute 1 au chapitre */
counterreset: section;
/* Remet la section zro */
}
H2:before {
content: counter(chapitre) "." counter(section) " ";
counterincrement: section;
}
Quand un lment incrmente, ou remet zro, un compteur, et dans le mme temps, l'utilise (au travers de la
proprit 'content' du pseudolment :before ou :after qui lui est attach), le compteur n'est utilis qu'aprs avoir
t incrment, ou remis zro.
Quand un lment, la fois, remet zro et incrmente un compteur, la remise zro intervient avant
l'incrmentation.
La proprit 'counterreset' suit les rgles de cascade, ainsi la feuille de style :
H1 { counterreset: section 1 }
H1 { counterreset: imagenum 99 }
celleci va seulement remettre zro le compteur 'imagenum'. Pour que les deux compteurs le soient, il faut les
runir :
H1 { counterreset: section 1 imagenum 99 }
12.5.1 Les compteurs imbriqus et leur porte

Les compteurs sont "autoimbriquants", dans le sens o la rutilisation d'un compteur dans un lment enfant cre
automatiquement une nouvelle instance de celuici. Ceci a son importance dans des cas comme les listes en
HTML, o les lments peuvent tre imbriqus dans euxmmes des profondeurs arbitraires. Il serait sinon
impossible de dfinir des noms de compteurs uniques pour chaque niveau d'imbrication.
Exemple(s) :
Ainsi, ce qui suit suffit pour numroter des items de liste imbriqus. Le rsultat est trs semblable celui qui serait
obtenu en appliquant 'display:listitem' et 'liststyle:inside' sur l'lment LI :
OL { counterreset: item }
110

LI { display: block }
LI:before { content: counter(item) ". "; counterincrement: item }
L'autoimbrication se base sur le principe que chaque lment, ayant une proprit 'counterreset' pour un
compteur X, cre un nouveau compteur X, dont la porte va s'tendre l'lment en question, aux descendants de
celuici, et ceux des lments prcdents de mme parent et leurs descendants.
Dans l'exemple prcdent, un lment OL va crer un compteur et tous les enfants de cet lment vont se rfrer
ce dernier.
Si on note par item[n] la neme instance du compteur "item", par "(" et ")" le dbut et la fin d'une porte, l'extrait
HTML suivant utilisant ce compteur (et la feuille de style prcdente associe celuici :
<OL>
<LI>item
<LI>item
<OL>
<LI>item
<LI>item
<LI>item
<OL>
<LI>item
</OL>
<OL>
<LI>
</OL>
<LI>item
</OL>
<LI>item
<LI>item
</OL>
<OL>
<LI>item
<LI>item
</OL>
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
<!
(met item[0] 0
>
incrmente item[0] (= 1)
>
>
(met item[1] 0
>
incrmente item[1] (= 1) >
(met item[2] 0
>
)
>
(met item[3] 0
>
)
>
)
>
>
>
)
>
(remet item[4] 0
>
>
>
)
>
La fonction 'counters()' gnre une chane compose des valeurs de tous les compteurs de mme nom, cellesci
spares par une chane donne.
Exemple(s) :
Cette feuille de style numrote les articles d'une liste imbrique, tel que "1", "1.1", "1.1.1", etc. :
OL { counterreset: item }
LI { display: block }
LI:before { content: counters(item, "."); counterincrement: item }
12.5.2 Les styles des compteurs

Par dfaut, les compteurs sont mis en forme avec des nombres dcimaux, mais chacun des styles disponibles pour
la proprit 'liststyletype' peuvent leur tre appliqus.
Voici la notation correspondant au style par dfaut :
counter(nom)
et celle correspondant un style donn :

counter(nom, 'liststyletype')
Tous les styles sont admis, y compris 'disc', 'circle', 'square' et 'none'.
Exemple(s) :
H1:before
H2:before
BLOCKQUOTE:after
DIV.note:before
P:before
{
{
{
{
{
content:
content:
content:
content:
content:
counter(chno, upperlatin) ". " }

counter(section, upperroman) " " }
" [" counter(bq, hebrew) "]" }
counter(notecntr, disc) " " }
counter(p, none) }
111

12.5.3 Les compteurs dans les lments avec 'display: none'
Un lment qui n'est pas affich (sa proprit 'display' ayant la valeur 'none'), ne peut ni incrmenter un compteur
ni le remettre zro.
Exemple(s) :
Dans cet exemple, les lments H2 ayant une classe "secret" n'incrmente pas 'count2' :
H2.secret {counterincrement: count2; display: none}
Par contre, les lments dont la valeur de la proprit 'visibility' est 'hidden', incrmentent les compteurs.
12.6 Les marqueurs et les listes

En CSS, la plupart des lments de type bloc gnre une bote de bloc principale. Dans ce chapitre, nous allons
voir comment deux mcanismes CSS agissent sur un lment pour le faire produire deux botes : une bote de bloc
principale (pour le contenu de l'lment) et une bote de marqueur spare (qui contient des dcorations telles
qu'une puce, une image ou un nombre). la diffrence des contenus de :before et :after, la bote de marqueur
n'affecte pas l'emplacement de la bote principale, quel que soit le schma de positionnement.
Apparaissant avec CSS2, on appelle le plus gnral de ces deux mcanismes les marqueurs. L'autre mcanisme,
plus limit, fait appel aux proprits de liste issues de CSS1. Ces dernires permettent aux auteurs une mise en
place rapide pour un grand nombre de scnarios courants o interviennent des listes ordonnes, ou non.
Cependant, les auteurs peuvent avoir un contrle prcis du contenu et de l'emplacement des marqueurs. On peut
utiliser ceuxci avec des compteurs pour crer de nouvelles listes, pour numroter les notes de marge et plus
encore.
Voici, par exemple, comment on peut employer des marqueurs pour rajouter un point aprs chacun des numros
des items d'une liste. Soit ce document HTML et sa feuille de style :
<HTML>
<HEAD>
<TITLE>Crer une liste avec des marqueurs</TITLE>
LI:before {
display: marker;
content: counter(compteur, lowerroman) ".";
counterincrement: compteur;
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> Voici le premier item.
<LI> Voici le deuxime item.
<LI> Voici le troisime item.
</OL>
</BODY>
</HTML>
ceci devrait donner quelque chose comme :

i. Voici le premier item.
ii. Voici le deuxime item.
iii. Voici le troisime item.
Avec des slecteurs descendants et des slecteurs d'enfants, il est possible de spcifier divers types de marqueurs en
fonction de la profondeur de listes imbriques.
12.6.1 Les marqueurs : la proprit 'markeroffset'
On cre un marqueur en spcifiant la valeur 'marker' la proprit 'display' dans un pseudolment :before ou
:after. Alors que les contenus de ces pseudolments, ayant les valeurs 'block' et 'inline', font partie de la bote
principale gnre par l'lment, un contenu avec la valeur 'marker' est mis en forme dans une bote indpendante,
en dehors de la bote principale. Les botes des marqueurs s'inscrivent dans une seule ligne (c..d. dans une bote
de ligne), cellesci ne sont pas aussi souples d'emploi que les flottants. Une bote de marqueur n'est cre que si la
proprit 'content' du pseudolment gnre effectivement un contenu.
112

Les botes de marqueurs ont des espacements et des bordures, mais pas de marges.
Avec le pseudolment :before, la ligne de base de la bote de marqueur sera aligne avec celle de la premire
bote de ligne de la bote principale. Si celleci ne contient pas de bote de ligne, ou si celleci contient une bote
de bloc se trouvant audessus la premire bote de ligne, le bord externe haut de la bote de marqueur sera align
avec celui de la bote principale.
Avec le pseudolment :after, la ligne de base de la bote de marqueur sera aligne avec celle de la dernire bote
de ligne de la bote principale. Si celleci ne contient pas de bote de ligne, ou si celleci contient une bote de
bloc se trouvant endessous de la dernire bote de ligne, le bord externe bas de la bote de marqueur sera align
avec celui de la bote principale.
La hauteur d'une bote de marqueur est donne par la proprit 'lineheight'. La bote de marqueur d'un
pseudolment :before (ou :after) entre dans le calcul de la hauteur de la premire bote de ligne (ou la dernire)
de la bote principale. Ainsi, les marqueurs sont aligns sur la premire ligne, ou la dernire, du contenu d'un
lment, bien que ceuxci occupent des botes distinctes. Quand il n'y a pas de premire bote de ligne, ou de
dernire, la bote de marqueur tablit ellemme sa propre bote de ligne.
L'alignement vertical d'une bote de marqueur dans sa bote de ligne est donn par la proprit 'verticalalign'.
Si la valeur de la proprit 'width' est 'auto', la largeur du contenu de la bote de marqueur correspond celle du
contenu, et, pour une autre valeur, celle spcifie dans la proprit 'width'. Quand la valeur spcifie par 'width'
est infrieure celle de la largeur effective du contenu, c'est la proprit 'overflow' qui prcise la manire du
dbordement. Les botes de marqueurs peuvent recouvrir leur bote principale. Quand la valeur spcifie par
'width' est suprieure celle de la largeur effective du contenu, c'est la proprit 'textalign' qui dtermine
l'alignement horizontal du contenu de la bote de marqueur.
La proprit 'markeroffset' spcifie le dcalage horizontal entre une bote de marqueur et la bote principale
laquelle celleci est associe. Ce dcalage correspond la distance entre les bords de leurs bordures les plus
proches. Note : Si un marqueur scoule la droite d'un flottant dans un contexte de mise en forme de gauche
droite, la bote principale s'coulera le long du flanc droit du flottant, mais la bote de marqueur apparatra la
gauche du flottant. Le bord de la bordure gauche de la bote principale venant contre le bord gauche du flottant
(voir la description des flottants), et les botes des marqueurs se trouvant en dehors du bord de la bordure de leur
bote principale, le marqueur se trouvera ainsi gauche du flottant. De la mme faon et inversement, dans un
contexte de mise en forme de droite gauche et pour un marqueur s'coulant la gauche d'un flottant.
Quand la proprit 'display' a la valeur 'marker' pour le contenu d'un lment, celuici ayant une valeur 'display:
listitem', alors c'est une bote de marqueur gnre par le pseudolment :before qui remplace le marqueur
normal de l'item de liste.
Dans l'exemple, le contenu est centr dans une bote de marqueur de largeur fixe. Soit le document :
<HTML>
<HEAD>
<TITLE>Alignement du contenu dans une bote de marqueur</TITLE>
LI:before {
display: marker;
content: "(" counter(compteur) ")";
width: 6em;
textalign: center;
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> Voici l'item numro 1.
</OL>
</BODY>
</HTML>
celuici pourrait tre rendu par :

(1)
Voici l'item
numro 1.
113

(2)
(3)
Voici l'item
numro 2.
Voici l'item
numro 3.
Cet exempleci cre des marqueurs avant et aprs les items d'une liste :
Soit le document :
<HTML>
<HEAD>
<TITLE>Des marqueurs avant et aprs les items d'une liste</TITLE>
@media screen, print {
LI:before {
display: marker;
content: url("smiley.gif");
LI:after {
display: marker;
content: url("sad.gif");
}
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>le premier item vient d'abord
<LI>le second item vient ensuite
</UL>
</BODY>
</HTML>
celuici pourrait tre rendu ainsi (on utilise une reprsentation en caractres ASCII la place des images) :
:) le premier item
vient d'abord
:) le second item
vient ensuite
:(
:(
L'exemple suivant utilise des marqueurs pour numroter des notes (de paragraphes).
Soit le document :
<HTML>
<HEAD>
<TITLE>Des marqueurs pour numroter des notes</TITLE>
P { marginleft: 12 em; }
@media screen, print {
P.Note:before
{
display: marker;
content: url("note.gif")
"Note " counter(compteurdenote) " :";
counterincrement: compteurdenote;
textalign: left;
width: 10em;
}
}
</STYLE>
</HEAD>
<BODY>
<P>Voici le premier paragraphe de ce document.</P>
<P CLASS="Note">Maintenant, un paragraphe trs court.</P>
<P>Et le paragraphe final.</P>
</BODY>
</HTML>
celuici pourrait tre rendu ainsi :

Voici le premier paragraphe
de ce document.
Note 1 :
114
Maintenant, un paragraphe

trs court.
Et le paragraphe final.
'markeroffset'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<longueur> | auto | inherit

auto
ceux des lments dont la valeur de la proprit 'display' est 'marker'
non
sans objet
visuel
Cette proprit spcifie la distance entre les bords des bordures les plus proche d'une bote de marqueur et la bote
principale qui lui est associe. Ce dcalage peut tre dfinie par l'utilisateur (<longueur>) ou bien par l'agent
utilisateur (pour une valeur 'auto'). Les valeurs peuvent tre ngatives, mais leur interprtation peut dpendre de
l'implmentation.
L'exemple suivant montre comment utiliser les marqueurs pour ajouter un point aprs chaque item numrot d'une
liste. Soit ce document HTML et sa feuille de style :
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Exemple 5 avec les marqueurs</TITLE>
P { marginleft: 8em } /* Fait de la place pour les compteurs */
LI:before {
display: marker;
markeroffset: 3em;
content: counter(compteur, lowerroman) ".";
}
</STYLE>
</HEAD>
<BODY>
<P> Voici le long paragraphe qui prcde...
<OL>
<LI> Le premier item.
<LI> Le deuxime item.
<LI> Le troisime item.
</OL>
<P> Et le long paragraphe qui suit...
</BODY>
</HTML>
ceci devrait donner quelque chose comme :

Voici le long paragraphe
qui prcde...
i.
ii.
iii.
Le premier item.
Le deuxime item.
Le troisime item.
Et le long paragraphe
qui suit...
12.6.2 Les listes : les proprits 'liststyletype', 'liststyleimage', 'liststyleposition' et

'liststyle'
Les proprits de liste permettent une mise en forme limit des listes. Tout comme les marqueurs, au champs
d'action plus tendu, un lment dont la proprit 'display' a la valeur 'listitem' gnre une bote principale pour
son contenu ainsi qu'une bote de marqueur facultative. Les proprits de liste permettent de prciser le type
(image, glyphe ou nombre) et la position d'une bote de marqueur par rapport la bote principale ( l'extrieur, ou
l'intrieur avant le contenu). Par contre, cellesci ne permettent pas de spcifier un style distinct (de couleur, de
police, d'alignement, etc.) pour le marqueur de liste ou la position de celuici par rapport la bote principale.
De plus, si on utilise un marqueur M (cr par 'display: marker') avec un item de liste cr par ces proprits de
liste, le marqueur M remplace le marqueur normal d'item de liste.
115

En employant les proprits de liste, les proprits d'arrireplan ne s'appliquent qu' la bote principale, la bote
de marqueur en dehors restant transparente. Les marqueurs autorisent un plus grand contrle sur le style d'une
bote de marqueur.
'liststyletype'
disc | circle | square | decimal | decimalleadingzero | lowerroman | upperroman |
lowergreek | loweralpha | lowerlatin | upperalpha | upperlatin | hebrew | armenian |
Valeur :
georgian | cjkideographic | hiragana | katakana | hiraganairoha | katakanairoha | none |
inherit
Initiale :
disc
S'applique ceux des lments dont la valeur de la proprit 'display' est 'listitem'
:
Hrite :
oui
:
Mdias :
visuel
Cette proprit spcifie l'aspect du marqueur d'item de liste, quand la proprit 'liststyleimage' a la valeur 'none'
ou quand l'image sur laquelle pointe l'URI n'est pas disponible. La valeur 'none' spcifiant l'absence de marqueur,
trois types de marqueurs existent autrement : partir de glyphes, de systmes de numrotation et de systmes
alphabtiques. Note : Les listes numrotes sont plus accessibles, la navigation l'intrieur de cellesci tant plus
facile.
Les valeurs de glyphes sont disc, circle et square. Leur rendu exact dpend de l'agent utilisateur.
Les valeurs pour les systmes de numrotation sont :
decimal
Des nombres dcimaux, commenant partir de 1 ;
decimalleadingzero
Des nombres dcimaux, flanqus d'un zro initial (ex. 01, 02, 03, ..., 98, 99) ;
lowerroman
Des chiffres romains minuscules (i, ii, iii, iv, v, etc.) ;
upperroman
Des chiffres romains majuscules (I, II, III, IV, V, etc.) ;
hebrew
Numrotation en hbreu traditionnel (Alef, Bet, ... Tet Vav, Tet Zayin, ... Yod Tet, Kaf ...) ;
georgian
Numrotation en georgien traditionnel (an, ban, gan, ..., he, tan, in, inan, ...) ;
armenian
Numrotation en armnien traditionnel ;
cjkideographic
Des nombres idographiques pleins ;
hiragana
a, i, u, e, o, ka, ki, ... ;
katakana
A, I, U, E, O, KA, KI, ... ;
hiraganairoha
i, ro, ha, ni, ho, he, to, ... ;
katakanairoha
I, RO, HA, NI, HO, HE, TO, ...
Quand un agent utilisateur ne reconnat pas un systme de numrotation, celuici devrait se rabattre sur 'decimal'.
Note : Cette spcification ne prcise pas de mcanisme exact pour chacun des systmes de numrotation (ex.
comment calculer les chiffres romains). Une note ultrieure du W3C pourrait apporter des claircissements sur
ceuxci.
Les valeurs pour les systmes alphabtiques sont :
lowerlatin or loweralpha
Des lettres ASCII minuscules (a, b, c, ..., z) ;
upperlatin or upperalpha
Des lettres ASCII majuscules (A, B, C, ..., Z) ;
lowergreek
116

Des lettres greques classiques alpha, beta, gamma, ... (-, , , ...).
Cette spcification ne dfinit pas comment se comportent les systmes alphabtiques la fin de l'alphabet. Par
exemple, audel de 26 items de liste, le rendu pour 'lowerlatin' est indfini. C'est pourquoi, pour de longues
listes, on recommande de choisir des nombres vritables.
Soit le document HTML suivant :
<HTML>
<HEAD>
<TITLE>Numrotation en chiffres romains minuscules</TITLE>
OL { liststyletype: lowerroman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> Le premier item.
<LI> Le deuxime item.
<LI> Le troisime item.
</OL>
</BODY>
</HTML>
celuici pourrait apparatre ainsi :

i Le premier item.
ii Le deuxime item.
iii Le troisime item.
Noter que l'alignement des marqueurs de liste (ici, en justification droite) dpend de l'agent utilisateur.
Note : Les versions ultrieures de CSS pourraient apporter d'autres styles de numrotation.
'liststyleimage'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<uri> | none | inherit

none
ceux des lments dont la proprit 'display' a la valeur 'listitem'
oui
sans objet
visuel
Cette proprit dsigne l'image qui sera employe comme marqueur d'item de liste. Quand l'image est disponible,
elle remplace le marqueur produit par la proprit 'liststyletype'.
Exemple(s) :
Cet exemple place l'image "ellipse.png" comme marqueur au dbut de chacun des items de liste :
UL { liststyleimage: url("http://png.com/ellipse.png") }
'liststyleposition'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
inside | outside | inherit

outside
oui
sans objet
visuel
Cette proprit spcifie l'emplacement de la bote de marqueur dans la bote de bloc principale. Les significations
des valeurs sont :
outside
La bote de marqueur est place en dehors de la bote de bloc principale. Note : CSS1 ne donnait pas
l'emplacement exact de la bote de marqueur, cette ambigut reste en CSS2 pour des raisons de
compatibilit. Pour un contrle plus fin de la position des botes des marqueurs, utiliser 'marker' ;
inside
117

La bote de marqueur devient la premire bote enligne de la bote de bloc principale, le contenu de
l'lment s'coulant aprs celleci.
Par exemple :
<HTML>
<HEAD>
<TITLE>Comparaison entre les emplacements 'inside' et 'outside'</TITLE>
UL
{ liststyle: outside }
UL.compact { liststyle: inside }
</STYLE>
</HEAD>
<BODY>
<UL>
</UL>
<UL class="compact">
</UL>
</BODY>
</HTML>
Ceci pourrait tre rendu ainsi :
Dans un texte lu de droite gauche, les marqueurs auraient t places au ct droit de la bote.
'liststyle'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
[ <'liststyletype'> || <'liststyleposition'> || <'liststyleimage'> ] | inherit

oui
sans objet
visuel
La proprit raccourcie 'liststyle' sert runir les trois proprits 'liststyletype', 'liststyleimage' et
'liststyleposition' dans la feuille de style.
Exemple(s) :
UL { liststyle: upperroman inside } /* Pour tous les lments UL */

UL LI > UL { liststyle: circle outside } /* Pour tous les lments UL qui sont enfants d'un lment L
Bien qu'on puisse spcifier directement l'information de 'liststyle' aux lments d'item de liste (ex. l'lment LI
en HTML), ceci requiert un soin particulier. Les deux rgles suivantes semblent identiques, cependant la premire
comporte un slecteur descendant et la seconde, un slecteur d'enfant (plus spcifique) :
OL.alpha LI
{ liststyle: loweralpha } /* Tous les lments LI descendant d'un lment OL */
OL.alpha > LI { liststyle: loweralpha } /* Tous les lments LI enfant d'un lment OL */
118

Les auteurs, employant seulement le slecteur descendant, pourraient ne pas obtenir le rsultat escompt.
Considrons ces rgles :
<HTML>
<HEAD>
<TITLE>ATTENTION : Rsultats inattendus, du fait de la cascade</TITLE>
OL.alpha LI { liststyle: loweralpha }
UL LI
{ liststyle: disc }
</STYLE>
</HEAD>
<BODY>
<OL class="alpha">
<LI>niveau 1
<UL>
<LI>niveau 2
</UL>
</OL>
</BODY>
</HTML>
L'aspect souhait aurait t d'avoir les items de liste du niveau 1 avec des marqueurs 'loweralpha' et les items de
liste du niveau 2 avec des marqueurs 'disc'. Cependant, l'ordre de la cascade va faire que la premire (qui inclut
une information de classe spcifique) masquera la seconde. L'emploi d'un slecteur d'enfant dans la rgle suivante
amne au rsultat attendu :
OL.alpha > LI { liststyle: loweralpha }
UL LI
{ liststyle: disc }
Une autre solution aurait t de spcifier l'information de 'liststyle' seulement aux lments de type de liste :
OL.alpha
UL
{ liststyle: loweralpha }
{ liststyle: disc }
Les lments LI vont hriter des valeurs de la proprit 'liststyle' au travers des lments OL et UL. On
recommande cette manire de faire pour spcifier le style des listes.
Exemple(s) :
On peut combiner une valeur d'URI avec chacune des autres valeurs, comme :
UL { liststyle: url("http://png.com/ellipse.png") disc }
Dans cet exemple, la valeur 'disc' sera employe en cas d'indisponibilit de l'image.
Quand on spcifie la valeur 'none' pour la proprit 'liststyle', les proprits 'liststyletype' et 'liststyleimage'
prennent toutes deux cette mme valeur 'none' :
UL { liststyle: none }
Aucun marqueur d'item de liste n'est affiche.
119
13 Les mdias pagins

13.1 Introduction aux mdias pagins
Les mdias pagins (ex. les feuilles de papier, les transparents, les pages qui ne s'affichent pas sur un moniteur,
etc.) diffrent des mdia continus en ceci que le contenu du document est dcoup discrtion en une ou plusieurs
pages. Pour la gestion de ce dcoupage de la page, CSS2 tend le modle de mise en forme visuel des manires
suivantes :
1. La bote de page enrichit le modle de la bote et donne aux auteurs la possibilit de spcifier la taille de la
page, ses marges, etc. ;
2. Le modle de la page enrichit le modle de mise en forme visuel et prend en compte les coupures de
page.
Le modle de la page de CSS2 dfinit la mise en forme d'un document dans une aire rectangulaire, la bote de
page, celleci ayant une largeur et une hauteur limites. La bote de page ne correspond pas forcment la feuille
dfinitive sur laquelle le document sera rendu (une feuille de papier, un transparent, un cran, etc.). Le modle de
la page spcifiant la mise en forme dans la bote de page, le transfert de cette dernire vers la feuille est du ressort
de l'agent utilisateur. Quelques modalits de transfert :
D'une bote de page vers une feuille (ex. pour une impression en recto) ;
De deux botes de page vers les deux faces d'une mme feuille (ex. pour une impression en recto verso) ;
D'un (petit) nombre N de botes de page vers une seule feuille (appel "vignette") ;
D'une (grande) bote de page vers des feuilles plus petites, la page tant rpartie sur plusieurs d'entre elles
(appel "mosaque") ;
Pour la cration de signatures. Une signature est un ensemble de pages imprimes sur une feuille, qui, une
fois plie et massicote comme pour un livre, apparaissent dans le bon ordre ;
Vers l'impression d'un document en plusieurs formats ;
Vers un fichier.
Bien que CSS2 ne dfinisse pas la manire dont les agents utilisateurs doivent transfrer les botes de page vers
leurs feuilles cibles, celuici inclut certains mcanismes pour leur signifier la dimension et l'orientation de
cellesci.
13.2 Les botes de page : la rgle @page

La bote de page est une aire rectangulaire comportant deux parties :
L'aire de la page. Celleci contient les botes qui y sont disposes. Les bords de l'aire de la page font
office de bloc conteneur initial pour la mise en page survenant entre les coupures de page ;
L'aire de marge, qui entoure l'aire de la page.
Note : En CSS2, les proprits de bordure et d'espacement ne s'appliquent pas aux pages, ceci pourrait tre le cas
ultrieurement.
Les auteurs spcifient les dimensions, l'orientation, les marges, etc. d'une bote de page au travers d'une rgle
@page. Une telle rgle consiste en le motcl "@page", qui est un slecteur de page (suivi, en option, par une
pseudoclasse de page, sans blanc intermdiaire), et d'un bloc de dclaration (qu'on dit tre dans le contexte de
la page).
Le slecteur de page prcise lesquelles des pages sont concernes par les dclarations. En CSS2, les slecteurs
de page peuvent dsigner chacune des pages de gauche, chacune des pages de droite ou une page avec un nom
donn.
La proprit 'size' donne les dimensions de la bote de page, l'aire de marge tant dduite.
Exemple(s) :
Par exemple, cette rgle @page produit une taille de bote de page de 8.5 x 11 pouces et une marge de '2cm' sur
chacun des cts entre le bord de la bote de page et l'aire de la page :
@page { size: 8.5in 11in; margin: 2cm }
120

La proprit 'marks', dans une rgle @page, spcifie les repres de coupe et d'alignement pour la bote de page.
13.2.1 Les marges de la page
Les proprits de marge ('margintop', 'marginright', 'marginbottom', 'marginleft' et 'margin') s'appliquent
dans le contexte de la page. L'illustration suivante montre les relations entre la feuille, la bote de page et les
marges de la page :
Les valeurs calcules des marges de la bote, en haut ou en bas de la page, sont gales '0'.
La notion de police tant trangre au contexte de la page, ainsi les units 'em' et 'ex' ne sont pas admises. Les
valeurs en pourcentage des proprits de marge se rapportent aux dimensions de la bote de la page, la largeur de
celleci pour les marges gauche et droite, la hauteur, pour les marges du haut et du bas. Les autres units
dfinies respectivement leurs proprits sont admises.
Des valeurs de marge ngatives (pour la bote de la page, ou pour certains lments) ou un positionnement absolu
peuvent placer un contenu en dehors de la bote de la page, aussi celuici peut tre "coup" (par l'agent utilisateur,
par l'imprimante ou, finalement, par le massicot).
13.2.2 La taille de la page : la proprit 'size'
'size'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<longueur>{1,2} | auto | portrait | landscape | inherit

auto
un contexte de page
sans objet
sans objet
visuel, pagin
Cette proprit spcifie la taille et l'orientation d'une bote de page.

La taille d'une bote de page peut tre soit "absolue" (de taille fixe), soit "relative" (de taille variable, celleci
s'adaptant aux tailles des feuilles disponibles). Les botes de page relatives permettent aux agents utilisateurs une
mise l'chelle du document pour une utilisation optimale de la taille de la cible.
La proprit 'size' admet trois valeurs capables de crer une bote de page relative :
auto
La bote de la page se conforme la taille et l'orientation de la feuille cible ;
landscape
121

Surclasse l'orientation de la feuille cible. La bote de la page a la mme taille que celle de la cible, les
cts de la bote les plus longs sont horizontaux ;
portrait
Surclasse l'orientation de la feuille cible. La bote de la page a la mme taille que celle de la cible, les
cts de la bote les plus courts sont horizontaux.
Exemple(s) :
Dans cet exemple, les bords externes de la bote de la page s'aligneront sur ceux de la cible. La valeur en
pourcentage de la proprit 'margin' se rapporte la taille de la cible, ainsi, quand la feuille cible a pour
dimensions 21.0cm x 29.7cm (format A4), les marges seront 2.10cm (horizontalement) et 2.97cm (verticalement)
:
@page {
size: auto;
margin: 10%;
}
/* auto est la valeur initiale */
Les valeurs de longueur de la proprit 'size' crent une bote de page de taille absolue. Quand on ne spcifie
qu'une seule valeur, la largeur et la hauteur de la bote de la page sont les mmes (c..d. une bote carre). La bote
de la page tant le bloc conteneur initial, la proprit 'size' n'admet pas de valeurs en pourcentage.
Exemple(s) :
Par exemple :
@page {
size: 8.5in 11in;
}
/* width height */
Ici, la bote de la page a une largeur de 8.5in et une hauteur de 11in. Les dimensions requises pour la feuille cible
sont 8.5 x 11 pouces, au moins.
Les agents utilisateurs peuvent autoriser un certain contrle du transfert de la page vers la feuille (c..d. la rotation
d'une bote de page absolue en vue de son impression).
Le rendu d'une bote de page qui ne tient pas sur une feuille cible
Quand la bote de la page ne tient pas dans la feuille cible, l'agent utilisateur peut exercer :
Une rotation de la bote de 90 si cela permet de la faire tenir dans la feuille ;
Une diminution de l'chelle de la page pour la faire tenir dans la feuille.
L'agent utilisateur devrait prvenir l'utilisateur avant d'effectuer ces oprations.
Le positionnement de la bote de la page sur la feuille
Quand la bote de la page est plus petite que la feuille cible, l'agent utilisateur est libre de la placer n'importe o
dans la feuille. Cependant, on recommande que celleci soit centre dans la feuille, ce qui permet un certain
alignement sur une feuille au recto et au verso, et aussi d'viter d'ventuelles pertes d'information quand
l'impression a lieu trop prs du bord de la feuille.
13.2.3 Les repres de coupe : la proprit 'marks'
'marks'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
[ crop || cross ] | none | inherit

none
un contexte de page
sans objet
sans objet
visuel, pagin
Pour les impressions de qualit, on ajoute souvent des repres en dehors de la bote de la page. Cette proprit
indique si des repres de coupe, ou d'alignement, ou les deux en mme temps, doivent apparatre, ou non, en
dehors des limites de la bote de la page.
122

Les repres de coupe indique l'endroit o la page doit tre coupe. Les repres d'alignement (ou aussi, de
cadrage ou d'intersection) sont employs pour aligner les feuilles.
Ces repres ne sont visibles que pour des botes de page absolues (voir la proprit 'size'). Dans le cas des botes
relatives, la bote de page s'aligne sur cible, les repres se trouvant hors de la zone d'impression.
La taille, le style et la position des reprres dpendent de l'agent utilisateur.
13.2.4 Les pages de gauche, de droite et de couverture
Pour une impression en recto verso, les botes de page de gauche et de droite devraient apparatre diffremment.
Ceci peut tre ralis l'aide de deux pseudoclasses CSS, pouvant tre dfinies dans le contexte de la page.
Les agents utilisateurs rangent automatiquement chacune des pages selon les pseudoclasses :left ou :right.
Exemple(s) :
@page :left {
marginleft: 4cm;
marginright: 3cm;
}
@page :right {
marginleft: 3cm;
marginright: 4cm;
}
Quand on donne des dclarations distinctes aux pages de gauche et de droite, l'agent utilisateur doit respecter
cellesci, mme si celuici n'effectue pas le transfert des botes de page selon les feuilles de gauche et celles de
droite (ex. l'imprimante n'imprime qu'en recto).
Les auteurs peuvent galement spcifier un style particulier la premire page d'un document avec la
pseudoclasse :first :
Exemple(s) :
@page { margin: 2cm } /* Toutes les marges font 2cm */
@page :first {
margintop: 10cm
}
/* La marge du haut de la premire page fait 10cm */
La dtermination du ct de la premire page d'un document, page de gauche ou de droite, dpend du sens
d'criture principal du document, ceci n'est pas trait dans la prsente spcification. Cependant, pour forcer la
premire page gauche, ou droite, les auteurs peuvent insrer une coupure de page avant la premire bote
gnre (ex. en HTML, le faire pour lment BODY).
Les proprits spcifis dans une rgle @page, avec une pseudoclasse :left ou :right, surclassent celles dans une
rgle @page qui en est dpourvue. Et celles dans une rgle @page, avec une pseudoclasse :first, surclassent
leur tour celles avec une pseudoclasse :left ou :right.
Note : Le fait d'ajouter des dclarations aux pseudoclasses :left ou :right ne prsage en rien d'une sortie
d'impression du document en recto ou en recto verso (ceci tant en dehors de l'objet de cette spcification).
Note : Des versions ultrieures de CSS pourraient introduire d'autres pseudoclasses de page.
13.2.5 Le contenu en dehors de la bote de page
Lors de la mise en forme d'un contenu dans le modle de la page, une partie de celuici peut se trouver en dehors
de la bote de la page. Par exemple, un lment dont la proprit 'whitespace' a la valeur 'pre' peut gnrer une
bote plus grande que celle de la page. De mme, les botes en position absolue peuvent finir des emplacements
"inattendus". Par exemple, des images peuvent tre places au bord de la bote de la page, ou encore 100 000
pouces en dessous de celleci.
La dfinition de la mise en forme pour de tels lments n'est pas aborde dans cette spcification. Cependant, dans
ces cas, on recommande, de la part des auteurs et des agents utilisateurs, de suivre les principes gnraux suivants
:
123

Le contenu devrait tre plac lgrement audel des limites de la bote de la page pour permettre aux
pages de "fuir" ;
Les agents utilisateurs devraient viter de gnrer un grand nombre de botes de page vides pour respecter
le positionnement des lments (ex. il n'est pas souhaitable de produire 100 pages blanches
l'impression). Noter, cependant, qu'il peut tre ncessaire d'en gnrer un petit nombre pour honorer les
valeurs 'left' et 'right' des proprits 'pagebreakbefore' et 'pagebreakafter' ;
Les auteurs ne devraient pas positionner d'lments des emplacements embarassants, juste pour viter
leur rendu. Il est prfrable :
Pour supprimer compltement la gnration d'une bote, de donner la valeur 'none' la proprit
'display' ;
Pour rendre une bote invisible, d'employer la proprit 'visibility'.
Les agents utilisateurs peuvent grer les botes positionnes en dehors de la bote de la page de plusieurs
faons, dont le rejet de cellesci, ou la cration pour cellesci d'une autre bote de page la fin du
document.
13.3 Les coupures de page

Cette partie traite de la mise en forme des page en CSS2. Cinq proprits prcisent aux agents utilisateurs les
endroits o les coupures de page devraient intervenir et les pages, de gauche ou de droite, les contenus restants
doivent finir. Chaque coupure de page arrte la mise en forme dans une bote de page donne, et provoque la mise
en forme du reste de l'arborescence du document dans une nouvelle bote de page.
13.3.1 Les proprits de coupure avant et aprs : 'pagebreakbefore', 'pagebreakafter',
'pagebreakinside'
'pagebreakbefore'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
auto | always | avoid | left | right | inherit

auto
non
sans objet
visuel, pagin
'pagebreakafter'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

auto
non
sans objet
visuel, pagin
'pagebreakinside'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Pourcentage :
avoid | auto | inherit

auto
oui
sans objet
visuel, pagin

auto
Ne force ni n'interdit une coupure de page avant (ou aprs, ou l'intrieur de) la bote gnre ;
always
Force toujours une coupure de page avant (ou aprs) la bote gnre ;
avoid
vite une coupure de page avant (ou aprs, ou l'intrieur de) la bote gnre ;
left
Force une coupure de page, ou deux, avant (ou aprs) la bote gnre, de manire ce que la page
suivante soit mise en forme comme une page de gauche ;
right
Force une coupure de page, ou deux, avant (ou aprs) la bote gnre, de manire ce que la page
suivante soit mise en forme comme une page de droite.
124

L'endroit potentiel d'une coupure de page est typiquement influenc par la proprit 'pagebreakinside' de
l'lment parent, par la proprit 'pagebreakafter' de l'lment prcdent et la proprit 'pagebreakbefore' de
l'lment suivant. Quand cellesci ont une valeur autre que 'auto', les valeurs 'always', 'left' et 'right' ont prsance
sur 'avoid'. Voir la partie traitant des coupures de page permises pour les rgles prcises rgissant le forage et la
suppression des coupures de page.
13.3.2 L'utilisation des pages nommes : 'page'
'page'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<identifiant> | auto
auto
oui
sans objet
visuel, pagins
La proprit 'page' peut tre employe pour dsigner un type particulier de page o devrait s'afficher un lment
donn.
Exemple(s) :
Dans cet exemple, toutes les tables seront places, avec une orientation paysage [ndt. landscape], dans une page de
droite (celleci est nomme "retournee") :
@page rotated {size: landscape}
TABLE {page: retournee; pagebreakbefore: right}
La proprit 'page' a le fonctionnement suivant : quand une bote de bloc, avec un contenu enligne, a une
proprit 'page' dont la valeur est diffrente de celle de la bote prcdente, galement de type bloc avec un
contenu enligne, alors une ou deux coupures de page sont insres entre ces deux botes, et les botes survenant
aprs la coupure sont rendues dans une bote de page avec ce nom. Voir "Les coupures de page forces" plus loin.
Exemple(s) :
Dans cet exemple, les deux tables sont affiches avec une orientation paysage (sur la mme page en effet, si
celleci peut les contenir), la page nomme "etroite" n'tant pas du tout employe, bien que celleci ait t
applique l'lment DIV :
@page etroite {size: 9cm 18cm}
@page retournee {size: landscape}
DIV {page: etroite}
TABLE {page: retournee}
le document sur lequel agit la feuille de style :

<DIV>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
</DIV>
13.3.3 Les coupures l'intrieur des lments : 'orphans', 'widows'

'orphans'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<entier> | inherit
2
oui
sans objet
visuel, pagin
'widows'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<entier> | inherit
2
oui
sans objet
visuel, pagin
125

La proprit 'orphans' spcifie le nombre minimum de lignes d'un paragraphe devant rester en bas d'une page, la
proprit 'widows' le nombre minimum de lignes d'un paragraphe devant rester en haut d'une page. Voir des
exemples plus loin sur la manire de les employer pour le contrle des coupures de page.
Pour des informations au sujet de la mise en forme des paragraphes, consulter la partie traitant des botes de ligne.
13.3.4 Les coupures de page permises
Dans un flux normal, les coupures de page peuvent survenir aux endroits suivants :
1. La marge verticale entre deux botes de bloc. Dans ce cas, les proprits concernes 'margintop' et
'marginbottom' prennent la valeur calcule '0' ;
2. Entres des botes de ligne dans une bote de bloc.
Les rgles suivantes rgissent ces coupures :
Rgle A : Une coupure pour (1) n'est permise que si les proprits 'pagebreakafter' et
'pagebreakbefore' de tous les lments, qui gnrent des botes se rencontrant cette marge, le
permettent, c'estdire quand l'un au moins d'entre eux a la valeur 'always', 'left' ou 'right', ou quand tous
ont la valeur 'auto' ;
Rgle B : Cependant, si tous ont la valeur 'auto' et leur anctre commun le plus proche a une proprit
'pagebreakinside' dont la valeur est 'avoid', la coupure n'est pas permise ;
Rgle C : Une coupure pour (2) n'est permise que si le nombre de botes de ligne, entre cette coupure et le
dbut de la bote de bloc les contenant, tait suprieur ou gal la valeur de la proprit 'orphans', et si
celui entre cette coupure et la fin de la bote tait suprieur ou gal la valeur de la proprit 'widows' ;
Rgle D : De plus, une coupure pour (2) n'est permise que si la valeur de la proprit 'pagebreakinside'
est 'auto'.
Si ceci n'apportait pas assez de points de coupures pour empcher le contenu de dborder des botes de page, alors
on abandonne les rgles B et D pour en obtenir plus.
Et si cela ne suffisait toujours pas, alors on abandonne aussi les rgles A et C, pour trouver encore d'autres points
de coupures.
Les coupures de page ne peuvent survenir dans des botes en position absolue.
13.3.5 Les coupures de page forces
Une coupure de page doit intervenir en (1) si, parmi les proprits 'pagebreakafter' et 'pagebreakbefore' de
tous les lments, qui gnrent une bote se rencontrant cette marge, il y en a au moins une qui a la valeur
'always', 'left' ou 'right'.
Une coupure de page doit aussi intervenir en (1) si les valeurs des proprits 'page' de la dernire bote de ligne,
avant cette marge, et la premire, aprs celleci, sont diffrentes.
13.3.6 Les coupures de page "au mieux"
CSS2 ne dfinit pas laquelle parmi les coupures de page permises doit tre employe, n'interdit pas, un agent
utilisateur, d'effectuer une coupure l'un ou l'autre des endroits possibles, ne l'oblige pas non plus effectuer des
coupures. Mais CSS2 recommande que les agents utilisateurs observent les comportements suivants (tout en
reconnaissant que ceuxci soient parfois contradictoires) :
Effectuer aussi peu de coupures que possible ;
Faire en sorte que toutes les pages, qui ne finissent pas par une coupure force, aient peuprs la mme
hauteur ;
viter les coupures dans des blocs ayant une bordure ;
viter les coupures dans les tables ;
viter les coupures dans les lments flottants.
Exemple(s) :
Supposons, par exemple, que la feuille de style contienne les dclarations 'orphans: 4' et 'widows: 20', et qu'il y ait
20 lignes (botes de ligne) disponibles la fin d'une page donne :
126

Si un paragraphe, la fin de la page, contient 20 lignes ou moins, alors il devrait tre contenu dans la page
en question ;
Si le paragraphe contenait 21 ou 22 lignes, la seconde part de celuici ne devant pas chapper la
contrainte exerce par 'widows', ainsi cette seconde part devrait contenir exactement 2 lignes ;
Si le paragraphe contenait 23 lignes ou plus, la premire part devrait contenir 20 lignes et, la seconde, le
reste des lignes.
Maintenant, supposons que la valeur spcifie pour 'orphans' soit '10', celle pour 'widows' soit '20' et que 8 lignes
soient disponibles la fin de la page :
Si un paragraphe, la fin de la page, contient 8 lignes ou moins, alors il devrait tre contenu dans la page
en question ;
Si le paragraphe contenait 9 lignes ou plus, celuici ne pouvant pas tre partag (car ceci constituerait une
violation de la contrainte exerce par 'orphan'), alors l'ensemble du paragraphe devrait tre dplac vers la
page qui suit ;
13.4 La cascade dans un contexte de page

Les dclarations dans le contexte de la page obissent aux rgles de la cascade, tout comme les dclarations
normales de CSS2.
Exemple(s) :
Soit l'exemple suivant :
@page {
marginleft: 3cm;
}
@page :left {
marginleft: 4cm;
}
En consquence de la plus grande specificit du slecteur avec une pseudoclasse, les pages de gauche auront une
marge gauche de '4cm', les autres pages (c..d. les pages de droite) auront une marge gauche de '3cm'.
127
14 Les couleurs et les arrireplans

Les proprits CSS permettent aux auteurs la spcification d'une couleur d'avantplan et d'arrireplan pour un
lment. Pour l'arrireplan, cela peut tre une couleur ou une image. Les proprits d'arrireplan autorisent le
positionnement et la rptition d'une image de fond, si celleci doit rester fixe, par rapport l'espace de
visualisation, ou bien, si elle doit dfiler en mme temps que le document.
Voir le passage sur les units de couleur pour une syntaxe correcte des valeurs de couleur.
14.1 La couleur d'avantplan : la proprit 'color'

'color'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<couleur> | inherit
tous les lments
oui
sans objet
visuel
Cette proprit dcrit la couleur d'avantplan du contenu de texte d'un lment. Voici plusieurs faons d'indiquer
la couleur rouge :
Exemple(s) :
EM { color: red }
EM { color: rgb(255,0,0) }
/* nom de couleur prdfini */

/* couleurs en RGB allant de 0 255 */
14.2 L'arrireplan
Les auteurs peuvent spcifier l'arrireplan d'un lment (c..d. la surface o celui est rendu) comme tant une
couleur ou bien une image. Selon le modle de la bote, l'arrireplan correspond aux aires du contenu, de
l'espacement et de bordure. Les couleurs et styles de bordure sont spcifies par les proprits de bordure. Les
marges tant transparentes, l'arrireplan du parent est toujours visible au travers de cellesci.
Bien que les proprits d'arrireplan ne s'hritent pas, l'arrireplan de la bote du parent transparatra par dfaut,
du fait de la valeur initiale 'transparent' de la proprit 'backgroundcolor'.
L'arrireplan de la bote gnre par l'lment racine recouvre la totalit du canevas.
Dans le cas de documents HTML, on recommande aux auteurs de spcifier un arrireplan l'lment BODY,
plutt qu' l'lment HTML. Les agents utilisateurs devraient suivre les rgles de prsance suivantes pour remplir
le fond du canevas : quand la valeur de la proprit 'background' pour l'lment HTML diffre de 'transparent',
alors utiliser la valeur spcifie, autrement utiliser celle spcifie par la proprit 'background' de l'lment
BODY. Le rendu n'est pas dfini si la valeur finale reste 'transparent'.
Selon ces rgles, le canevas en dessous du document HTML suivant aura un arrireplan "marbr" :
<HTML>
<HEAD>
<TITLE>Donner un arrireplan au canevas</TITLE>
BODY { background: url("http://style.com/marbre.png") }
</STYLE>
</HEAD>
<BODY>
<P>Mon arrireplan est marbr.
</BODY>
</HTML>
14.2.1 Les proprits d'arrireplan : 'backgroundcolor', 'backgroundimage',

'backgroundrepeat', 'backgroundattachment', 'backgroundposition' et 'background'
'backgroundcolor'
128

Valeur :
Initiale:
S'applique :
Hrite :
Pourcentage :
Mdias :

transparent
tous les lments
non
sans objet
visuel
Cette proprit donne la couleur d'arrireplan d'un lment, avec une valeur de <couleur>, ou bien avec le
motcl 'transparent', celuici laissant ventuellement voir les couleurs situes plus endessous.
Exemple(s) :
H1 { backgroundcolor: #F00 }
'backgroundimage'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

none
tous les lments
non
sans objet
visuel
Cette proprit spcifie l'image d'arrireplan d'un lment. En mme temps qu'une image, les auteurs devraient
aussi spcifier une couleur d'arrireplan, cette couleur tant employe en remplacement d'une image
indisponible. Celleci, une fois disponible, vient se superposer sur le fond color. La couleur du fond tant ainsi
visible au travers des zones transparentes de l'image.
La proprit admet les valeurs d'<uri>, pointant vers une image, ou 'none', prohibant l'emploi d'image.
Exemple(s) :
BODY { backgroundimage: url("marble.gif") }
P { backgroundimage: none }
'backgroundrepeat'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
repeat | repeatx | repeaty | norepeat | inherit

repeat
tous les lments
non
sans objet
visuel
Quand on spcifie une image d'arrireplan, cette proprit indique si l'image est rpte (appose) et la manire
de la rptition. La mosaque de fond rsultante correspond aux aires de contenu, d'espacement et de bordure de la
bote de l'lment en question. Les significations des valeurs sont :
repeat
L'image se rpte la fois horizontalement et verticalement ;
repeatx
L'image ne se rpte qu'horizontalement ;
repeaty
L'image ne se rpte que verticalement ;
norepeat
L'image ne se rpte pas : un seul exemplaire de celleci est dessin.
Exemple(s) :
BODY {
background: white url("pendant.gif");
backgroundrepeat: repeaty;
backgroundposition: center;
}
129
Un exemplaire de l'image d'arrireplan est place au centre, puis d'autres exemplaires de cellesci se placent les
unes audessus, les autres endessous, produisant une bande verticale derrire l'lment.
'backgroundattachment'
Valeur :
scroll | fixed | inherit
Initiale :
scroll
S'applique :
tous les lments
Hrite :
non
Mdias :
visuel
Quand on spcifie une image d'arrireplan, cette proprit indique si l'image est fixe par rapport l'espace de
visualisation (pour la valeur 'fixed'), ou si celleci dfile en mme temps que le document (pour la valeur 'scroll').
Noter qu'il n'existe qu'un seul espace de visualisation par document ; c..d., mme si l'lment est dot d'un
mcanisme de dfilement (voir la proprit 'overflow'), un arrireplan avec la valeur 'fixed' ne se dplace pas
avec cet lment.
Si l'image est fixe, celleci n'est seulement visible que quand elle se trouve dans les aires d'arrireplan,
d'espacement et de bordure de l'lment. moins que l'image ne se rpte en mosaque ('backgroundrepeat:
repeat'), celleci peut ainsi ne pas apparatre.
Exemple(s) :
Dans cet exemple, une bande verticale infinie reste "colle" dans l'espace de visualisation quand l'lment dfile :
BODY {
background: red url("pendant.gif");
backgroundrepeat: repeaty;
backgroundattachment: fixed;
}
Les agents utilisateurs peuvent considrer une valeur 'fixed' comme tant 'scroll'. Cependant, on recommande une
interprtation correcte de la valeur 'fixed', au moins pour les lments HTML et BODY, autrement il serait
impossible pour un auteur de fournir une image destine seulement aux navigateurs reconnaissant la valeur 'fixed'.
Voir le passage sur la conformit pour des explications.
'backgroundposition'
[ [<pourcentage > | <longueur> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] |
Valeur :
inherit
Initiale :
0% 0%
S'applique ceux des lments de type bloc et ceux remplacs
:
130

Hrite :
Pourcentage
:
Mdias :
non
se rapporte la taille de la bote ellemme
visuel
Quand on spcifie une image d'arrireplan, cette proprit indique la position initiale de celleci. Les
<pourcentage> <pourcentage>
Pour la paire de valeurs '0% 0%', le coin en haut et gauche de l'image est align sur celui du bord de
l'espacement de la bote. Pour la paire de valeurs '100% 100%', c'est le coin en bas et droite de l'image
sur celui du bord de l'espacement de la bote. Pour la paire de valeurs '14% 84%', le point dans l'image,
situ 14% vers la droite et 84% vers le bas, se place sur celui contenu dans l'aire d'espacement de la bote,
dans les mmes proportions ;
<longueur> <longueur>
Pour la paire de valeur '2cm 2cm', le coin en haut et gauche de l'image se place sur le point, situ 2cm
vers la droite et 2cm vers le bas en partant du coin en haut et gauche de l'aire d'espacement de la bote ;
top left et left top
Identique '0% 0%' ;
top, top center et center top
Identique '50% 0%';
right top et top right
Identique '100% 0%' ;
left, left center et center left
center et center center
right, right center etcenter right
bottom left et left bottom
bottom, bottom center et center bottom
bottom right et right bottom
Identique '100% 100%'.
Quand on ne donne qu'une seule valeur, en pourcentage ou en longueur, celleci ne concerne que la position
horizontale, la position verticale sera 50%. Quand on donne deux valeurs, la premire concerne la position
horizontale. Les combinaisons de valeurs de pourcentage et de longueur sont admises (ex. '50% 2cm'). Les
positions ngatives le sont galement. On ne peut pas combiner des motscls avec des valeurs de pourcentage ou
de longueur (ce qui est possible est indiqu plus haut).
Exemple(s) :
BODY
BODY
BODY
BODY
{
{
{
{
background:
background:
background:
background:
url("banner.jpeg")
url("banner.jpeg")
url("banner.jpeg")
url("banner.jpeg")
right top }
top center }
center }
bottom }
/* 100%
0%
/* 50%
0%
/* 50% 50%
/* 50% 100%
*/
*/
*/
*/
Quand l'image d'arrireplan est fixe par rapport l'espace de visualisation (voir la proprit
'backgroundattachment'), cette image se place relativement celuici, et non par rapport l'aire d'espacement de
l'lment. Par exemple :
Exemple(s) :
BODY {
backgroundimage: url("logo.png");
backgroundattachment: fixed;
backgroundposition: 100% 100%;
backgroundrepeat: norepeat;
}
Ici, l'image (solitaire) est place dans le coin en bas droite de l'espace de visualisation.
'background'
Valeur :
[<'backgroundcolor'> || <'backgroundimage'> || <'backgroundrepeat'> ||

<'backgroundattachment'> || <'backgroundposition'>] | inherit
131

Initiale :
S'applique
:
Hrite :
Pourcentage
:
Mdias :

tous les lments
non
admis pour la proprit 'backgroundposition'
visuel
La proprit 'background' est une proprit raccourcie qui sert regrouper les proprits individuelles
'backgroundcolor', 'backgroundimage', 'backgroundrepeat', 'backgroundattachment' et 'backgroundposition'
dans la feuille de style.
La proprit 'background' distribue d'abord toutes les proprits individuelles d'arrireplan leur valeur
initiale, puis leur applique les valeurs explicites de la dclaration.
Exemple(s) :
Dans la premire rgle de l'exemple suivant, la valeur de la proprit 'backgroundcolor' est seule spcifie, les
autres proprits individuelles recevant leur valeur initiale. Dans la seconde rgle, toutes les valeurs des proprits
individuelles sont spcifies :
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }
14.3 La correction du gamma

Pour des explications concernant les questions souleves par le gamma, consulter le tutoriel contenu dans la
spcification PNG ([PNG10]).
Lors du calcul pour la correction du gamma, les agents utilisateurs, ceux affichant sur un cran cathodique,
peuvent considrer un cran cathodique idal et ignorer les effets du gamma apparent ds au dithering. Ceci
implique, de leur part et selon les plateformes actuelles, les corrections minimales suivantes :
PC sous MSWindows
aucune ;
Unix sous X11
aucune ;
Macintosh sous QuickDraw
appliquer un gamma de 1.45 [ICC32] (celles des applications compatibles peuvent simplement passer le
profil ICC sRGB ColorSync pour effectuer la correction de couleur approprie) ;
SGI sous X
appliquer la valeur de gamma trouve /etc/config/system.glGammaVal (la valeur par dfaut
tant 1.70 ; les applications tournant sur Irix 6.2, ou une version suprieure, peuvent simplement passer le
profil ICC sRGB au systme de gestion de couleur) ;
NeXT sous NeXTStep
appliquer un gamma de 2.22.
L'expression "appliquer un gamma" signifie que chacune des valeurs R, G et B doit tre convertie en R'=Rgamma,
G'=Ggamma et B'=Bgamma, avant leur transmission au systme d'exploitation.
Ceci peut se faire trs rapidement en construisant une table de rfrence de 256 valeurs, une seule fois au
lancement du navigateur, ainsi :
for i := 0 to 255 do
raw := i / 255.0;
corr := pow (raw, gamma);
table[i] := trunc (0.5 + corr * 255.0)
end
ce qui vite des calculs compliqus pour chaque attribut de couleur et autrement faramineux au niveau de chaque
pixel.
132
15 Les polices
15.1 Introduction
Pour le rendu visuel du texte d'un document, les caractres (lments comportant une information abstraite)
doivent correspondre avec des glyphes abstraits. Un ou plusieurs caractres peuvent tre reprsents par un ou
plusieurs glyphes abstraits, parfois en fonction du contexte. Un glyphe correspond la reprsentation artistique
d'un caractre abstrait, dans un certain style typographique, sous forme de contours vectoriels ou d'images bitmaps
pouvant tre dessins l'cran ou sur du papier. Une police se compose d'un jeu de glyphes, ceuxci tant fonds
sur un mme squelette pour leur dessin, leur taille, leur aspect et d'autres attributs associs au jeu entier, et d'un
systme de correspondance entre les caractres et ces glyphes abstraits.
Un agent utilisateur visuel doit rpondre aux questions suivantes avant le rendu effectif d'un caractre :
Existetil, directement ou de faon drive, une police spcifie pour ce caractre ?
Estce que l'agent utilisateur dispose de cette police ?
Si c'est le cas, quel(s) glyphe(s) correspond ce caractre ou cette combinaison de caractres ?
Si ce n'est pas le cas, que faudraitil faire ? Faudraitil effectuer une substitution de police ? Peuton
synthtiser cette police ? Peuton la tlcharger sur le Web ?
En CSS1 comme en CSS2, les auteurs peuvent spcifier les caractristiques des polices l'aide d'une batterie de
proprits de police.
Des changements sont intervenus entre CSS1 et CSS2 sur la faon dont un agent utilisateur doit interprter ces
proprits, dans le cas o la police demande n'est pas disponible. En CSS1, toutes les polices taient supposes
prsentes dans le systme de l'utilisateur et uniquement identifies par leur nom. On pouvait spcifier des polices
de rechange l'aide de proprits, mais les agents utilisateurs ne pouvaient offrir d'autres choix l'utilisateur (par
exemple, des polices de style apparent dont aurait pu disposer l'agent utilisateur) que celui des polices gnriques
par dfaut.
En CSS2, les volutions survenues accordent une plus grande libert aux :
auteurs de feuilles de style, pour dcrire les polices que ceuxci souhaitent voir utiliser ;
agents utilisateurs, pour slectionner une police quand celle demande n'est pas immdiatement
disponible.
CSS2 amliore la dtection d'une police correspondante dans le systme de l'utilisateur, introduit la synthse des
polices et leur rendu progressif ainsi que leur tlchargement partir du Web. Ces capacits accrues sont
regroupes sous le vocable 'PoliceWeb'.
Dans le modle de police de CSS2, comme dans celui de CSS1, chaque agent utilisateur dispose d'une "base de
donnes de polices". CSS1 se rfrait celleci sans en fournir le dtail interne. Par contre, CSS2 dfinit les
informations qui y sont contenues et permet aux auteurs d'y contribuer. Ainsi, quand un caractre est sollicit dans
une police donne, l'agent utilisateur, dans un premier temps, identifie celle dans la base de donnes qui
correspond "au mieux" (en fonction de l'algorithme de correspondance de police). Une fois qu'une correspondance
a t trouve, celuici charge les informations la concernant localement ou partir du Web, et peut ainsi afficher
le caractre avec les glyphes appropris.
En fonction de ce modle, nous avons organis la spcification en deux parties. La premire concerne le
mcanisme de spcification de police, avec lequel l'auteur prcise les polices dont celuici souhaitent l'utilisation.
La seconde concerne le mcanisme de slection de police, l'aide duquel l'agent utilisateur identifie et charge la
police qui correspond au mieux aux souhaits de l'auteur.
La manire dont les agents utilisateurs construisent cette base de donnes n'est pas traite dans cette spcification,
l'implmentation de celleci dpendant entre autres du systme d'exploitation, du systme d'affichage des fentres
et des agents utilisateurs euxmmes.
15.2 La spcification de police

La premire phase du mcanisme de police de CSS traite de la faon dont les auteurs spcifient les polices devant
tre employes par l'agent utilisateur. Au premier abord, une faon vidente consisterait utiliser le nom de la
police, une seule chane forme de parties distinctes, par exemple "BT Swiss 721 Heavy Italic".
133

Malheureusement, il n'existe pas de taxonomie bien dfinie ni faisant l'objet d'un consensus gnral pour classer
les polices selon leur nom, les termes qui s'appliquent au nom d'une famille de polices donne pouvant tre
inadquat pour d'autres. Par exemple, le terme 'italic' couramment employ pour dsigner un texte inclin, un tel
texte pouvant tre galement qualifi par les termes Oblique, Pench, Inclin, Cursive ou Kursiv. Dans le mme
ordre d'ide, les noms de police contiennent typiquement des indications sur leur "graisse". L'intrt premier de
ces dnominations consiste dans la distinction des diffrents aspects pris par une police selon qu'elle soit plus ou
moins grasse. Il n'existe pas non plus de signification accepte et universelle pour les noms des graisses, l'usage en
est trs variable. Par exemple, une police considre comme grasse pourrait tre qualifie de Regular, Roman,
Book, Medium, Semi ou DemiBold, Bold,, ou encore Black, en fonction de l'apparence plus ou moins grasse de
la police "normale" dans la mise en page.
Cette absence de dnomination systmatique rend, en gnral, impossible la gnration du dessin d'une police
avec un aspect distinct, comme par exemple la rendre plus grasse.
cause de cela, CSS suit un modle diffrent. Les requtes de polices ne sont pas bases sur un seul nom de
police, mais sur une succession de valeurs de proprits de police. Cellesci sont le fondement du mcanisme de
slection de police de l'agent utilisateur. On peut agir individuellement sur les proprits de police, par exemple
pour augmenter la graisse, le nouveau jeu de valeurs qui en rsulte tant utilis son tour pour effectuer une
nouvelle slection dans la base de donnes de police. Ceci produit des rsultats plus rguliers pour les auteurs de
feuilles de style et les personnes charges de l'implmentation, de meilleure efficacit.
15.2.1 Les proprits de spcification de police
En CSS2, la spcification de police se fait selon ces caractristiques :
La famille de polices
La famille de polices indique laquelle des familles de polices employer pour rendre un texte. C'est un
ensemble de polices, cellesci prvues pour tre combines, leur dessin prsentant des similarits. Un
membre de la famille peut avoir un dessin en italique, un autre en gras, un autre troitis ou encore en
petites capitales. Quelques noms de famille, "Helvetica", "New Century Schoolbook", "Kyokasho ICA
L". Ces noms ne se limitent pas aux caractres latins. On peut regrouper les familles de polices en
catgories : celles de type serif ou sans serif, celles dont l'espacement n'est pas proportionnel, celles qui
ressemblent une criture manuscrite, celles avec un dessin fantaisie, etc.
Le style de police
Le style de police prcise l'aspect dans lequel doit tre rendu le texte, normal, italique ou oblique. La
dsignation italic indique un aspect plus inclin que celui du texte normal, mais pas aussi inclin qu'une
criture manuscrite. La dnomination oblique, une forme penche de l'aspect normal, est plus couramment
employ dans les familles de police sans serif. Ces dfinitions vitant de qualifier une police normale
lgrement penche d'oblique ou une police normale en caractres grecs d'italique ;
La variante de police
La variante de police indique si le texte doit tre rendu avec des glyphes normaux ou avec des glyphes en
petites capitales, pour les caractres en minuscule. Une police donne peut ne comporter que des glyphes
normaux, que des glyphes en petites capitales ou ces deux types en mme temps ; cette proprit est
utilise pour requrir une police approprie et, si celleci contient les deux variantes, en obtenir les
glyphes correspondants ;
Le poids de police
Le poids de police se rfre la graisse, plus ou moins grasse, des glyphes utiliss pour rendre le texte, en
fonction des autres membres de la mme famille de polices ;
L'tirement de police
C'est la quantit de contraction ou d'extension souhaite pour les glyphes utiliss dans le rendu du texte,
en fonction des autres membres de la mme famille de polices ;
La taille de police (ou corps)
Celleci correspond la dimension entre deux lignes de base conscutives, ces dernires spcifies
globalement (en termes de CSS, quand les proprits 'fontsize' et 'lineheight' ont les mmes valeurs).
Pour toutes ces proprits, les valeurs exprimes en 'em' et 'ex' se rfrent la taille de la police de l'lment en
question, l'exception de la proprit 'fontsize', pour laquelle les valeurs dans ces units se rapportent la taille
de la police de l'lment parent. Voir le passage sur les units de longueur pour plus d'informations.
Les proprits de police de CSS dcrivent l'apparence souhaite pour le texte dans le document. l'inverse, les
descripteurs de police dcrivent les caractristiques des polices, de manire retenir une police convenable pour
obtenir l'apparence souhaite. Pour des informations sur la classification des polices, consulter le passage traitant
des descripteurs de police.
134

15.2.2 La famille de polices : la proprit 'fontfamily'
'fontfamily'
Valeur :
Initiale :
S'applique
:
Hrite :
Pourcentage
:
Mdias :
[[ <famillenom> | <famillegnrique> ],]* [<famillenom> | <famillegnrique>] |

inherit
tous les lments
oui
sans objet
visuel
Cette proprit donne une liste, par ordre de priorit, de noms de familles de polices et/ou de noms de familles
gnriques. Pour contourner certaines difficults, une police seule ne contenant pas ncessairement tous les
glyphes pour le rendu de chacun des caractres d'un document, ou des polices tant absentes de certains systmes,
ainsi la proprit permet aux auteurs de spcifier une liste de polices, cellesci de mme style et taille, qui sont
essayes successivement pour vrifier la correspondance d'un glyphe avec un caractre donn. On appelle cette
liste un jeu de polices.
Exemple(s) :
Par exemple, un texte en franais avec des symboles mathmatiques peut ncessiter un jeu de polices de deux
polices, l'une d'entre elles contenant les caractres latins et les chiffres, l'autre contenant les symboles
mathmatiques. Voici un jeu de polices qui conviendrait pour le rendu d'un texte qu'on sait contenir des caractres
latins, japonais et des symboles mathmatiques :
BODY { fontfamily: Baskerville, "Heisi Mincho W3", Symbol, serif }
La police "Baskerville" va fournir les glyphes pour les caractres latins, la police "Heisi Mincho W3", ceux pour
les caractres japonais, la police "Symbol", ceux pour les symboles mathmatiques, et la famille de polices
gnrique 'serif', ceux ventuels d'autres caractres.
La famille de polices gnrique sera utilise si une, ou plusieurs, des polices d'un jeu de polices n'taient pas
disponibles. Bien que certaines polices fournissent un glyphe de substitution pour indiquer un "caractre
manquant", celuici prenant typiquement l'aspect d'un carr, on ne devrait pas considrer ce glyphe comme une
correspondance valide.
Il existe deux types de noms de famille de polices :
<famillenom>
Le nom d'une famille de polices choisi. Dans l'exemple prcdent, "Baskerville", "Heisi Mincho W3" et
"Symbol" sont des noms de famille de polices. Celles dont l'intitul contient des blancs devraient tre
crites entre guillemets. Si on omet les guillemets, chacun des caractres blancs avant et aprs le nom de
la police sont ignors et chaque squence de blancs dans celuici sont convertis en un seul espace ;
<famillegnrique>
On dfinit les familles gnriques suivantes : 'serif', 'sansserif', 'cursive', 'fantasy' et 'monospace'. Voir le
passage traitant des familles de polices gnriques pour leur description. Les noms de famille de polices
gnriques sont des motscls, on ne doit pas les mettre entre guillemets.
On recommande aux auteurs de citer une famille de polices gnrique comme dernire alternative, pour
une meilleure efficacit.
Par exemple :
<HTML>
<HEAD>
<TITLE>Essai de police</TITLE>
BODY { fontfamily: "new century schoolbook", serif }
</STYLE>
</HEAD>
<BODY>
<H1 style="fontfamily: 'Ma propre police', fantasy">Essai</H1>
<P>Quoi de neuf ?
</BODY>
</HTML>
135

Exemple(s) :
On peut utiliser la plus grande richesse de syntaxe des slecteurs de CSS2 pour crer une typographie en fonction
de la langue. Par exemple, certains caractres chinois et japonais partagent le mme code Unicode, bien que les
glyphes obtenus ne soient pas les mmes dans ces deux langues :
*:lang(jajp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(zhtw) { font: 800 14pt/16.5pt "Li Sung", serif }
Ces rgles s'appliquent aux lments dans une langue donne, japonais ou chinois traditionnel, et appellent la
police approprie.
15.2.3 Le style de police : les proprits 'fontstyle', 'fontvariant', 'fontweight' et 'fontstretch'
'fontstyle'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
normal | italic | oblique | inherit

normal
tous les lments
oui
sans objet
visuel
La proprit 'fontstyle' slectionne, parmi les polices d'une famille de polices, celles avec un dessin normal (aussi
appel "roman" ou "upright"), italique et oblique. Les significations des valeurs sont :
normal
Spcifie une police dite normale dans la base de donnes de police de l'agent utilisateur ;
oblique
Spcifie une police dite oblique dans la base de donnes de police de l'agent utilisateur. Les polices dont
le nom contient les mots Oblique, Slanted ou Incline sont typiquement tiquetes 'oblique' dans la base de
donnes de police de l'agent utilisateur. Celles avec ce label ayant pu avoir t obtenues lectroniquement
en inclinant une police normale ;
italic
Spcifie une police dite italique dans la base de donnes de police de l'agent utilisateur, ou, s'il n'y en a
pas, une avec un label 'oblique'. Les polices dont le nom contient les mots Italic, Cursive ou Kursiv seront
typiquement tiquetes 'italic'.
Exemple(s) :
Dans cet exemple, le texte des lments H1, H2 et H3 sera affich avec une police italique et le texte accentu
(EM) ventuel dans les lments H1 avec un dessin normal :
H1, H2, H3 { fontstyle: italic }
H1 EM { fontstyle: normal }
'fontvariant'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
normal | smallcaps | inherit

normal
tous les lments
oui
sans objet
visuel
Dans une police en petites capitales, les glyphes des lettres minuscules ont un aspect similaire aux lettres
majuscules, cependant avec une taille rduite et des proportions lgrement diffrentes. La proprit 'fontvariant'
appelle ce genre de police bicamrale (qui ont deux casses, comme les critures latines). Celleci ne produit
aucun effet visible pour les critures monocamrales (qui n'ont qu'une seule casse, comme la plupart des
systmes d'criture mondiaux). Les significations des valeurs sont :
normal
Spcifie une police qui n'est pas tiquete comme tant en petites capitales ;
smallcaps
Spcifie une police tiquete comme tant en petites capitales. S'il n'y a pas une telle police, les agents
utilisateurs devraient en effectuer la simulation, par exemple en slectionnant une police normale et y
remplaant les lettres minuscules par des majuscules mises l'chelle. En dernier ressort, les lettres
majuscules inchanges d'une police normale peuvent se substituer aux glyphes en petites capitales, ainsi le
136

texte apparatrait entirement en majuscule.
Exemple(s) :
Dans cet exemple, le texte contenu dans un lment H3 apparat en petites capitales, les parties accentues (EM)
en petites capitales italiques :
H3 { fontvariant: smallcaps }
EM { fontstyle: oblique }
Comme cette proprit provoque la transformation du texte en majuscule, les mmes considrations que pour la
proprit 'texttransform' s'appliquent.
'fontweight'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage
:
Mdias :
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
normal
tous les lments
oui
sans objet
visuel
La proprit 'fontweight' spcifie la graisse de la police. Les significations des valeurs sont :
100 900
Ces valeurs forment une squence ordonne, o chacun des nombres indique, pour la police, une graisse
au moins aussi grasse que celle du nombre prcdent ;
normal
quivaut '400' ;
bold
quivaut '700' ;
bolder
Spcifie la graisse suprieure celle assigne une police, cette graisse tant plus grasse que celle hrite
par la police. S'il n'y en a pas, la valeur de graisse de la proprit prend simplement la valeur numrique
suprieure (l'aspect de la police ne changeant pas), moins que la valeur hrite ne soit dj gale '900',
auquel cas la valeur rsultante devient galement '900' ;
lighter
Spcifie la graisse infrieure celle assigne une police, cette graisse tant moins grasse que celle
hrite par la police. S'il n'y en a pas, la valeur de graisse de la proprit prend simplement la valeur
numrique infrieure (l'aspect de la police ne changeant pas), moins que la valeur hrite ne soit dj
gale '100', auquel cas la valeur rsultante devient galement '100'.
Example(s) :
P { fontweight: normal }
/* 400 */
H1 { fontweight: 700 }
/* bold */
BODY { fontweight: 400 }
STRONG { fontweight: bolder } /* 500 si disponible */
Les lments enfants hritent de la valeur calcule pour la graisse.

'fontstretch'
Valeur :
Initiale :
S'applique
:
Hrite :
Pourcentage
:
Mdias :
normal | wider | narrower | ultracondensed | extracondensed | condensed |

semicondensed | semiexpanded | expanded | extraexpanded | ultraexpanded | inherit
normal
tous les lments
oui
sans objet
visuel
La proprit 'fontstretch' slectionne les dessins normal, troitis ou largi dans une famille de polices. Les
valeurs des motscls absolus, du plus troit au plus espac, sont :
1. ultracondensed
137

2. extracondensed
3. condensed
4. semicondensed
5. normal
6. semiexpanded
7. expanded
8. extraexpanded
9. ultraexpanded
Le motcl relatif 'wider' spcifie la valeur d'expansion suprieure celle hrite (sans effet si la valeur hrite est
dj 'ultraexpanded'), l'inverse du motcl relatif 'narrower' celuici spcifiant la valeur de contraction
infrieure celle hrite (sans effet si la valeur hrite est dj 'ultracondensed').
15.2.4 La taille de police : les proprits 'fontsize' et 'fontsizeadjust'
'fontsize'
Valeur :
Initiale :
S'applique :
Hrite :
Percentages:
Media:
<tailleabsolue> | <taillerelative> | <longueur> | <pourcentage> | inherit

medium
tous les lments
oui, la valeur calcule galement
se rapporte la taille de la police du parent de l'lment
visuel
Cette proprit dcrit la taille d'une police spcifie explicitement. Celleci correspond au carr em, un concept
issu de la typographie. Noter que certains glyphes peuvent dborder de leur carr em. Les significations des
valeurs sont :
<tailleabsolue>
Un motcl <tailleabsolue> se rfre une entre de la table des tailles de police, celleci tant dresse
et mise en uvre par l'agent utilisateur. Les valeurs possibles :
[ xxsmall | xsmall | small | medium | large | xlarge | xxlarge ]
Pour un cran de moniteur, on suggre un facteur d'chelle de 1.2 entre les valeurs conscutives de la
table ; si la valeur 'medium' correspond 12pt, la valeur 'large' devrait correspondre 14.4pt. Les facteurs
d'chelle peuvent diffrer selon les mdias considrs. Par ailleurs, l'agent utilisateur devrait prendre en
compte la qualit et la disponibilit des polices au moment du calcul de cette table. Celleci peut aussi
diffrer d'une famille de polices une autre.
Note : En CSS1, on suggrait un facteur d'chelle de 1.5, qui s'est avr trop grand l'usage.
<taillerelative>
Un motcl <taillerelative> s'entend par rapport la table des tailles de police et par rapport la taille de
la police de l'lment parent. Les valeurs possibles :
[ larger | smaller ]
Par exemple, quand l'lment parent a une taille de police de valeur 'medium', l'lment en question ayant
une valeur 'larger', la taille de police rsultante de celuici correspondra 'large'. Si la taille de police de
l'lment parent a une valeur trop loigne d'une des valeurs de la table, l'agent utilisateur est libre
d'effectuer une interpolation entre les deux valeurs qui la circonscrivent ou un arrondi la valeur la plus
proche. L'agent utilisateur peut devoir procder une extrapolation des valeurs de la table quand une
valeur numrique sort du champs des motscls.
<longueur>
Une valeur de longueur spcifie une taille de police absolue (indpendante de la table des tailles de police
de l'agent utilisateur). Les valeurs ngatives ne sont pas admises ;
<pourcentage>
Une valeur en pourcentage spcifie une taille de police absolue par rapport celle de l'lment parent.
Leur emploi, de mme pour les valeurs exprimes en 'em', conduit des feuilles de style plus fiables, en
plein accord avec le principe de la cascade.
La valeur relle, pour cette proprit, peut diffrer de la valeur calcule, la proprit 'fontsizeadjust' ayant une
valeur numrique et certaines tailles de police tant indisponibles.
Les lments enfants hritent de la valeur calcule de 'fontsize' (autrement l'effet de la proprit
'fontsizeadjust' serait combin).
138

Exemple(s) :
P { fontsize: 12pt; }
BLOCKQUOTE { fontsize: larger }
EM { fontsize: 150% }
EM { fontsize: 1.5em }
'fontsizeadjust'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<nombre> | none | inherit

none
tous les lments
oui
sans objet
visuel
Pour les critures bicamrales, la taille apparente et la lisibilit subjectives d'une police dpendent moins de la
valeur de la proprit 'fontsize' que de celle de 'xheight', ou plus utilement, du ratio de ces deux valeurs
(xheight/fontsize), appel valeur d'aspect. Plus grande la valeur d'aspect, plus la police restera lisible dans les
petites tailles. Et inversement, les polices, qui ont une valeur d'aspect plus faible, verront leur lisibilit se dgrader
plus rapidement, partir d'un certain seuil, que celles de plus grande valeur d'aspect. Les simples substitutions de
polices, bases sur le seul critre de la taille de police, peuvent conduire un texte illisible.
Par exemple, la police Verdana, trs rpandue, a une valeur d'aspect de 0.58, c..d. quand la taille de celleci est
de 100 units, sa valeur de hauteurx (xheight) est de 58 units. En comparaison, la police Times New Roman a
une valeur d'aspect de 0.46. La police Verdana restera donc lisible plus longtemps que Times New Roman, la
taille de police diminuant. Inversement, pour une taille donne, Verdana semblera souvent "trop grande" quand
substitue par Times New Roman.
Cette proprit permet de spcifier une valeur d'aspect pour un lment, ce qui prserve la valeur hauteurx de la
premire police choisir dans la liste des polices de substitution. Les significations des valeurs sont :
none
Ne prserve pas la valeur hauteurx de la police ;
<nombre>
Spcifie la valeur d'aspect. Ce nombre concerne la valeur d'aspect de la premire police choisir. Le
facteur dchelle pour les polices disponibles se dtermine selon cette formule :
y(a/a') = c
ce qui correspond :
y
a
a'
c
=
=
=
=
la
la
la
la
valeur
valeur
valeur
valeur
de 'fontsize'
d'aspect de la
d'aspect de la
de 'fontsize'
de la premire police du choix ;

premire police du choix ;
police disponible ;
applique la police disponible.
Exemple(s) :
Par exemple, la police Verdana (valeur d'aspect de 0.58) avec une taille de police 14px spcifie n'tant pas
disponible, une police de substitution avec une valeur d'aspect de 0.46 tant disponible, la taille de police de
celleci serait : 14 * (0.58/0.46) = 17.65px.
L'ajustement de la taille de police intervient lors du calcul de la valeur relle de la proprit 'fontsize'. L'hritage
tant bas sur la valeur calcule, les lments enfants hritent de valeurs sans ajustement.
La premire image cidessous montre plusieurs polices rendues dans le mme corps (11pt 72dpi), avec leur
valeur d'aspect correspondante. Noter que les polices avec une grande valeur d'aspect apparaissent plus grande que
celles avec une valeur d'aspect plus petite. Celles avec une valeur d'aspect trs faible sont illisibles pour cette taille
donne.
139
L'image suivante montre la correction apporte par le facteur d'chelle de 'fontsizeadjust', la police Verdana
tant la "premire du choix". Une fois l'ajustement effectu, les tailles apparentes semblent identiques entre les
polices, bien que la taille relle (en em) puisse varier de plus de 100%. Noter que la proprit 'fontsizeadjust'
tend galement stabiliser les dimensions horizontales des lignes.
140
[Errata 20010625] La proprit 'fontsizeadjust' devraient tre applique galement la premire police du
choix. Ceci ne devrait avoir aucun effet, la valeur de 'fontsizeadjust' tant par dfinition gale au ratio ex/em de
cette premire police du choix. Ceci corrige une omission en relation avec les cas o la proprit est hrite par les
lments enfants de type enligne.
15.2.5 La proprit raccourcie de police : la proprit 'font'
'font'
[ [ <'fontstyle'> || <'fontvariant'> || <'fontweight'> ]? <'fontsize'> [ / <'lineheight'> ]?
Valeur :
<'fontfamily'> ] | caption | icon | menu | messagebox | smallcaption | statusbar | inherit
Initiale :
S'applique tous les lments
:
Hrite :
oui
Percentages:allowed on 'fontsize' and 'lineheight'
141

Mdias :
visuel
La proprit raccourcie 'font', sauf comme indiqu plus loin, sert regrouper les proprits 'fontstyle',
'fontvariant', 'fontweight', 'fontsize', 'lineheight' et 'fontfamily' dans la feuille de style. La syntaxe de
celleci est issue d'une notation typographique traditionnelle pour fixer plusieurs proprits lies aux polices.
Tout d'abord, les valeurs des proprits de police sont toutes rinitialises leur valeur initiale, les proprits
dcrites prcdemment ainsi que 'fontstretch' et 'fontsizeadjust'. Ensuite, les valeurs spcifies explicitement
dans la proprit 'font' sont donnes aux proprits concernes. Voir les dfinitions des proprits pour les valeurs
admises et initiales de cellesci. Pour des raisons de compatibilit, il n'est pas possible, au moyen de cette
proprit 'font', de spcifier des valeurs autres que leur valeur initiale aux proprits 'fontstretch' et
'fontsizeadjust' ; pour ce faire, utiliser directement cellesci.
Exemple(s) :
P
P
P
P
P
P
{
{
{
{
{
{
font:
font:
font:
font:
font:
font:
12pt/14pt sansserif }
80% sansserif }
xlarge/110% "new century schoolbook", serif }
bold italic large Palatino, serif }
normal smallcaps 120%/120% fantasy }
oblique 12pt "Helvetica Nue", serif; fontstretch: condensed }
Dans la deuxime rgle, la taille de police en pourcentage ('80%') se rapporte celle de l'lment parent. Dans la
troisime, le pourcentage de hauteur de ligne ('110%') se rapporte la taille de police de l'lment luimme.
Les trois premires rgles ne spcifiant pas explicitement les valeurs des proprits 'fontvariant' et 'fontweight',
cellesci ont donc leur valeur initiale 'normal'. Noter que le nom de la famille de polices "new century
schoolbook" contenant des blancs, celuici est mis entre guillemets. La quatrime rgle spcifie la valeur 'bold'
pour la proprit 'fontweight', la valeur 'italic' pour 'fontstyle' et, implicitement, la valeur 'normal' pour
'fontvariant'.
La cinquime rgle spcifie les valeurs des proprits individuelles 'fontvariant' ('smallcaps'), 'fontsize' (120%
de la taille de police du parent), 'lineheight' (120% de la taille de police) et 'fontfamily' ('fantasy'). On en dduit
que le motcl 'normal' s'applique aux deux proprits restantes, 'fontstyle' et 'fontweight'.
La sixime rgle spcifie les valeurs des proprits 'fontstyle', 'fontsize' et 'fontfamily', les autres proprits
gardant leur valeur initiale. Puis celleci spcifie la valeur 'condensed' pour la proprit 'fontstretch', ceci ne
pouvant tre ralis au moyen de la proprit raccourcie 'font'.
Les valeurs suivantes concernent les polices de systme :
caption
La police employe pour lgender les contrles (ex. les boutons, les menus droulants, etc.) ;
icon
La police employe pour lgender les icones ;
menu
La police employe dans les menus (ex. les menus droulants et les listes de menus) ;
messagebox
La police employe dans les botes de dialogue ;
smallcaption
La police employe pour tiqueter les contrles de petite taille;
statusbar
La police employe dans les barres de statut de la fentre.
On ne peut spcifier les polices de systme que globalement, c..d. une spcification en une seule fois de la
famille d'une police, de sa taille, de son poids, de son style, etc. Ces valeurs peuvent tre ensuite modifies
individuellement. S'il n'y a pas de police avec les caractristiques requises sur une plateforme donne, l'agent
utilisateur devrait exercer une interprtation adquate (par exemple utiliser une forme rduite de la police dsigne
par la valeur 'caption' pour la valeur 'smallcaption') ou bien lui substituer une police par dfaut. Comme pour les
polices normales, si, pour une police de systme, une quelconque des proprits individuelles n'tait pas
disponible au travers des prfrences de l'utilisateur du systme d'exploitation, ces proprits devraient prendre
leur valeur intiale.
C'est pourquoi cette proprit est "presque" une proprit raccourcie : on ne peut spcifier les polices de systme
qu'avec celleci, et non avec la proprit 'fontfamily'. Ainsi, la proprit 'font' permet un plus grand champs
d'action que la somme de ses sousproprits. Cependant, les proprits individuelles, telle que 'fontweight',
142

peuvent toujours prendre les valeurs donnes par ce moyen, qu'on peut faire varier indpendamment.
Exemple(s) :
BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sansserif }
BUTTON P { font: menu }
BUTTON P EM { fontweight: bolder }
Si, selon exemple, la police employe pour les menus droulants sur un systme donn tait Charcoal en 9pt, avec
un poids de 600, alors les lments P descendants de l'lment BUTTON serait affichs comme si la rgle tait :
BUTTON P { font: 600 9pt Charcoal }
La proprit raccourcie 'font' rinitialisant leur valeur initiale chacune des proprits non spcifie, ces
dclarations auraient produit le mme effet :
BUTTON P {
fontstyle: normal;
fontweight: 600;
fontsize: 9pt;
lineheight: normal;
fontfamily: Charcoal
}
15.2.6 Les familles de polices gnriques

Les familles de polices gnriques sont un mcanisme de repli, un moyen de prserver l'essentiel des intentions de
l'auteur dans le pire des cas, quand aucune des polices demandes ne peut tre slectionne. Pour le meilleur
contrle typographique possible, on ne devrait employer que certains noms de police dans les feuilles de style.
Les cinq familles de polices gnriques sont senses exister dans toutes les implmentations CSS (cellesci ne
correspondent pas forcment cinq polices dtermines). Les agents utilisateurs devraient offrir par dfaut des
choix raisonnables de familles gnriques, exprimant autant que possible les genres de chacune d'elles dans les
limites de la technique.
On recommande que les agents utilisateurs permettent aux utilisateurs de slectionner la police de leur choix pour
faire office de police gnrique.
serif
Les glyphes des polices serifs, tel que le mot est employ en CSS, ont des terminaisons au bout de leurs traits, des
bouts vases ou en pointes, ou plus simplement des terminaisons avec des empattements (y compris des
empattements en pav). Les polices serifs ont typiquement un espacement des lettres proportionnel. Elles
prsentent souvent une plus grande variation entre les pleins et les dlis que les polices appartenant au type
gnrique 'sansserif. En CSS, le terme 'serif' s'applique une police, quelle que soit son criture, bien que
d'autres dnominations soient plus courantes pour d'autres critures, telles que Mincho (japonais), Sung ou Song
(chinois) ou Pathang (coren). Toute police ainsi dcrite peut reprsenter la famille gnrique 'serif'.
Quelques exemples de polices dans cette description :
Polices latines
Polices greques
Polices cyrilliques
Polices hbraques
Polices japonaises
Polices arabes
Polices cherokees
Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia,
Bitstream Cyberbit
Bitstream Cyberbit
Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit,
ER Bukinst
New Peninim, Raanana, Bitstream Cyberbit
Ryumin LightKL, Kyokasho ICA, Futo Min A101
Bitstream Cyberbit
Lo Cicero Cherokee
143

sansserif
Les glyphes sans serifs, tel que le mot est employ en CSS, ont les fins des traits pleins, sans vasement, ni
recoupements ou autres ornements. Les polices sans serifs ont typiquement un espacement des lettres
proportionnel. Elles prsentent en gnral peu de variation entre les pleins et les dlis, compares aux polices
appartenant au type gnrique 'serif'. En CSS, le terme 'sansserif' s'applique une police, quelle que soit son
criture, bien que d'autres dnominations soient plus courantes pour d'autres critures, telles que Gothic
(japonais), Kai (chinois), Totum ou Kodig (coren). Toute police ainsi dcrite peut reprsenter la famille
gnrique 'sansserif'.
MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone
Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Polices greques
Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Polices cyrilliques Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Polices hbraques Arial Hebrew, MS Tahoma
Polices japonaises Shin Go, Heisei Kaku Gothic W5
Polices arabes
MS Tahoma
Polices latines
cursive
Les glyphes des polices cursives, tel que le terme est employ en CSS, ont gnralement des traits qui se
recoupent ou bien un aspect manuscrit plus affirm que le dessin des polices italiques. Les glyphes se touchent en
partie ou compltement, ce qui donne un rsultat plus proche d'une criture manuscrite que celui d'un travail
imprim. Les polices de certaines critures, comme l'arabe, sont presque toujours cursives. En CSS, le terme
'cursive' s'applique une police, quelle que soit son criture, bien que d'autres dnominations sont galement
utilises, telles que Chancery, Brush, Swing et Script.
Polices latines
Polices cyrilliques
Polices hbraques
Polices arabes
Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, ZapfChancery

ER Architekt
Corsiva
DecoType Naskh, Monotype Urdu 507
fantasy
Les polices fantaisie, tel que le terme est employ en CSS, sont principalement dcoratives, contenant toujours les
reprsentations des caractres ( l'inverse des polices Pi ou Picture, qui n'en ont pas). Quelques exemples :
Polices latines Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
monospace
Le critre de dtermination unique d'une police monospace : tous les glyphes ont les mmes dimensions (ce qui
peut donner un rsultat surprenant avec certaines critures, telle l'arabe). L'aspect tant semblable celui obtenu
avec une machine crire manuelle, on les emploie souvent pour transmettre des chantillons de code
informatique.
Polices latines
Polices greques
Polices cyrilliques
Polices japonaises
Polices cherokees
Courier, MS Courier New, Prestige, Everson Mono

MS Courier New, Everson Mono
ER Kurier, Everson Mono
Osaka Monospaced
Everson Mono
15.3 La slection des polices

La seconde phase du mcanisme de police de CSS2 concerne la slection par l'agent utilisateur d'une police base
sur les proprits de police spcifies par l'auteur, sur la disponibilit des polices, etc. Le dtail de l'algorithme de
correspondance de police est prsent cidessous.
144

Quatre faons de slectionner une police, la correspondance par le nom, la correspondance intelligente, la
synthse de police et le tlchargement de police :
la correspondance par le nom
Dans ce cas, l'agent utilisateur utilise une police existante et accessible qui a le mme nom de famille que
la police demande (noter que l'aspect et les dimensions ne correspondent pas forcment quand la police
employe par l'auteur du document et celle du systme de l'utilisateur proviennent de diffrentes
fonderies). L'information de correspondance est restreinte aux proprits de police CSS, dont le nom de
famille. C'est la seule mthode dfinie par CSS1 ;
la correspondance de police intelligente
Dans ce cas, l'agent utilisateur utilise une police existante et accessible dont l'apparence reprsente la
correspondance la plus proche avec celle de la police demande (noter que les dimensions ne
correspondent pas forcment). L'information de correspondance comprend des informations sur le genre
de la police (texte ou symbole), la nature des empattements, le poids, la hauteur des capitales, la hauteur
du x, les hampes, les jambages, l'inclinaison, etc.
la synthse de police
Dans ce cas, l'agent utilisateur cre une police, non seulement d'un aspect trs semblable, mais aussi dont
les dimensions correspondent avec celles de la police demande. L'information de synthse comprend
l'information de correspondance et demande typiquement des valeurs de paramtre plus prcises que
celles employes dans certains schmas de correspondance. En particulier, la synthse requiert des
dimensions prcises, une substitution du caractre par un glyphe et, si toutes les caractristiques du dessin
de la police doivent tre prserves, des informations de position ;
le tlchargement de police
Et finalement, l'agent utilisateur peut ramener une police du Web. Ceci est similaire au chargement
d'images, de sons ou d'applets partir du Web pour une prsentation dans un document donn, et de la
mme faon, ceci peut retarder l'affichage de la page.
Le rendu progressif est une combinaison entre le tlchargement et une des autres mthodes ; cela revient
fournir une police de substitution temporaire (par correspondance nominale, intelligente ou par synthse), ce qui
permet une lecture du contenu, le temps que la police demande soit tlcharge. Quand cette opration est
couronne de succs, la police temporaire est remplace par cette police externe, heureusement sans avoir
redessiner la page.
Note : Un rendu progressif requiert les mesures de cette police au pralable, pour viter le redploiement du
contenu au moment o, une fois charge, celleci est rendue. Cette information tant consquente, on ne devrait
la spcifier, dans un document, au plus qu'une seule fois par police.
15.3.1 Les descriptions des polices et @fontface
La description de police fait la lien entre la spcification de police d'un auteur et les donnes de police, ce sont
les informations ncessaires au formatage du texte et au rendu des glyphes abstraits auxquels correspondent les
caractres, en fait, leurs contours variables ou leurs dessins bitmaps. Les polices sont rfrences par les
proprits des feuilles de style.
La description de police s'ajoute la base de donnes des polices, puis est utilise pour la slection des donnes de
la police concerne. Cette description contient des descripteurs, tels que l'emplacement des donnes d'une police
sur le Web et les caractrisations de cellesci. Les descripteurs de police sont galement ncessaires pour faire
correspondre les proprits de police de la feuille de style avec les donnes d'une police particulire. La quantit
de renseignements d'une description de police peut varier du simple nom d'une police jusqu' la liste des
dimensions des glyphes.
Les descripteurs de police sont de trois types :
1. ceux qui font le lien entre l'utilisation des polices par CSS et la description de police (ceuxci ont le
mme nom que la proprit de police correspondante) ;
2. ceux qui ont un URI pointant vers les donnes d'une police ;
3. ceux qui, tendant la caractrisation d'une police, font le lien entre la description d'une police et les
donnes de celleci.
Toutes les descriptions de police se font avec une rgleat @fontface. En voici la forme gnrale :
@fontface { <policedescription> }
L'expression <policedescription> ayant la forme :
145

descripteur: valeur;
[...]
Chacune des rgles de @fontface spcifie la valeur pour chacun des descripteurs de police, soit implicitement
soit explicitement. Ceux dont les valeurs ne sont pas explicites prenant la valeur initiale dfinie pour chacun des
descripteurs dans cette spcification. Ces descripteurs ne s'appliquent que dans le contexte de la rgle @fontface
dans laquelle ceuxci sont dfinis, et non aux lments dans le langage du document. Ainsi, aucunes notions de
descripteurs s'appliquant des lments, ou de valeurs hrites par des lments enfants, n'interviennent.
Les descripteurs de police disponibles sont traits plus loin dans cette spcification.
Par exemple ici, la police 'Robson Celtic' est dfinie et rfrence dans une feuille de style incorpore un
document HTML :
<HTML>
<HEAD>
<TITLE>Essai de police</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print">
@fontface {
fontfamily: "Robson Celtic";
src: url("http://site/fonts/robcelt")
}
H1 { fontfamily: "Robson Celtic", serif }
</STYLE>
</HEAD>
<BODY>
<H1> Ce titre s'affiche dans la police Robson Celtic</H1>
</BODY>
</HTML>
La feuille de style (dans un lment STYLE) contient une rgle CSS qui enjoint l'utilisation de la famille de
polices 'Robson Celtic' tous les lments H1.
Une implmentation CSS1 consulterait le systme pour y trouver une police dont le nom de la famille et d'autres
proprits correspondent 'Robson Celtic' et, en cas d'chec, utiliserait la police serif de repli (celleci ayant une
existence dfinie) de l'agent utilisateur .
Une implmentation CSS2 examinerait d'abord les rgles contenues dans @fontface en qute d'une description
de police dfinissant 'Robson Celtic'. Dans l'exemple cidessus, une rgle correspond. Bien que cette rgle ne
recle que peu de donnes sur la police, celleci donne un URI qui pointe sur une police tlchargeable pour le
rendu du document. Les polices tlchargeables ne devraient pas tre disponibles pour d'autres applications. Si
aucune correspondance n'est obtenue via @fontface, l'agent utilisateur essaiera d'en trouver une comme l'aurait
fait une implmentation CSS1.
Noter que, si la police 'Robson Celtic' avait t installe dans le systme, l'agent utilisateur aurait ajout une entre
dans la base de donnes de police, tel que dcrit dans l'algorithme de correspondance de police. Dans l'exemple
prcdent, cette correspondance aurait t retenue en premier, coupant court au tlchargement de la police.
Les implmentations CSS1 qui ne reconnaissent pas la rgle @fontface, rencontrant l'accolade ouvrante, vont en
ignorer le contenu jusqu' l'accolade fermante. Cette rgleat se conformant aux obligations de compatibilit
ascendante de CSS. Les interprteurs peuvent ignorer ces rgles sans provoquer d'erreurs.
Cette sparation entre les descripteurs de police et leurs donnes prsente un intrt, audel de pouvoir effectuer
une slection et/ou une substitution de police. La protection des donnes et les restrictions exerces sur leur copie,
pour les descripteurs de police, peuvent tre beaucoup moins strictes que pour les donnes d'une police entire.
Ainsi, on peut installer la dfinition de police localement, ou au moins dans un cache local si la police est appele
partir d'une feuille de style commune ; ceci vitant d'avoir tlcharger la dfinition de police complte, c..d.
plus d'une fois par police nomme.
Quand un descripteur de police apparat plusieurs reprises, le dernier survenu l'emporte, les autres devant tre
ignors.
galement, tout descripteur non reconnu ou inutile pour un agent utilisateur doit tre ignor. Des versions
ultrieures de CSS pourraient introduire des descripteurs supplmentaires pour l'amlioration de la substitution de
police, de leur correspondance ou de leur synthse.
146

15.3.2 Les descripteurs de slection de police : 'fontfamily', 'fontstyle', 'fontvariant',
'fontweight', 'fontstretch' et 'fontsize'
Les descripteurs suivants ont les mmes noms que ceux des proprits de police correspondantes de CSS2,
cellesci admettant une valeur seule ou une liste de valeurs spares par des virgules.
Les valeurs contenues dans cette liste sont les mmes que celles de la proprits correspondante CSS2, sauf
mention explicite. Quand il n'y a qu'une seule valeur, celleci doit correspondre. Quand c'est une liste, chacun des
items de celleci peut correspondre. Quand on omet le descripteur dans une rgle @fontface, c'est la valeur
initiale de celuici qui est considre.
'fontfamily' (Descripteur)
Valeur :
[ <famillenom> | <famillegnrique> ] [, [<famillenom> | <famillegnrique> ]]*
Initiale :
Mdias : visuel
C'est le descripteur du nom de famille d'une police prenant les mmes valeurs que pour la proprit 'fontfamily'.
'fontstyle' (Descripteur)
Valeur :
all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]*
Initiale :
all
Mdias : visuel
C'est le descripteur du style d'une police prenant les mmes valeurs que pour la proprit 'fontstyle', tant admise
de plus, une liste de valeurs spares par des virgules.
'fontvariant' (Descripteur)
Valeur :
[normal | smallcaps] [,[normal | smallcaps]]*
Initiale :
normal
Mdias : visuel
C'est une indication CSS pour une variante avec petites capitales d'une police. Ce descripteur prenant les mmes
valeurs que pour la proprit 'fontvariant', tant admise de plus, une liste de valeurs spares par des virgules.
Note : Les polices cyrilliques pryamo peuvent tre libelles petites capitales pour la proprit 'fontvariant',
ceci donnant un rsultat plus consistent avec les polices latines (et de mme, pour celle kursiv l'accompagnant,
libelle italique pour la proprit'fontstyle', pour des raisons identiques).
'fontweight' (Descripteur)
Valeur all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200
:
| 300 | 400 | 500 | 600 | 700 | 800 | 900]]*
Initiale all
:
Mdias visuel
:
C'est le descripteur du poids d'une police par rapport aux autres polices de la mme famille. Celuici prenant les
mmes valeurs que pour la proprit 'fontweight'. Avec trois exceptions :
1. les motscls relatifs (bolder et lighter) ne sont pas admis ;
2. on admet une liste de valeurs spares par des virgules, quand les polices contiennent plusieurs graisses ;
3. on admet le motcl supplmentaire 'all', signifiant une correspondance de la police pour toutes les
graisses possibles, soit parce que celleci contient plusieurs graisses, soit parce qu'elle n'en contient
qu'une seule.
'fontstretch' (Descripteur)
all | [ normal | ultracondensed | extracondensed | condensed | semicondensed |
Valeur semiexpanded | expanded | extraexpanded | ultraexpanded ] [, [ normal | ultracondensed |
:
extracondensed | condensed | semicondensed | semiexpanded | expanded | extraexpanded |
ultraexpanded] ]*
Initiale normal
:
Mdias visuel
:
147

C'est une indication CSS de la quantit de contraction ou d'expansion d'une police, par rapport aux autres polices
de la mme famille. Ce descripteur prenant les mmes valeurs que pour la proprit 'fontstretch', avec ces
exceptions :
les motscls relatifs (wider et narrower) ne sont pas admis ;
on admet une liste de valeurs spares par des virgules ;
le motcl 'all' est admis.
'fontsize' (Descripteur)
Valeur :
all | <longueur> [, <longueur>]*
Initiale :
all
Mdias : visuel
C'est le descripteur des tailles fournies par cette police. Seules les valeurs exprimes avec des units de longueur
absolues sont admises, en constraste de la proprit 'fontsize' qui admet la fois des longueurs et des tailles
relatives et absolues. Une liste de valeurs spares par des virgules est admise.
La valeur initiale 'all' convient pour la plupart des polices variables, c'est pourquoi ce descripteur s'utilise
principalement dans une rgle @fontface avec des polices bitmaps ou avec des polices variables devant tre
rendues et dessines dans une fourchette de tailles de police restreinte.
15.3.3 Le descripteur de qualification des donnes de police : 'unicoderange'
Ce descripteur, facultatif dans une dfinition de police, est employ pour viter la vrification ou le
tlchargement d'une police n'ayant pas suffisamment de glyphes pour le rendu d'un caractre donn.
'unicoderange' (Descripteur)
Valeur :
<tendueunicode> [, <tendueunicode>]*
Initiale :
U+07FFFFFFF
Mdias : visuel
C'est le descripteur de l'tendue des caractres ISO 10646 couverte par la police.
Les valeurs de <tendueunicode> sont exprimes avec des nombres hexadcimaux prfixs de "U+", ceuxci
correspondant aux positions du code du caractre dans ISO 10646 ([ISO10646]).
Par exemple, U+05D1 reprsente le caractre ISO 10646 'Lettre bet en hbreu'. Pour les valeurs hors du Plan
Plurilingue de Base [ndt. Basic Multilingual Plane (BMP)], on prfixe avec des digits supplmentaires, galement
hexadcimaux, ceuxci correspondant au numro du plan, ainsi : l'expression U+A1234 correspond au caractre
situ dans le Plan 10 la position de code hexadcimal 1234. Au moment de la rdaction de ce texte, aucun
caractre n'a encore t assign en dehors du Plan Plurilingue de Base. Les zros entte (ex. 0000004D) sont
admis, mais non requis.
La valeur initiale de ce descripteur couvre non seulement le Plan Plurilingue de Base, qu'on pourrait exprimer par
U+0FFFF, mais aussi le rpertoire entier de ISO 10646. Ainsi, cette valeur initiale signifie que la police peut
avoir des glyphes pour des caractres partout dans l'espace ISO 10646. Quand on spcifie une valeur pour le
descripteur 'unicoderange', on optimise une indication de recherche, en restreignant l'tendue dans laquelle une
police donne peut avoir des glyphes pour les caractres concerns. La police n'a pas besoin d'tre entirement
parcourue pour rechercher des caractres situs hors de cette tendue.
On peut crire les valeurs avec un nombre quelconque de chiffres. Pour des nombres seuls, le caractre joker '?'
est sens signifier 'toute valeur', ce qui cre une tendue entre les positions des caractres. Ainsi, avec un seul
nombre :
unicoderange: U+20A7
pas de joker ('?'), ceci indique la position d'un seul caractre (le symbole montaire de la peseta
espagnole) ;
unicoderange: U+215?
un joker, couvre l'tendue allant de la position 2150 215F (les fractions) ;
unicoderange: U+00??
deux jokers, couvre l'tendue allant de la position 0000 00FF (Latin1) ;
unicoderange: U+E??
deux jokers, couvre l'tendue allant de la position 0E00 0EFF (criture laotienne).
148

Dans ce format, on peut combiner une paire de nombres avec le caractre tiret pour signifier une tendue plus
large. Par exemple :
unicoderange: U+AC00D7FF
l'tendue va de la position AC00 D7FF (la zone pour les syllabes Hangul).
On peut spcifier plusieurs tendues discontinues, spares par des virgules. Comme pour les autres listes de ce
genre en CSS, les blancs survenant avant ou aprs la virgule sont ignors. Par exemple :
unicoderange: U+3703FF, U+1F??
Ceci recouvre l'tendue allant des positions 0370 03FF (Grec moderne) plus 1F00 1FFF (Grec ancien
polytonique) ;
unicoderange: U+3000303F, U+3100312F, U+32??, U+33??, U+4E009FFF, U+F9000FAFF,
U+FE30FE4F
L'un des pire cas en terme de prolixit, indiquant que cette police (extmement grande) ne contient que
des caractres chinois ISO 10646, excluant tous les caractres seulement japonais ou corens. L'tendue
de celleci va des positions 3000 303F (symboles et ponctuations chinoisjaponaiscoren), plus 3100
312F (Bopomofo), plus 3200 32FF (lettres et mois enclos c.j.c.), plus 3300 33FF (zones de
compatibilit c.j.c.), plus 4E00 9FFF (idogrammes unifis c.j.c.), plus F900 FAFF (idogrammes de
compatibilit c.j.c.) et enfin FE30 FE4F (formes de compatibilit c.j.c.).
Une reprsentation plus courante pour une police chinoise typique serait :
unicoderange: U+300033FF, U+4E009FFF
unicoderange: U+11E00121FF
Cette police couvre les pictogrammes aztques, en cours d'enregistrement, allant des positions 1E00
21FF dans le Plan 1 ;
unicoderange: U+1A001A1F
Cette police couvre l'Ogham irlandais, en cours d'enregistrement, allant des positions 1A00 1A1F.
15.3.4 Le descripteur des valeurs numriques : 'unitsperem'
Ce descripteur spcifie le nombre d'units par em ; ces units peuvent tre utilises par plusieurs autres
descripteurs pour exprimer diverses longueurs, ainsi le descripteur'unitsperem' est requis quand d'autres
dpendent de celuici.
'unitsperem' (Descripteur)
Valeur :
<nombre>
Initiale :
indfinie
Mdias : visuel
C'est le descripteur du nombre des units de coordonnes du carr em, la taille de la grille de dessin sur laquelle
les glyphes sont placs.
15.3.5 Le descripteur de rfrencement : 'src'
Ce descripteur est requis pour rfrencer les donnes de police relles, que cellesci soient tlchargeables ou
installes localement.
'src' (Descripteur)
Valeur [ <uri> [format(<chane> [, <chane>]*)] | <policenom> ] [, <uri> [format(<chane> [,
:
<string>]*)] | <policenom> ]*
Initiale indfinie
:
Mdias visuel
:
C'est une liste de polices, par ordre de priorit, leurs noms spars par une virgule, ces polices tant externes et/ou
installes localement. Les rfrences externes pointent sur les donnes des polices, et sont requises si la
PoliceWeb doit tre tlcharge. La ressource de police peuttre un sousensemble de la police dsigne, cette
ressource, par exemple, pouvant ne contenir que les glyphes ncessaires pour une page donne, ou un jeu de
pages.
Une rfrence externe consiste en un URI, suivi par un indice facultatif concernant le format de la ressource de
police dsigne par l'URI, cette indication devrait tre utilise par les agents utilisateurs pour leur viter de
149

requrir des formats de police inutilisables par eux. Comme pour toute rfrence hypertextes, d'autres formats
pouvant tre disponibles, l'agent utilisateur sachant par avance ce qu'il trouvera cette adresse, leur lecture de cet
indice serait sans doute plus fiable qu'une interprtation d'un suffixe de fichier d'un URI.
L'indice de format est constitu d'une liste de chanes, spares par une virgule, reprsentant des formats de
polices rpandus. L'agent utilisateur honorera le nom des formats de police qu'il reconnait et vitera de tlcharger
les polices dont les noms de format lui sont inconnus.
Voici une premire liste de noms de formats, dfinis dans cette spcification, et qui est reprsentative des formats
utiliss par les implmentations sur diverses plateformes :
Chane
Format de police
Exemples d'extensions courantes
"truedocpfr"
TrueDoc Portable Font Resource
.pfr
"embeddedopentype" Embedded OpenType
.eot
"type1"
PostScript Type 1
.pfb, .pfa
"truetype"
TrueType
.ttf
"opentype"
OpenType, y compris TrueType Open .ttf
"truetypegx"
TrueType avec des extensions GX
"speedo"
Speedo
"intellifont"
Intellifont
Comme pour les autres URIs en CSS, ceuxci pouvant tre partiels, auquel cas un URI se rsoud par rapport
l'endroit o se trouve la feuille de style qui contient la rgle @fontface.
L'expression <policenom> reprsente le nom entier d'une police installe localement. The nom entier de la
police correspond celui report par le systme d'exploitation, c'est certainement le nom le plus utilis dans les
feuilles de style de l'utilisateur, dans celle par dfaut de l'agent utilisateur ou probablement dans celles de l'auteur
dans un rseau interne. Des indications, telles que bold, italic ou underline, sont souvent rajoutes pour
diffrencier les polices d'une famille. Pour plus d'informations sur les noms entiers des polices, voir les notes plus
bas.
La notation pour <policenom> consiste en le nom entier de la police, celuici doit tre mis entre guillemets, car
le nom peut contenir n'importe quel caractre, y inclus des espaces et des signes de ponctuation, et doit aussi tre
plac l'intrieur des chanes "local(" et ")".
Exemple(s) :
src: url("http://foo/bar")
un URI complet et aucun indice sur le(s) format(s) de police disponible cet endroit ;
src: local("BT Century 751 No. 2 Semi Bold Italic")
une rfrence une police donne, installe localement ;
src: url("../fonts/bar") format("truedocpfr")
un URI partiel vers une police disponible au format TrueDoc ;
src: url("http://cgibin/bar?stuff") format("opentype", "intellifont")
un URI complet, dans ce cas vers un script, lequel peut gnrer deux formats diffrents OpenType et
Intellifont ;
src: local("T26 Typeka Mix"), url("http://site/magdaextra")
format("type1")
deux possibilits : d'abord une police locale et ensuite une police tlchargeable au format Type 1.
L'accs aux polices locale se fait via <policenom>. Le nom de la police n'est rellement ni unique, ni
indpendant de la plateforme ou du format de police, mais c'est pour le moment la meilleure faon d'identifier les
donnes des polices locales. On peut affiner cette mthode, avec le nom de la police, en fournissant une indication
sur les glyphes complmentaires requis. Ceci en indiquant des tendues pour les positions de caractres ISO
10646 dans lesquelles la police fournit certains glyphes (voir 'unicoderange').
15.3.6 Les descripteurs de correspondance : 'panose1', 'stemv', 'stemh', 'slope', 'capheight',
'xheight', 'ascent' et 'descent'
Ces descripteurs, facultatifs dans une dfinition CSS2, peuvent tre utiliss pour une correspondance de police
intelligente ou pour l'ajustement de la taille d'une police.
150

'panose1' (Descripteur)
Valeur :
[<entier>]{10}
Initiale :
0000000000
Mdias : visuel
C'est le descripteur du nombre Panose1, consistant en dix entiers dcimaux, spars par un blanc. Ce descripteur
n'admet pas de liste avec une sparation par virgule, car le systme Panose1 indique une correspondance sur un
ensemble de valeurs. La valeur initiale est zro, signifiant "tous", pour chaque chiffre PANOSE ; pour cette
valeur, toutes les polices vont correspondre au nombre Panose. On recommande fortement l'utilisation du
descripteur Panose1 pour les polices latines. Voir le dtail l'Appendice C.
'stemv' (Descripteur)
Valeur :
<nombre>
Initiale :
indfinie
Mdias : visuel
C'est le descripteur de l'paisseur de tige verticale d'une police. Pour une valeur indfinie, le descripteur
n'intervient pas dans la dtermination d'une correspondance. Quand on l'utilise, il faut aussi employer le
descripteur 'unitsperem'.
'stemh' (Descripteur)
Valeur :
<nombre>
Initiale :
indfinie
Mdias : visuel
C'est le descripteur de l'paisseur de tige horizontale d'une police. Pour une valeur indfinie, le descripteur
'slope' (Descripteur)
Valeur:
<nombre>
Initiale :
0
Mdias : visuel
C'est le descripteur de l'angle du trait vertical d'une police.
'capheight' (Descripteur)
Valeur :
<nombre>
Initiale :
indfinie
Mdias : visuel
C'est le descripteur de la hauteur des glyphes majuscules d'une police. Pour une valeur indfinie, le descripteur
'xheight' (Descripteur)
Valeur :
<nombre>
Initiale :
indfinie
Mdias : visuel
C'est le descripteur de la hauteur des glyphes minuscules d'une police. Pour une valeur indfinie, le descripteur
descripteur 'unitsperem'. Ce descripteur peut tre trs utile conjointement avec la proprit 'fontsizeadjust',
car le calcul de la valeur d'aspect de la police candidate requiert la fois la taille et valeur hauteurx de celleci,
de ce fait, on recommande l'emploi de ce descripteur.
'ascent' (Descripteur)
Valeur :
<nombre>
Initiale :
indfinie
Mdias : visuel
C'est le descripteur de la hauteur maximale sans accent d'une police. Pour une valeur indfinie, le descripteur
151

'descent' (Descripteur)
Valeur :
<nombre>
Initiale :
indfinie
Mdias : visuel
C'est le descripteur de la profondeur maximale sans accent d'une police. Pour une valeur indfinie, le descripteur
15.3.7 Les descripteurs de synthse : 'widths', 'bbox' et 'definitionsrc'
La synthse d'une police demande au moins une correspondance avec les dimensions de la police spcifie. Pour
une synthse, ces mesures doivent donc tre disponibles. De la mme faon que pour le rendu progressif, qui
requiert une communication pralable de ces mesures, pour viter que la page soit redessine quand le
tlchargement de la police demande est termin. Bien que les descripteurs suivants soient optionnels dans une
dfinition CSS2, certains sont obligatoires pour une synthse (ou un rendu progressif russi) souhaite par
l'auteur. Ds que la police demande est disponible, celleci devrait se substituer la police temporaire. Chacun
des descripteurs mis en uvre seront utiliss pour une meilleure, ou plus rapide, approximation de la police
attendue.
Les plus important de ces descripteurs sont 'widths' et 'bbox', leur utilisation prvenant le phnomne de
dplacement de texte au moment de la disponibilit de la police. De plus, on peut utiliser le jeu des descripteurs de
correspondance et parfaire la synthse de la police en question.
'widths' (Descriptor)
Valeur :
[<tendueunicode> ]? [<nombre> ]+ [,[<tendueunicode> ]? <nombre> ]+]
Initiale :
indfinie
Mdias : visuel
C'est le descripteur des dimensions de glyphe. La valeur consiste en une liste de valeurs <tendueunicode>,
spares par des virgules, chacune de ces valeurs suivies par une ou plusieurs dimensions de glyphes. Quand on
l'utilise, il faut aussi employer le descripteur 'unitsperem'.
Quand on omet de spcifier une valeur <tendueunicode>, Une tendue de U+07FFFFFFF est infre, celleci
couvre l'ensemble des caractres et leurs glyphes. S'il n'y a pas assez de dimensions de glyphes, on rplique la
dernire de la liste afin de couvrir l'tendue concerne. S'il y en a trop, celles en trop sont ignores.
Exemple(s) :
Par exemple :
widths: U+4E004E1F 1736 1874 1692
widths: U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792
1815 1848 1870 1492 1715 1745 1584 1992 1978 1770
Dans le premier exemple, on a une tendue de 32 caractres, de 4E00 4E1F. Le glyphe correspondant au premier
caractre (4E00) a une dimension de 1736, le deuxime une dimension de 1874 et le troisime une dimension de
1692. Comme des dimensions manquent, la dernire est rplique pour couvrir le reste de l'tendue spcifie.
Dans le second exemple, on a une seule dimension pour toute une tendue de 256 glyphes, puis des dimensions
explicites pour une tendue de 16 glyphes.
Ce descripteur ne peut pas dcrire plusieurs glyphes correspondant tous un seul caractre ou des ligatures de
plusieurs caractres. Ainsi, celuici peut seulement tre employ avec des critures qui n'ont pas de formes
contextuelles ni de ligatures obligatoires. Nanmoins utilement dans ces cas. Les critures qui requirent une
correspondance d'unplusieurs ou de plusieursplusieurs des caractres vers les glyphes, ne peuvent pas pour
le moment employer ce descripteur pour la synthse de police, mais on peut toujours utiliser le tlchargement de
police ou la correspondance intelligente avec cellesci.
'bbox' (Descripteur)
<nombre>, <nombre>, <nombre>, <nombre>
Valeur :
Initiale :
indfinie
Mdias : visuel
C'est le descripteur de la bote de circonscription maximale d'une police. La valeur consiste en une liste
d'exactement quatre nombres, spares par une virgule, qui indique les coordonnes de cette bote pour la police
152

entire, dans l'ordre, horizontale x gauche basse, verticale y gauche basse, horizontale x droite haute et verticale y
droite haute.
'definitionsrc' (Descripteur)
Valeur :
<uri>
Initiale :
indfinie
Mdias : visuel
Les descripteurs de police peuvent se trouver dans la dfinition de police d'une feuille de style ou bien dans une
ressource de dfinition de police distincte, identifie par un URI. Cette dernire possibilit peut rduire le traffic
sur le rseau quand plusieurs feuilles de style se rfrent aux mmes polices.
15.3.8 Les descripteurs d'alignement : 'baseline', 'centerline', 'mathline' et 'topline'
Ces descripteurs facultatifs rglent l'alignement de diffrentes lignes d'critures les unes avec les autres.
'baseline' (Descripteur)
Valeur :
<nombre>
Initiale :
0
Mdias : visuel
C'est le descripteur de la ligne de base infrieure d'une police. Quand on l'utilise avec une autre valeur que celle
par dfaut (0), il faut aussi employer le descripteur 'unitsperem'.
'centerline' (Descripteur)
Valeur :
<nombre>
Initial:
indfinie
Mdias : visuel
C'est le descripteur de la ligne de base centrale d'une police. Si la valeur est indfinie, l'agent utilisateur peut en
produire une, suivant diverses manires, par exemple le point intermdiaire entre les valeurs de 'ascent' et
'descent'. Quand on l'utilise, il faut aussi employer le descripteur 'unitsperem'.
'mathline' (Descripteur)
Valeur :
<nombre>
Initiale :
indfinie
Mdias : visuel
C'est le descripteur de la ligne de base mathmatique d'une police. Si la valeur est indfinie, l'agent utilisateur peut
emprunter celle de la ligne de base centrale. Quand on l'utilise, il faut aussi employer le descripteur
'unitsperem'.
'topline' (Descripteur)
Valeur :
<nombre>
Initiale :
indfinie
Mdias : visuel
C'est le descripteur de la ligne de base suprieure d'une police. Si la valeur est indfinie, l'agent utilisateur peut
utiliser une valeur approchante, telle que celle de 'ascent'. Quand on l'utilise, il faut aussi employer le descripteur
'unitsperem'.
15.3.9 Exemples
Example(s):
Soit cette liste de polices :
Swiss 721 light
Swiss 721
Swiss 721 medium
Swiss 721 heavy
Swiss 721 black
Swiss 721 Condensed
light & light italic

roman, bold, italic, bold italic
medium & medium italic
heavy & heavy italic
black, black italic, & black #2
roman, bold, italic, bold italic
153

Swiss 721 Expanded roman, bold, italic, bold italic
On pourrait utiliser les descriptions de police suivantes pour leur tlchargement :
@fontface {
fontfamily: "Swiss 721";
src: url("swiss721lt.pfr"); /* Swiss 721 light */
fontstyle: normal, italic;
fontweight: 200;
}
@fontface {
src: url("swiss721.pfr");
/* Swiss 721 */
}
@fontface {
src: url("swiss721md.pfr"); /* Swiss 721 medium */
fontweight: 500;
}
@fontface {
src: url("swiss721hvy.pfr"); /* Swiss 721 heavy */
fontweight: 700;
}
@fontface {
src: url("swiss721blk.pfr"); /* Swiss 721 black */
fontweight: 800,900;
/* un point intressant, remarquer que la graisse
900 italique n'existe pas */
}
@fontface {
src: url(swiss721.pfr);
/* Swiss 721 Condensed */
fontstretch: condensed;
}
@fontface {
src: url(swiss721.pfr);
/* Swiss 721 Expanded */
fontstretch: expanded;
}
15.4 Les caractristiques des polices

15.4.1 Introduction aux caractristiques des polices
Dans cette partie, on numre les caractristiques de police qui prsentent un intrt pour, du ct client, la
correspondance et la synthse de police et pour le tlchargement de police, en rapport avec les plateformes
htrognes ayant un accs au Web. Ces informations peuvent concerner tout mdia utilisant des polices sur le
Web, les donnes de police n'tant pas incorpores dans le mdia en question.
Ces caractristiques de police ne sont pas propres aux feuilles de style, chacune d'entre elles, en CSS, tant dcrite
par un descripteur de police. Ces caractristiques pourraient tout autant tre relies aux nuds VRML, ou aux
structures d'application CGM, ou une API Java ou encore d'autres langages de feuille de style. Ramenes par
un mdia et stockes dans un cache proxy, les polices pourraient tre rutilises par un autre mdia, ce qui permet
une conomie sur les temps de tlchargement et sur la bande passante, pourvu que le systme de caractrisation
des polices soit cohrent.
Voici une liste non exhaustive pour de tels mdias :
Formats vectoriels en 2D
Computer Graphics Metafile
Simple Vector Format
Formats graphiques en 3D
VRML
3DMF
Technologies d'incorporation d'objets
Java
ActiveX
Obliq
154

15.4.2 Le nom entier d'une police
C'est le nom entier d'une police donne, dans une famille de polices. Celuici comprend typiquement des
qualificatifs textuels non standards ou des ornements rajouts au nom de la famille de polices. Il peut galement
inclure le nom de la fonderie, ou une abrviation de celleci, souvent placs au dbut du nom de la famille. On
utilise ce nom seulement pour se rfrer aux polices installes localement, car, du fait de ces rajouts, celuici peut
varier d'une plateforme l'autre. On doit le mettre entre guillemets.
Par exemple, le nom de famille, pour une police TrueType et PostScript, peut diffrer selon l'utilisation des
caractres espace, de la ponctuation et des abrviations de certains mots (par exemple pour satisfaire aux
contraintes de longueur des noms de certains systmes ou interprteurs d'imprimantes). Par exemple, les espaces
ne sont pas admis dans les noms pour PostScript, tout en tant courants dans les noms entiers de police. La table
des noms de police TrueType peut galement contenir les noms PostScript, ceuxci ne comportant pas d'espaces.
Le nom de la dfinition de police revt une certaine importance, dans la mesure o celuici fait le lien vers
chacune des polices installes localement. Il est important que le nom soit fiable pour respecter, la fois
l'indpendance de la plateforme et celle de l'application. C'est pour cette raison que le nom ne devrait pas tre
propre une application ou un langage.
Une solution idale serait de disposer d'un nom unique pour identifier chaque collection de donnes de police.
Ceci n'existe pas dans les faits. Les polices de mme nom pouvant varier selon un certain nombre de descripteurs.
Certains d'entre eux, concernant les diffrences entre glyphes complmentaires d'une police, sont insignifiants
quand les glyphes ncessaires sont compris dans celleci. D'autres, concernant les diffrences de dimensions,
rendent incompatibles ces polices de mme nom. Il semble impossible de dterminer une rgle qui identifierait les
incompatibilits coup sr, et en mme temps, qui n'empcherait pas d'utiliser une copie locale des donnes d'une
police donn, celleci convenant parfaitement. C'est pourquoi, seule l'tendue des caractres ISO 10646 sera
utilise pour la validation des correspondances sur un nom de police.
Un des buts premiers, pour le nom d'une police dans une dfinition de police, tant de permettre l'agent
utilisateur de dterminer s'il existe une copie locale des donns de cette police, ce nom doit apparatre dans toutes
les copies lgitimes des donnes de celleci. Autrement, ceci gnrerait un traffic superflu sur le Web, induit par
une correspondance rate avec une copie locale.
15.4.3 Les units de coordonne dans le carr em
Certaines valeurs, comme les dimensions, sont exprimes dans des units qui se rapportent un carr
hypothtique, la hauteur de celuici reprsentant la distance souhaite entre deux lignes de texte dans la mme
taille. Ce carr, appel carr em, correspond la grille dans laquelle s'inscrivent les contours d'un glyphe. La
valeur de ce descripteur donne le nombre d'units qui composent le carr em. En exemple, des valeurs courantes :
250 (Intellifont), 1000 (Type 1) et 2048 (TrueType, TrueType GX et OpenType).
Sans spcification de cette valeur, il devient impossible de connatre la signification des dimensions d'une police.
Par exemple, une police a des glyphes minuscules d'une hauteur 450, une autre des glyphes encore plus petits, leur
hauteur tant de 890. Les nombres reprsentent en fait des fractions, ainsi pour la premire police ce serait
450/1000, et pour la seconde 890/2048, celleci tant effectivement plus petite.
15.4.4 La ligne de base centrale
Ce descripteur donne la position de la ligne de base centrale dans le carr em. On emploie une ligne de base
centrale pour l'alignement des critures idographiques, tout comme la ligne de base infrieure pour les critures
latines, greques et cyrilliques.
15.4.5 L'encodage des polices
Chaque police est associe, explicitement ou implicitement, a une table, la table d'encodage de la police, celleci
indiquant le caractre reprsent par un glyphe. On l'appelle aussi le vecteur d'encodage.
En ralit, de nombreuses polices proposent plusieurs glyphes pour le mme caractre. L'utilisation de tel ou tel
glyphe dpend des rgles de la langue considre, ou encore des prfrences du fondeur.
En arabe, par exemple, toutes les lettres ont quatre (ou deux) dessins diffrents, selon que la lettre apparaisse au
dbut d'un mot, au milieu, la fin ou toute seule. Dans tous les cas, il s'agit du mme caractre, le document
source ne mentionne que celuici, mais il apparatra selon les diffrents formes l'impression.
155

Il existe aussi des polices qui offrent un choix parmi diverses formes au graphiste. Malheureusement, CSS2 ne
propose pas encore les moyens de les choisir. Pour l'instant, seule la forme par dfaut est retenue pour de telles
polices.
15.4.6 Le nom de famille de polices
C'est la partie du nom de la police qui spcifie le nom de la famille de celleci. Par exemple, le nom de famille de
HelveticaBold est Helvetica et celui de ITC Stone Serif Semibold Italic est ITC Stone Serif. Certains systmes
traitent les rajouts concernant les polices troitises ou largi;es comme faisant partie de leur nom de famille.
15.4.7 Les dimensions des glyphes
C'est une liste des dimensions, sur le dessin de quadrillage, du glyphe correspondant chacun des caractres.
Celleci est ordonne selon le systme de code ISO 10646. On ne peut pas utilement spcifier leurs dimensions
quand plusieurs glyphes correspondent au mme caractre ou quand des ligatures sont obligatoires.
15.4.8 L'paisseur de tige horizontale
Cette valeur se rfre la tige dominante d'une police. Il peut y avoir deux, ou plus, tiges dessines. Par exemple,
les tiges verticales principales des caractres romans sont diffrentes des tiges minces dans un "M" et un "N"
serifs, sans compter les diffrences d'paisseur entre les caractres majuscules et minuscules d'une mme police.
galement, chaques tiges peuvent, volontairement ou la suite d'une erreur, avoir des paisseurs qui varient
lgrement.
15.4.9 La hauteur des glyphes majuscules
Cette dimension correspond la mesure, suivant un axe de coordonn y, partant de la ligne de base juqu'au
sommet plat d'une lettre majuscule des critures latines, greques et cyrilliques. Ce descripteur prsente un intrt
limit pour les polices ne contenant pas de glyphes dans ces critures.
15.4.10 La hauteur des glyphes minuscules
Cette dimension correspond la mesure, suivant un axe de coordonne y, partant de la ligne de base jusqu'au
sommet d'une lettre minuscule sans accent ni hampe, des critures latines, greques et cyrilliques. On effectue cette
mesure sur des lettres dont le sommet est plat, sans tenir compte des zones de correction optique. Cette mesure est
habituellement employe dans un ratio hauteur de minuscule sur hauteur de majuscule pour comparer les familles
de polices.
Ce descripteur ne prsente pas d'intrt pour les polices qui ne contiennent pas les glyphes dans ces critures. Les
hauteurs des minuscules et des majuscules apparaissant souvent sous la forme d'un ratio pour comparer des
polices, il peut tre utile de leur donner une mme valeur de hauteur pour les critures monocamrales telle
l'hbreu, quand celuici apparat dans un texte mixte latin hbreu, les caractres hbreux ayant typiquement une
hauteur michemin entre celles des minuscules et des majuscules des polices latines.
156
15.4.11 La ligne de base infrieure

Ce descripteur donne la position de la ligne de base infrieure dans le carr em. Cette ligne sert pour l'alignement
des critures latines, greques et cyrilliques, comme la ligne de base suprieure pour celui des critures drives du
sanscrit.
15.4.12 La ligne de base mathmatique
Ce descripteur donne la position de la ligne de base mathmatique dans le carr em. Cette ligne sert pour
l'alignement des symboles mathmatiques, comme la ligne de base infrieure pour celui des critures latines,
greques et cyrilliques.
15.4.13 La bote de circonscription maximale
La bote de circonscription maximale correspond au plus petit rectangle qui contiendrait les contours de
l'ensemble des glyphes d'une police, si on les avait empils, en faisant concider leurs origines, puis peints.
Si une police dynamique tlchargeable a t gnre partir d'une police parent, cette bote devrait correspondre
celle du parent.
15.4.14 La hauteur maximale sans accent
Cette dimension correspond la mesure, dans le carr m, partant de la ligne de base jusqu'au point le plus haut
atteint par les glyphes, les accents ou marques diacritiques exclus.
15.4.15 La profondeur maximale sans accent

Cette dimension correspond la mesure, dans le carr m, partant de la ligne de base jusqu'au point le plus bas
atteint par les glyphes, les accents ou marques diacritiques exclus.
157
15.4.16 Le nombre Panose1

La technologie Panose1 est un standard industriel de classification des polices TrueType et de correspondance.
Le systme PANOSE se compose d'un jeu de dix nombres qui catgorise les attributs cls d'une police latine,
d'une procdure de classification pour la cration de ces nombres et du logiciel Mapper qui dtermine la
correspondance de police la plus proche possible partir d'un jeu de polices donn. Ce systme pourrait tre
employ, avec quelques modifications, avec les polices greques et cyrilliques, mais ne convient cependant pas
pour les critures monocamrales et idographiques (hbreu, armnien, arabe, chinoisjaponaiscoren).
15.4.17 L'tendue des caractres ISO 10646
Ce descripteur indique le rpertoire de glyphes d'une police, par rapport ISO 10646 (Unicode). Ce rpertoire est
pars (la plupart des polices ne couvrant pas la totalit de ISO 10646), le descripteur dresse la liste des blocs ou
tendues qui reoivent une certaine couverture (sans garantie de couverture complte) et on l'emploie pour carter
les polices qui ne conviennent pas (celles qui n'auront pas les glyphes requis). Ceci n'est pas une affirmation que la
police en question possde les glyphes ncessaires, seulement que celleci mrite d'tre tlcharge et examine.
Voir [ISO10646] pour des rfrences utiles.
Cette mthode peut s'accrotre avec des allocations ultrieures de caractres dans Unicode, sans changement de
syntaxe et sans invalider le contenu existant.
Les formats de police, n'incluant pas cette information, explicitement ou indirectement, peuvent quand mme
utiliser cette caractristique, mais la valeur doit tre fournie par le document ou la feuille de style de l'auteur.
Il existe d'autres classifications d'critures, tels que le sytme Monotype (voir [MONOTYPE]) et un systme
d'criture ISO en proposition. Ceuxci ne sont pas encore applicables.
C'est pourquoi la classification des rpertoires de glyphes par l'tendue des caractres ISO 10646, ceuxci
pouvant tre reprsents avec une police donne, est employe dans cette spcification. Ce systme peut tre
largi pour couvrir toute allocation ultrieure.
15.4.18 La ligne de base suprieure
Ce descripteur donne la position, dans le carr em, de la ligne de base suprieure. Celleci sert pour l'alignement
des critures drives du sanscrit, comme la ligne de base infrieure pour celui des critures latines, greques et
cyrilliques.
15.4.19 L'paisseur de tige verticale
C'est l'paisseur de la tige verticale (ou presque) des glyphes. Cette information, souvent attache au hinting, peut
ne pas tre accessible dans certains formats de police. La mesure devrait tre effectue sur la tige verticale
dominante de la police, diffrents regroupements de tiges verticales pouvant exister (ex. une tige principale et une
de trait plus faible, comme dans les "M" ou les "N" majuscules).
15.4.20 L'angle d'inclinaison vertical
C'est l'angle, exprim en degr dans le sens inverse des aiguilles d'une montre, des traits verticaux dominants
d'une police. La valeur est ngative pour les polices qui penchent vers la droite, comme presque toutes les polices
italiques. On peut aussi employer ce descripteur avec les polices obliques, penchs, scripts et, de manire
gnrale, avec toutes celles dont les traits verticaux ne le sont pas vraiment. Une valeur non nulle n'indiquant pas
forcment une police italique.
158
15.5 L'algorithme de correspondance de police

Cette spcification renforce l'algorithme spcifi dans CSS1. Cet algorithme se ramenant celui de CSS1, quand
les feuilles de style de l'auteur ou de l'utilisateur ne font pas mention de rgles @fontface.
La correspondance des descripteurs avec les polices doit se faire avec soin. Les descripteurs trouvent une
correspondance dans un ordre bien dtermin qui garantit, selon ce processus de correspondance, des rsultats
aussi cohrents que possible entre agents utilisateurs (en supposant qu'une mme librairie de polices et de
descriptions de polices leur soit prsente). On peut optimiser cet algorithme, pourvu que l'implmentation qui en
est faite suive un comportement exactement similaire celui dcrit ici.
1. L'agent utilisateur construit (ou accde ) une base de donnes des descripteurs de police concerns pour
toutes les polices connues par celuici. Quand deux polices ont exactement le mme descripteur, l'une
d'elle sera ignore. L'agent utilisateur peut avoir connaissance d'une police quand celleci est :
installe localement ;
dclare au travers d'une rgle @fontface contenue dans une feuille de style, relie ou
incorpore au document en question ;
utilise dans la feuille de style par dfaut, qui existe par construction dans chacun des agents
utilisateurs et qui est sense comporter la totalit des rgles @fontface pour chacune des polices
que l'agent utilisateur emploiera dans une prsentation par dfaut, ainsi que les rgles @fontface
des cinq familles de polices gnriques particulires dfinies pour CSS2 (voir 'fontfamily').
2. Pour un lment donn et pour chaque caractre dans celuici, l'agent utilisateur runit les proprits qui
le concernent. Avec l'aide du jeu complet de ces proprits, l'agent utilisateur utile la proprit
'fontfamily' pour slectionner une famille de polices provisoire. De cette faon, la correspondance par le
nom de famille sera couronne de succs avant une correspondance par certains autres descripteurs. Les
proprits restantes sont exerces sur cette famille selon les critres de correspondance de chacun des
descripteurs. Si une correspondance est atteinte pour chacune des proprits, alors retenir cette police pour
l'lment en question ;
3. Si, la suite de l'tape 2, aucune police ne correspond avec celle indique par la proprit 'fontfamily',
les agents utilisateurs qui disposent d'un mcanisme de correspondance intelligent peuvent poursuivre
dans l'examen des autres descripteurs, tels que celui de hauteurx, ceux des dimensions des glyphes et
celui de panose1, pour l'identification d'une famille de polices provisoire diffrente. Si une
correspondance est atteinte pour chacun des descripteurs restants, alors retenir cette police pour l'lment
en question. Le descripteur 'fontfamily' qui est rflchi dans les proprits CSS2, correspond la famille
de polices demande, et non pas au nom qu'aurait la police trouve selon un processus de correspondance
intelligent. On considre que les agents utilisateurs chouent dans cette tape quand ceuxci
n'implmentent pas un tel processus ;
les agents utilisateurs qui disposent d'un mcanisme de tlchargement de police peuvent poursuivre dans
l'examen du descripteur 'src' de la police temporaire, dsigne comme dans les tapes 2 ou 3, pour vrifier
la disponibilit d'une ressource de rseau dont le format est reconnu. L'agent utilisateur peut choisir de
s'interrompre, en attendant la fin du tlchargement, ou de passer ltape suivante, pendant celuici. On
considre que les agents utilisateurs chouent dans cette tape, quand ceuxci n'implmentent pas le
tlchargement de police, ou quand ils ne sont pas connects un rseau, ou quand l'utilisateur a dsactiv
le tlchargement de police, ou quand la ressource demande est indisponible quelle qu'en soit la raison,
ou encore quand la police une fois tlcharge ne peut pas tre utilis quelle qu'en soit la raison ;
les agents utilisateurs qui disposent d'un mcanisme de synthse de police peuvent poursuivre dans
l'examen d'autres descripteurs, tels que celui de 'xheight', ceux des dimensions de glyphes et celui de
'panose1', pour identifier une autre famille de polices temporaire en vue de la synthse. Si une
correspondance est atteinte pour chacun des autres descripteurs restants, alors cette police est retenue pour
l'lment en question et la synthse proprement dite peut commencer. On considre que les agents
utilisateurs chouent dans cette tape quand ceuxci n'implmentent pas la synthse de police ;
6. Si jusqu'ici, les tapes 2, 3, 4 et 5 du processus de correspondance ont chou et si une alternative existe
dans la suite du jeu de polices indiqu par la proprit 'fontfamily', alors reprendre le processus de
correspondance partir de l'tape 2 avec cette autre police ;
7. Si une correspondance est atteinte pour une police, celleci manquant du (ou des) glyphe(s) pour le (ou
les) caractre(s) donn(s), et si une police alternative existe dans la suite du jeu de polices indiqu par la
proprit 'fontfamily', alors reprendre le processus de correspondance partir de l'tape 2 avec cette
autre police. Le descripteur 'unicoderange' peut tre employ pour carter rapidement celle des polices
qui ne dispose pas des glyphes appropris. Quand ce descripteur confirme la police comme contenant
certains glyphes dans l'tendue correcte, l'agent utilisateur peut examiner celleci pour y vrifier la
prsence d'un glyphe donn ;
8. S'il n'y a plus de polices examiner dans la famille considre dans l'tape 2, alors utiliser la valeur
hrite, ou celle dpendante de l'agent utilisateur, de la proprit 'fontfamily' et reprendre le processus
159

partir de l'tape 2, en utilisant les meilleures correspondances possibles avec cette police. Si un caractre
donn ne peut tre rendu avec celleci, l'agent utilisateur ne disposera pas de police qui convienne pour
celuici. L'agent utilisateur devrait faire correspondre chacun des caractres, pour lesquels il ne dispose
pas d'une police approprie, avec un symbole visible et choisi par celuici, de prfrence un glyphe
"caractre manquant" issu de l'une des polices disponibles ;
9. Les agents utilisateurs qui disposent d'un mcanisme de rendu progressif, dans l'attente de la fin du
tlchargement d'une police, peuvent, en cas de russite, utiliser cette police comme une nouvelle famille
de polices. Si certains glyphes manquaient dans celleci, ces glyphes tant dj prsents dans la police
temporaire, alors la police tlcharge n'est pas utilise pour le caractre correspondant et la police
temporaire continue d'tre utilise.
Note : On peut optimiser cet algorithme en vitant le rexamen par les proprits CSS2 de chacun des caracres.
Voici les tests de correspondance effectus dans l'tape 2, selon le descripteur :
1. Le test sur 'fontstyle' est effectu en premier. La valeur 'italic' est retenue si la base de donnes des
polices de l'agent utilisateur contient une police marque avec les motscls 'italic' (prfrable) ou bien
'oblique'. Autrement les valeurs doivent correspondre exactement sinon le test sur 'fontstyle' choue ;
2. Puis vient le test sur 'fontvariant'. La valeur 'normal' retient une police qui n'est pas tiquete
'smallcaps'. La valeur 'smallcaps' retient (1) une police marque 'smallcaps' ou (2) une police dans
laquelle les petites capitales sont synthtises ou (3) une police dont toutes les minuscules sont remplaces
par des capitales. On peut synthtiser lectroniquement les petites capitales en jouant sur l'chelle des
capitales d'une police normale ;
3. Le test sur 'fontweight' n'choue jamais. (Voir 'fontweight' plus loin) ;
4. Le rsultat du test sur 'fontsize' doit s'inscrire dans une marge de valeurs qui dpend de l'agent utilisateur
(typiquement, la taille des polices variables est arrondie au pixel entier le plus proche alors que la
tolrance sur la taille des polices fixes peut aller jusqu' 20%). Les calculs supplmentaires (par exemple
sur les valeurs exprimes en 'em' pour les autres proprits) se basent alors sur la valeur tablie pour
'fontsize' et non sur la valeur qui y est spcifie.
15.5.1 Les correspondances entre valeurs de graisse et les noms de police
Les valeurs de la proprit 'fontweight' sont donnes selon une chelle gradue numrique dans laquelle la valeur
'400' (ou 'normal') correspond un texte dans la police "normale" de la famille. On associe couramment celleci
le nom de graisse Book, Regular, Roman, Normal ou parfois Medium.
Les autres valeurs de graisse disponibles dans l'chelle numrique ne sont prsentes que pour conserver une
certaine graduation de la graisse dans une famille de polices. Les agents utilisateurs doivent faire correspondre
leurs noms aux valeurs numriques de graisse pour prserver la variation visuelle ; une police correspondant une
valeur de graisse donne ne doit pas apparatre moins grasse que celles qui correspondent des valeurs plus
faibles. Il n'existe aucune garantie de la faon dont un agent utilisateur va associer les polices d'une famille avec
ces valeurs numriques. Voici quelques pistes qui montrent comment traiter certains cas typiques :
Si la famille de polices utilise dj une chelle numrique de neuf valeurs (comme OpenType), les
graisses devraient avoir une correspondance directe avec ces valeurs ;
S'il existe la fois une police marque Medium et une marque Book, Regular, Roman ou Normal, alors
on fait correspondre la Medium '500' ;
La police tiquete "Bold" correspond souvent la valeur de graisse '700' ;
S'il y a moins de 9 graisses dans la famille, un algorithme par dfaut peut combler les "manques" comme
ceci : si '500' n'a pas de police correspondante, on fait alors correspondre cette graisse la mme police
qui correspond dj '400'. Si une parmi les valeurs '600', '700', '800' ou '900' n'a pas de police
correspondante, alors cette valeur partage la mme police correspondante, si elle existe, que celle du
motcl 'bolder', ou sinon, que celle qui correspond 'lighter'. Si une parmi les valeurs '300', '200' ou '100'
n'a pas de correspondance, alors cette valeur partage la mme correspondance, si elle existe, que celle du
motcl 'lighter', ou sinon, que celle qui correspond 'bolder'.
L'existence d'une graisse plus paisse pour toutes les valeurs de 'fontweight' n'est pas garantie. Par exemple,
certaines familles de polices n'ont que les dclinaisons normale et grasse, d'autres peuvent en avoir huit.
Les deux exemples suivants montrent des correspondances typiques :
Supposons que la famille de polices "Rattlesnake" contienne quatre dclinaisons, leur graisse allant croissant :
Regular, Medium, Bold, Heavy.
Premier exemple de correspondance avec 'fontweight'
160

Polices disponibles Correspondance En comblant les manques
"Rattlesnake Regular" 400
100, 200, 300
"Rattlesnake Medium" 500
"Rattlesnake Bold"
700
600
"Rattlesnake Heavy" 800
900
Supposons que la famille de polices "Ice Prawn" contienne six dclinaisons, leur graisse allant croissant : Book,
Medium, Bold, Heavy, Black, ExtraBlack. Noter que l'agent utilisateur n'a pas tabli de correspondance pour "Ice
Prawn ExtraBlack".
Second exemple de correspondance avec 'fontweight'
Polices disponibles
"Ice Prawn Book"
"Ice Prawn Medium"
"Ice Prawn Bold"
"Ice Prawn Heavy"
"Ice Prawn Black"
"Ice Prawn ExtraBlack"
Correspondance En comblant les manques

400
100, 200, 300
500
700
600
800
900
(aucun)
15.5.2 Exemples de correspondances de police

Exemple(s) :
Cet exemple dfinit une police particulire, Alabam Italic. On y trouve une description de police Panose et l'URI
d'une ressource TrueType. Des descripteurs 'fontweight' et 'fontstyle' venant en complment. La dclaration
prcise ainsi qu'une correspondance sera atteinte pour les valeurs de graisse comprises entre 300 et 500. La famille
de polices est Alabama et le nom entier de la police Alabama Italic :
@fontface {
src: local("Alabama Italic"),
url(http://www.fonts.org/A/alabamaitalic) format("truetype");
panose1: 2 4 5 2 5 4 5 9 3 3;
fontfamily: Alabama, serif;
fontweight:
300, 400, 500;
fontstyle: italic, oblique;
}
Exemple(s) :
L'exemple suivant dfinit une famille de polices. Un seul URI est donn pour ramener les donnes de police. Ce
fichier de donnes va contenir plusieurs styles et graisses pour la police demande. Une fois qu'une de ces
dfinitions @fontface aura t excute, ces donnes vont se retrouver dans le cache de l'agent utilisateur au
service des autres polices partageant le mme URI :
@fontface {
src: local("Helvetica Medium"),
url(http://www.fonts.org/sans/Helvetica_family) format("truedoc");
fontfamily: "Helvetica";
fontstyle: normal
}
@fontface {
src: local("Helvetica Oblique"),
url("http://www.fonts.org/sans/Helvetica_family") format("truedoc");
fontfamily: "Helvetica";
fontstyle: oblique;
slope: 18
}
Exemple(s) :
L'exemple suivant regroupe trois polices existantes en une seule police virtuelle, celleci gagnant une couverture
largie. Dans chacune de ces trois dclarations, on donne le nom entier de la police au moyen du descripteur 'src',
ce qui en provoquerait l'utilisation prfrentielle au cas o celleci tait disponible localement. Une quatrime
rgle pointe vers une police ayant la mme couverture en une seule ressource :
161

@fontface {
fontfamily: Excelsior;
src: local("Excelsior Roman"), url("http://site/er") format("intellifont");
unicoderange: U+??; /* Latin1 */
}
@fontface {
src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont");
unicoderange: U+100220; /* Latin Extended A et B */
}
@fontface {
src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont");
unicoderange: U+4??; /* Cyrillique */
}
@fontface {
src: url("http://site/excels") format("truedoc");
unicoderange: U+??,U+100220,U+4??;
}
Exemple(s) :
L'exemple suivant pourrait faire partie de la feuille de style par dfaut d'un agent utilisateur. C'est une
implmentation de la famille de polices gnrique de CSS2 serif, ralisant une correspondance sur une grande
varit de polices serifs qui existent sur diverses plateformes. Aucunes dimensions ne sont indiques, cellesci
variant pour chacune des alternatives :
@fontface {
src: local("Palatino"),
local("Times New Roman"),
local("New York"),
local("Utopia"),
url("http://somewhere/free/font");
fontfamily: serif;
fontweight: 100, 200, 300, 400, 500;
fontstyle: normal;
fontsize: all
}
162
16 Le texte
Les proprits dfinies cidessous influencent la reprsentation visuelle des caractres, des blancs, des mots et des
paragraphes.
16.1 L'alina : la proprit 'textindent'

'textindent'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

0
oui
visuel
Cette proprit spcifie un alina pour la premire ligne du texte dans un bloc. Plus prcisment, celui de la
premire bote de la premire range dans la premire bote de ligne de ce bloc. Cette bote est indente partir du
bord gauche (ou droit, pour une mise en page de droite gauche) de la bote de ligne. Les agents utilisateurs
devraient reprsenter cette indentation comme un espace vide.
Le significations des valeurs sont :
<longueur>
L'alina a une longueur fixe ;
<pourcentage>
L'alina correspond un pourcentage de la largeur du bloc conteneur.
La valeur de la proprit 'textindent' peut tre ngative, mais ceci dpend des limites de l'implmentation. Si
cette valeur est ngative, la valeur de la proprit 'overflow' peut avoir une influence sur la visibilit du texte.
Exemple(s) :
Cet exemple produit un alina de '3em' :
P { textindent: 3em }
16.2 L'alignement : la proprit 'textalign'

'textalign'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
left | right | center | justify | <chane> | inherit

selon l'agent utilisateur et selon le sens d'criture
oui
sans objet
visuel
Cette proprit dcrit l'alignement d'un contenu enligne dans un lment de type bloc. Les significations des
valeurs sont :
left, right, center et justify
Respectivement, l'alignement gauche, droite, centr et justifi d'un texte ;
<chane>
Spcifie une chane sur laquelle les cellules d'une table vont s'aligner (voir le passage sur l'alignement
horizontal dans une colonne pour le dtail et pour un exemple). Cette valeur ne s'applique qu'aux cellules
d'une table. Applique un autre lment, celleci sera considre comme tant 'left' ou 'right', en
fonction de la valeur de la proprit 'direction', respectivement 'ltr' ou 'rtl'.
Un pav de texte consiste en un empilement de botes de ligne. Pour les valeurs 'left', 'right' et 'center', cette
proprit indique la faon dont les botes enligne, dans chacune des botes de ligne, s'alignent par rapport aux
cts gauche et droite de ces botes de ligne ; l'alignement n'est pas effectu par rapport l'espace de visualisation.
Pour la valeur 'justify', l'agent utilisateur peut, en plus des ajustements de position, tirer les botes de ligne. Voir
galement les proprits 'letterspacing' et 'wordspacing').
163

Exemple(s) :
Dans cet exemple, noter que tous les lments de type bloc dans lment DIV avec la classe 'center' auront leur
contenu centr, la proprit 'textalign' tant hrite :
DIV.center { textalign: center }
Note : L'algorithme de justification effectif dpend de l'agent utilisateur et de l'criture.

Les agents utilisateurs conformes peuvent interprter la valeur 'justify' comme tant 'left', ou 'right', selon que le
sens d'criture de l'lment est de gauche droite, ou de droite gauche.
16.3 La dcoration
16.3.1 Trait endessous, trait audessus, rayure et clignotement: la proprit 'textdecoration'
'textdecoration'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
none | [ underline || overline || linethrough || blink ] | inherit

none
tous les lments
non (voir les explications)
sans objet
visuel
Cette proprit dcrit les dcorations qui sont ajoutes au texte d'un lment. Quand la proprit est applique un
lment de type bloc, elle agit sur tous les descendants de type enligne de celuici. Quand elle est applique un
lment de type enligne, ou agit sur celuici, cette proprit influence toutes les botes gnres par cet lment.
Quand les lments sont vides ou sans contenu textuel (ex. l'lment IMG en HTML), les agents utilisateurs
doivent ignorer cette proprit.
none
Aucune dcoration ;
underline
Chaque ligne de texte est souligne ;
overline
Chaque ligne de texte reoit un trait audessus ;
linethrough
Chaque ligne de texte est raye en son milieu ;
blink
Le texte clignote (une alternance entre visible et invisible). Les agents utilisateurs conformes ne sont pas
tenus de reconnatre cette valeur.
La couleur, ou les couleurs, requises pour la dcoration de texte devraient tre dtermines par la valeur de la
proprit 'color'.
Cette proprit n'est pas hrite, cependant les botes qui descendent d'une bote de bloc donne devraient recevoir
la mme dcoration que celleci (ex. toutes devraient tre soulignes). La couleur de la dcoration devrait tre
conserve, mme si la valeur de la proprit 'color' des lments descendants tait diffrente.
Exemple(s) :
Dans cet exemple en HTML, le contenu de texte de chacun des lments A, ceuxci tant des liens, seront
souligns :
A[href] { textdecoration: underline }
16.3.2 Les ombrages de texte : la proprit 'textshadow'

'textshadow'
Valeur :
Initiale :
164
none | [<couleur> || <longueur> <longueur> <longueur>? ,]* [<couleur> || <longueur>

<longueur> <longueur>?] | inherit
none
tous les lments

S'applique
:
Hrite :
non (voir les explications)
:
Mdias :
visuel
Cette proprit accepte une liste de valeurs, spars par une virgule, reprsentant des effets d'ombrage appliquer
au texte d'un lment. Ces effets s'appliquent dans l'ordre spcifi et peuvent ainsi se recouvrir, mais ceuxci ne
recouvriront jamais le texte luimme. Les effets d'ombrage ne modifient pas la taille d'une bote, mais peuvent
s'tendre audel des limites de celleci. Les effets d'ombrages se situent au mme niveau dans l'empilement que
l'lment en question.
Chaque effet doit spcifier un dcalage de l'ombrage, et peut, en option, spcifier une zone de flou et la couleur de
l'ombrage.
Le dcalage de l'ombrage est donn par deux valeurs de <longueur> qui en prcisent la distance par rapport au
texte. La premire spcifie la distance horizontale la droite du texte, une valeur ngative place l'ombrage la
gauche de celuici. La seconde spcifie la distance verticale endessous du texte, une valeur ngative place
l'ombrage audessus de celuici.
En option, on peut spcifier, aprs les valeurs de dcalage de l'ombrage, celle du rayon du flou. C'est une longueur
qui indique les limites de cet effet de flou. L'algorithme exact pour le calcul de cet effet n'est pas spcifi.
En option galement, on peut spcifier, avant ou aprs les valeurs de dcalage de l'ombrage, celle de la couleur de
l'ombrage. Cette valeur de couleur servira de fondement pour l'effet d'ombrage. Si aucune couleur n'est indique,
c'est la valeur de la proprit 'color' qui est considre sa place.
On peut employer les ombrages de texte avec les pseudolments :firstletter et :firstline.
Exemple(s) :
L'exemple cidessous produira un ombrage droite et en dessous du texte de l'lment. Aucune couleur ni rayon
de flou ayant t spcifis, l'ombrage prendra la couleur de l'lment en question et n'aura pas d'effet de flou :
H1 { textshadow: 0.2em 0.2em }
Celuici produira un ombrage droite et endessous du texte de l'lment. Cet ombrage aura un rayon de flou de
5px et de couleur rouge :
H2 { textshadow: 3px 3px 5px red }
Dans l'exemple suivant, on spcifie une liste d'effets d'ombrage. Le premier ombrage apparatra droite et
endessous du texte, avec une couleur rouge et sans effet de flou. Le deuxime va recouvrir le premier effet
d'ombrage et apparatra gauche et endessous du texte, avec une couleur jaune et un effet de flou. Le troisime
sera plac droite et audessus du texte. Aucune couleur n'tant spcifie pour celuici, c'est la valeur de la
proprit 'color' de l'lment en question qui sera utilise :
H2 { textshadow: 3px 3px red, yellow 3px 3px 2px, 3px 3px }
Exemple(s) :
Considrons cette rgle :
SPAN.glow {
background: white;
color: white;
textshadow: black 0px 0px 5px;
}
Ici, on a utilis les proprits 'background' et 'color' avec la mme valeur, ainsi que la proprit 'textshadow' pour
crer un effet "clipse solaire" :
165
Note : Cette proprit n'est pas dfinie en CSS1. Certains effets d'ombrage (tel que celui du dernier exemple)
peuvent rendre le texte invisible pour les agents utilisateurs ne reconnaissant que CSS1.
16.4 L'interlettrage et l'espacemot : les proprits 'letterspacing' et

'wordspacing'
'letterspacing'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
normal | <longueur> | inherit

normal
tous les lments
oui
sans objet
visuel
Cette proprit prcise le comportement de l'espacement entre les caractres du texte. Les significations des
valeurs sont :
normal
C'est l'espacement normal pour la police en question. Cette valeur permet l'agent utilisateur la
modification de l'interlettrage pour la justification d'un texte ;
<longueur>
Cette valeur indique la quantit d'espacement qui s'ajoute l'interlettrage par dfaut. Celleci peut tre
ngative, son interprtation dans les limites de l'implmentation. Pour un texte justifier, les agents
utilisateurs peuvent ne plus pouvoir augmenter ou diminuer l'interlettrage.
Les algorithmes d'interlettrage dpendent des agents utilisateurs. La justification peut aussi avoir une influence sur
l'interlettrage (voir la proprit 'textalign').
Exemple(s) :
Dans cet exemple, l'interlettrage des lments BLOCKQUOTE est augment de 'O.1em' :
BLOCKQUOTE { letterspacing: 0.1em }
Dans celuici, l'agent utilisateur ne peut pas en modifier l'interlettrage :

BLOCKQUOTE { letterspacing: 0cm }
/* Pareil '0' */
Quand l'interlettrage rsultant entre deux caractres est diffrent de celui par dfaut, les agents utilisateurs ne
devraient pas utiliser de ligatures.
Les agents utilisateurs conformes peuvent interprter la valeur de la proprit 'letterspacing' comme tant
'normal'.
'wordspacing'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

normal
tous les lments
oui
sans objet
visuel
Cette proprit prcise le comportement de l'espacement entre des mots. Les significations des valeurs sont :
normal
L'espacemot normal, tel que dfini par la police en question et/ou l'agent utilisateur ;
<longueur>
Cette valeur indique la quantit d'espacement qui s'ajoute l'espacemot par dfaut. Les valeurs peuvent
tre ngatives, leur interprtation dans les limites de l'implmentation.
166

Les algorithmes d'espacemot dpendent de l'agent utilisateur. La justification peut aussi avoir une influence sur
l'espacement entre les mots (voir la proprit 'textalign').
Exemple(s) :
Dans cet exemple, l'espacemot entre chacuns des mots des lments H1 est augment de '1em' :
H1 { wordspacing: 1em }
Les agents utilisateurs conformes peuvent interprter la valeur de la proprit 'wordspacing' comme tant
'normal'.
16.5 La capitalisation : la proprit 'texttransform'

'texttransform'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
capitalize | uppercase | lowercase | none | inherit

none
tous les lments
oui
sans objet
visuel
Cette proprit dtermine les effets de capitalisation du texte d'un lment. Les significations des valeurs sont :
capitalize
La premire lettre de chaque mot est en majuscule ;
uppercase
Les lettres de chacuns des mots sont en majuscules ;
lowercase
Les lettres de chacuns des mots sont en minuscules ;
none
Aucun effet de capitalisation.
Dans chaque cas, la transformation effective dpend de l'criture de la langue en question. Voir RFC 2070
([RFC2070]) pour la dtermination de la langue utilise dans un lment.
Les agents utilisateurs conformes peuvent interprter la valeur de la proprit 'texttransform' comme tant 'none',
pour les caractres n'appartenant pas au rpertoire Latin1 et pour les lments dans certaines langues, langues
pour lesquelles la transformation serait diffrente de celle spcifie dans les tables de conversion de ISO 10646
([ISO10646]).
Exemple(s) :
Dans cet exemple, l'ensemble du texte des lments H1 est transform en capitales :
H1 { texttransform: uppercase }
16.6 Les blancs : la proprit 'whitespace'

'whitespace'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
normal | pre | nowrap | inherit

normal
tous les lments
oui
sans objet
visuel
Cette proprit dtermine la gestion des blancs dans un lment.

normal
Cette valeur enjoint aux agents utilisateurs de fusionner les squences de blancs et d'effectuer des retours
la ligne de manire approprie pour remplir les botes de ligne. Dans un contenu gnr, les survenues
de la squence de caractres "\A" peuvent produire d'autres retours la ligne (ex. comme l'lment BR en
HTML) ;
pre
167

Cette valeur interdit aux agents utilisateurs la fusion des squences de blancs. Les retours la ligne
n'interviennent qu'aux endroits des caractres "nouvelle ligne" de la source, ou aux survenues de la
squence "\A" dans un contenu gnr ;
nowrap
Cette valeur provoque la fusion des blancs comme pour 'normal' mais supprime les retours la ligne d'un
texte, sauf les retours la ligne induits par la squence "\A" dans un contenu gnr (ex. comme l'lment
BR en HTML).
Exemple(s) :
Les rgles suivantes indiquent comment sont grs les blancs dans les lments PRE et P, ainsi que pour l'attribut
"nowrap" de HTML :
PRE
{ whitespace: pre }
P
{ whitespace: normal }
TD[nowrap] { whitespace: nowrap }
Les agents utilisateurs conformes peuvent ignorer la proprit 'whitespace' des feuilles de style de l'auteur et de
l'utilisateur, mais pas dans la feuille de style par dfaut o une valeur doit tre spcifie pour celleci.
168
17 Les tables
17.1 Introduction aux tables
Les tables sont une reprsentation des relations entre des donnes. Les auteurs prcisent ces relations dans le
langage du document et prcisent la reprsentation de cellesci de deux manires, l'une visuelle et l'autre auditive.
Les auteurs peuvent spcifier la mise en forme d'une table sous la forme d'un quadrillage de cellules. Les ranges
et les colonnes de cellules peuvent s'organiser en groupes de ranges et en groupes de colonnes. Ces ranges,
colonnes, groupes de ranges, groupes de colonnes et cellules peuvent recevoir des bordures dessines autour
d'eux (en CSS2, selon deux modles de bordures). Les auteurs peuvent aligner les donnes ,dans un sens vertical ou
horizontal, dans la cellule ou dans toutes les cellules d'une range ou d'une colonne.
Les auteurs peuvent aussi spcifier le rendu auditif d'une table, comment les enttes et les donns seront dites.
Dans le langage du document, ceuxci peuvent tiqueter des cellules ou des groupes de cellules, quand il s'agit
d'un rendu auditif, pour que les cellules d'entte soit dites avant celles des donnes. Dans les faits, ceci "srialise"
la table : les utilisateurs consultant de faon auditive la table entendent la squence d'enttes suivie par celle des
donnes.
Exemple(s) :
Voici, dcrit en HTML 4.0, une table simple de trois ranges par trois colonnes :
<TABLE>
<CAPTION>Voici une table simple en 3x3</CAPTION>
<TR id="rangee1">
<TH>Entte 1
<TD>Cellule 1
<TD>Cellule 2
<TR id="rangee2">
<TH>Entte 2
<TD>Cellule 3
<TD>Cellule 4
<TR id="rangee3">
<TH>Entte 3
<TD>Cellule 5
<TD>Cellule 6
</TABLE>
Ce code cre une table (l'lment TABLE), trois ranges (les lments TR), trois cellules d'entte (les lment
TH) et six cellules de donnes (les lments TD). Noter que, dans l'exemple, les trois colonnes sont implicites : il
y en a autant dans la table que l'entte et les cellules de donns le demandent.
Cette rgle CSS centre le texte horizontalement dans les cellules d'entte et applique un style gras celles de
donnes :
TH { textalign: center; fontweight: bold }
La rgle suivante aligne le texte des cellules d'entte sur leur ligne de base et centre verticalement le texte de
chacune des cellules de donnes :
TH { verticalalign: baseline }
TD { verticalalign: middle }
Cette rgleci spcifie une bordure en trait plein bleu pais de 3px autour de la premire range et un trait plein
noir pais de 1px autour des ranges suivantes :
TABLE
TR#rangee1
TR#rangee2
TR#rangee3
{
{
{
{
bordercollapse: collapse }
bordertop: 3px solid blue }
bordertop: 1px solid black }
bordertop: 1px solid black }
Noter, cependant, que les bordures autour des ranges se recouvrent quand cellesci se rencontrent. De quelle
couleur (noir ou bleu) et de quelle paisseur (1px ou 3px) seront les bordures entre rangee1 et rangee2 ? Ce point
est abord dans le passage traitant de la rsolution des conflits de bordure.
Dans cette rgle, la lgende est place audessus de la table :
CAPTION { captionside: top }
169

Et enfin, cette rgleci indique, en cas de rendu auditif, que chaque range de donnes soit lue selon le schma
"Entte, Donnes, Donnes" :
TH { speakheader: once }
Par exemple, la premire range serait dite "Entte, Cellule1, Cellule2". Par contre, avec cette rgle :
TH { speakheader: always }
la premire range serait dite "Entte1 Cellule1 Entte1 Cellule2".

L'exemple prcdent montre l'action de CSS avec des lments de HTML 4.0 ; dans cette spcification, la
smantique des divers lments des tables (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP,
TH et TD) est bien dfinie. Pour d'autres langages de document (tel que les applications XML), ces lments ne
sont pas forcment prdfinis. C'est pourquoi, CSS2 permet aux auteurs de "faire correspondre" les lments du
langage d'un document avec ceux des tables via la proprit 'display'. Par exemple, dans la rgle suivante,
l'lment FOO se comporte comme un lment TABLE de HTML et l'lment BAR comme un lment
CAPTION :
FOO { display : table }
BAR { display : tablecaption }
Les divers lments des tables sont abords dans le chapitre qui suit. Dans cette spcification, le terme lment
de table se rfre tout lment impliqu dans la cration d'une table. Un lment de table "interne" est un de
ceux qui produisent une range, un groupe de ranges, une colonne, un groupe de colonnes ou une cellule.
17.2 Le modle de table de CSS

Le modle de table de CSS se fonde sur celui de HTML 4.0, dans lequel la structure d'une table participe
troitement et paralllement avec la disposition visuelle de cette table. Dans ce modle, une table consiste en une
lgende facultative et un nombre quelconque de ranges de cellules. On dit que celuici est "prioritaire aux
ranges", les auteurs spcifiant des ranges explicitement dans le langage du document, et non des colonnes. Les
colonnes se dduisent une fois que les ranges ont t spcifies (la premire cellule de chacune des ranges font
partie de la premire colonne, la deuxime cellule de la deuxime colonne, etc.). On peut regrouper
structurellement les ranges et les colonnes, la prsentation refltant ce regroupement (ex. une bordure peut tre
dessine autour d'un groupe de ranges).
C'est ainsi que les tables, les lgendes, les ranges, les groupes de ranges, les colonnes, les groupes de colonnes
et les cellules composent le modle de table.
Le modle de table CSS ne requiert pas du langage du document que celuici comporte des lments
correspondants chacun de ces composants. Pour les langages de document (tels que les applications XML) qui
n'ont pas d'lments de table prdfinis, les auteurs doivent faire correspondre les lments de ces langages avec
ces lments des tables, et ceci avec l'aide de la proprit 'display'. Les valeurs suivantes de 'display' adjoignent
une smantique de table un lment arbitraire :
table (TABLE en HTML)
Spcifie un comportement de table de type bloc pour un lment : c'est un bloc rectangulaire qui participe
un contexte de mise en forme de bloc ;
inlinetable (TABLE en HTML)
Spcifie un comportement de table de type enligne pour un lment : c'est un bloc rectangulaire qui
participe un contexte de mise en forme enligne ;
tablerow (TR en HTML)
Spcifie que l'lment est une range de cellules ;
tablerowgroup (TBODY en HTML)
Spcifie qu'un lment regroupe une ou plusieurs ranges ;
tableheadergroup (THEAD en HTML)
Comme pour 'tablerowgroup', cependant, pour une mise en forme visuelle, ce groupe de ranges est
toujours affich avant toutes les autres ranges et groupes de ranges et aprs une ventuelle lgende en
position suprieure. Les agents utilisateurs d'impression peuvent rpter les ranges d'entte sur chacune
des pages sur lesquelles s'tendrait une table ;
tablefootergroup (TFOOT en HTML)
Comme pour 'tablerowgroup', cependant, pour une mise en forme visuelle, ce groupe de ranges est
toujours affich aprs toutes les autres ranges et groupes de ranges, et avant une ventuelle lgende en
position infrieure. Les agents utilisateurs d'impression peuvent rpter les ranges de pied sur chacune
170

des pages sur lesquelles s'tendrait une table ;
tablecolumn (COL en HTML)
Spcifie qu'un lment reprsente une colonne de cellules ;
tablecolumngroup (COLGROUP en HTML)
Spcifie qu'un lment regroupe une ou plusieurs colonnes ;
tablecell (TD ou TH en HTML)
Spcifie qu'un lment reprsente une cellule de table ;
tablecaption (CAPTION en HTML)
Spcifie la lgende d'une table.
Les lments dont la valeur de la proprit 'display' est 'tablecolumn' ou 'tablecolumngroup' ne sont pas rendus
(exactement comme si celleci avait t 'none'), mais ceuxci ont une certaine utilit, leurs attributs pouvant
donner ventuellement un certain style aux colonnes que ceuxci dfinissent.
La feuille de style par dfaut pour HTML 4.0 en appendice montre l'utilisation de ces valeurs :
TABLE
TR
THEAD
TBODY
TFOOT
COL
COLGROUP
TD, TH
CAPTION
{
{
{
{
{
{
{
{
{
display:
display:
display:
display:
display:
display:
display:
display:
display:
table }
tablerow }
tableheadergroup }
tablerowgroup }
tablefootergroup }
tablecolumn }
tablecolumngroup }
tablecell }
tablecaption }
Les agents utilisateurs peuvent ignorer ces valeurs de la proprit 'display' pour des documents HTML, car les
auteurs ne devraient pas modifier le comportement attendu pour un lment.
17.2.1 Les objets de table anonymes
Chaque lment table va automatiquement gnrer des objets de table anonymes autour de luimme, ceuxci
consistent d'au moins trois objets imbriqus qui correspondent aux lments avec la valeur 'table' ou 'inlinetable,
avec la valeur 'tablerow' et avec la valeur 'tablecell'.
Des langages de document autres que HTML peuvent ne pas contenir tous les lments du modle de table de
CSS2. Pour ceuxci, on doit supposer l'existence des lments "absents" pour que le modle puisse fonctionner.
Ces lments absents gnrent des objets anonymes (par exemple des botes anonymes dans la mise en forme de
la table) selon les rgles suivantes :
1. Quand le parent, not P, d'un lment 'tablecell', not T, n'est pas un lment 'tablerow', un objet
correspondant ce dernier sera gnr entre P et T. Cette objet recouvrira l'ensemble des lments
'tablecell' conscutifs de T de mme ascendance (dans l'arborescence du document) ;
2. Quand le parent P d'un lment 'tablerow' T n'est pas un lment 'table', 'inlinetable' ou
'tablerowgroup', un objet correspondant un lment 'table' sera gnr entre P et T. Cette objet
recouvrira l'ensemble des lments 'tablerow' conscutifs de T de mme ascendance (dans l'arborescence
du document), ceuxci requrant un parent 'table', savoir 'tablerow', 'tablerowgroup',
'tableheadergroup', 'tablefootergroup', 'tablecolumn', 'tablecolumngroup' et 'caption' ;
3. Quand le parent P d'un lment 'tablecolumn' n'est pas un lment 'table' T, 'inlinetable' ou
'tablecolumngroup', un objet correspondant un lment 'table' sera gnr entre P et T. Cet objet
recouvrira l'ensemble des lments 'tablecolumn' conscutifs de T de mme ascendance (dans
l'arborescence du document), ceuxci requrant un parent 'table', savoir 'tablerow', 'tablerowgroup',
'tableheadergroup', 'tablefootergroup', 'tablecolumn', 'tablecolumngroup' et 'tablecaption' ;
4. Quand le parent P d'un lment 'tablerowgroup' (ou 'tableheadergroup' ou 'tablefootergroup') T
n'est pas un lment 'table' ou 'inlinetable', un objet correspondant un lment 'table' est gnr entre P
et T. Cet objet recouvrira l'ensemble des lments conscutifs de T de mme ascendance (dans
l'arborescence du document), ceuxci requrant un parent 'table', savoir 'tablerow', 'tablerowgroup',
'tableheadergroup', 'tablefootergroup', 'tablecolumn', 'tablecolumngroup' et 'caption' ;
5. Quand un enfant T d'un lment 'table (ou 'inlinetable') P n'est pas un lment 'tablerowgroup',
'tableheadergroup', 'tablefootergroup' ou 'tablerow', un objet correspondant un lment
'tablerow' sera gnr entre P et T. Cet objet recouvrira l'ensemble des lments conscutifs de T de
mme ascendance, ceuxci n'tant pas des lments 'tablerowgroup', 'tableheadergroup',
'tablefootergroup' ou 'tablerow' ;
6. Quand un enfant T d'un lment 'tablerowgroup' (ou 'tableheadergroup' ou 'tablefootergroup') P
n'est pas un lment 'tablerow', un objet correspondant un lment 'tablerow' sera gnr entre P et T.
Cet objet recouvrira l'ensemble des lments conscutifs de T de mme ascendance, ceuxci n'tant pas
171

des lments 'tablerow' ;
7. Quand un enfant T d'un lment 'tablerow' P n'est pas un lment 'tablecell', un objet correspondant
un lment 'tablecell' sera gnr entre P et T. Cet objet recouvrira l'ensemble des lments conscutifs
de T de mme ascendance, ceuxci n'tant pas des lments 'tablecell'.
Exemple(s) :
Dans cet exemple en XML, on suppose qu'un lment 'table' contient l'lment HBOX :
<HBOX>
<VBOX>George</VBOX>
<VBOX>4287</VBOX>
<VBOX>1998</VBOX>
</HBOX>
la feuille de style qui lui est associe tant :

HBOX { display: tablerow }
VBOX { display: tablecell }
Example(s) :
Dans cet exempleci, on suppose que trois lments 'tablecell' contiennent les textes des lments ROW. Noter
que le texte est son tour encapsul dans des botes de ligne anonymes, ainsi que c'est expliqu dans le modle de
mise en forme visuel :
<STACK>
<ROW>Voici la range du <D>haut</D>.</ROW>
<ROW>Voici la range du <D>milieu</D>.</ROW>
<ROW>Voici la range du <D>bas</D>.</ROW>
</STACK>
la feuille de style associe tant :

STACK { display: inlinetable }
ROW
{ display: tablerow }
D
{ display: inline; fontweight: bolder }
Les agents utilisateurs HTML ne sont pas tenus de crer des objets anonymes selon les rgles prcites.
17.3 Les slecteurs de colonne

Les cellules des tables peuvent appartenir l'un ou l'autre de ces contextes, celui de range et celui de colonne.
Cependant, dans le document source, les cellules sont des descendants de ranges, et jamais de colonnes.
Nanmoins, certains aspects des cellules peuvent tre influencs par des proprits appliques aux colonnes.
Ces proprits s'appliquent aux lments des colonnes et de groupes de colonnes :
'border'
Les diverses proprits de bordure ne s'appliquent aux colonnes que si la valeur de la proprit
'bordercollapse' de l'lment table est 'collapse'. Dans ce cas, les bordures appliques aux colonnes et
groupes de colonnes sont soumises l'algorithme de rsolution de conflit qui va dterminer le style de ces
bordures chacun des bords des cellules ;
'background'
Les proprits d'arrireplan s'applique aux fonds des cellules de la colonne, mais seulement si les
cellules et ranges concernes ont des fonds transparents. Voir le passage intitul "Les couches de la table
et la transparence" ;
'width'
La proprit 'width' donne la largeur minimale de la colonne ;
'visibility'
Quand la proprit 'visibility' d'une colonne a la valeur 'collapse', aucunes des cellules de la colonne n'est
rendue et celles des cellules qui dborderaient dans d'autres colonnes sont rognes. De plus, la largeur de
la table est diminue de celle de la colonne qui aurait autrement t affiche. Voir le passage traitant des
effets dynamiques plus loin. Les autres valeurs admises pour la proprit 'visibility' n'ont pas d'effet.
Example(s) :
172

Voici quelques exemples de rgles de style appliquant des proprits aux colonnes. Les deux premires prises
ensemble reproduisent l'attribut "rules" de HTML avec la valeur "cols". La troisime rgle rend la colonne avec la
classe "total" en bleu, les deux dernires montrent la faon de construire une colonne de taille fixe l'aide de
l'algorithme de disposition fixe.
COL
{ borderstyle: none solid }
TABLE { borderstyle: hidden }
COL.total { background: blue }
TABLE { tablelayout: fixed }
COL.totals { width: 5em }
17.4 Les tables dans le modle de mise en forme visuel

Selon le modle de mise en forme visuel, une table peut se comporter comme un lment de type bloc ou comme
un lment remplac de type enligne. Les tables ont un contenu, un espacement, des bordures et des marges.
Dans ces deux cas, l'lment table gnre une bote anonyme, celleci contient la bote de la table ellemme et
celle de la lgende (si elle existe). Les botes de la table et de la lgende conservent leurs propres aires de contenu,
d'espacement, de marge et de bordure, les dimensions de la bote anonyme rectangulaire tant juste suffisantes
pour contenir cellesci. Les marges verticales en contact entre la bote de la table et celle de la lgende fusionnent.
Tout repositionnement de la table doit concerner la bote anonyme entire, et pas seulement la bote de la table, la
lgende suivant ainsi la table.
Schma d'une table avec une lgende suprieure, la marge du bas de la lgende fusionne avec celle du haut de la
table.
17.4.1 La position et l'alignement de la lgende
'captionside'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
top | bottom | left | right | inherit

top
ceux des lments 'tablecaption'
oui
sans objet
visuel
Cette proprit indique la position de la bote de la lgende en fonction de celle de la table. Les significations des
valeurs sont :
top
Place la bote de la lgende audessus de celle de la table ;
bottom
Place la bote de la lgende audessous de celle de la table ;
left
Place la bote de la lgende gauche de celle de la table ;
right
Place la bote de la lgende droite de celle de la table.
173

Les lgendes audessus d'un lment avec une valeur 'table', ou audessous celuici, sont mises en forme un peu
de la mme manire que pour un lment de type bloc avant la table, ou aprs celleci, la diffrence que les
lgendes (1) hritent des proprits de la table et (2) ne sont pas considres comme tant des botes de bloc pour
les lments prcdant la table, quand les proprits 'display' de ceuxci ont les valeurs 'compact' ou 'runin'.
Pour une lgende situe audessus ou endessous de la bote de la table, celleci se comporte aussi comme une
bote de bloc pour les calculs de largeur, ces calculs tant effectus par rapport la largeur du bloc conteneur de la
bote de la table.
Pour une lgende situe gauche ou droite de la bote de la table, d'autre part, c'est la valeur spcifie pour la
proprit 'width' quand la valeur est autre que 'auto', qui donne la largeur, une valeur 'auto' indiquant l'agent
utilisateur de prendre une "largeur raisonnable". Ceci variant de "la bote la plus troite possible" jusqu' "une
ligne seule", c'est pourquoi on recommande aux utilisateurs d'viter de choisir une valeur 'auto' pour les largeurs
des lgendes latrales.
Pour aligner horizontalement le contenu dans la bote de la lgende, utiliser la proprit 'textalign'. Pour aligner
verticalement les botes des lgendes latrales par rapport celle de la table, utiliser la proprit 'verticalalign'.
Dans ce cas, les seules valeurs reconnues sont 'top', 'middle' et 'bottom'. Les autres valeurs admises par cette
proprit sont considres comme tant 'top'.
Example(s) :
Dans cet exemple, la proprit 'captionside' place la lgende sous la table. Cette lgende sera aussi large que le
parent de la table et le contenu de celleci sera justifi gauche :
CAPTION { captionside: bottom;
width: auto;
textalign: left }
Exemple(s) :
L'exemple suivant montre comment placer une lgende dans la marge de gauche. La table ellemme est centre,
ses marges gauche et droite ayant la valeur 'auto', et l'ensemble de la bote contenant la table et la lgende est
dplac dans la marge de gauche de la mme quantit que la largeur de la lgende :
BODY {
marginleft: 8em
}
TABLE {
marginleft: auto;
marginright: auto
}
CAPTION {
captionside: left;
marginleft: 8em;
width: 8em;
textalign: right;
verticalalign: bottom
}
En supposant que la largeur de la table est infrieure la largeur totale disponible, la mise en forme serait
similaire celleci :
174
Schma montrant une table centre dont la lgende se rpand dans la marge de gauche, en rponse la valeur
ngative d'une proprit 'marginleft'.
17.5 La disposition visuelle des contenus de la table

Comme pour les autres lments du langage du document, les lments internes de la table gnrent des botes
rectangulaires avec un contenu et des bordures. Les cellules ont aussi un espacement. Les lments internes de la
table n'ont pas de marges.
La disposition visuelle de ces botes est rgie par un quadrillage rectangulaire irrgulier de ranges et de colonnes.
Chacune des botes occupe la totalit des cellules du quadrillage, selon les rgles ciaprs. Ces rgles ne
s'appliquent pas HTML 4.0 ni aux versions prcdentes de HTML, les tendues des ranges et colonnes
obissant ayant des limites propres HTML.
1. Chacune des botes des ranges occupe une range de cellules du quadrillage. Les botes des ranges
remplissent ensemble la table, allant du haut vers le bas, dans l'ordre o cellesci surviennent dans le
document source (ex. la table occupe exactement autant de ranges du quadrillage qu'il y a d'lments de
ranges) ;
2. Un groupe de ranges occupe les mmes cellules du quadrillage que les ranges contenues par celuici.
3. Une bote de colonne occupe une ou plusieurs colonnes de cellules du quadrillage. Les botes des
colonnes se placent l'une ct de l'autre, dans l'ordre o cellesci surviennent. La premire d'entre elles
peut se trouver gauche ou droite, en fonction de la valeur de la proprit 'direction' de la table.
4. Un groupe de colonnes occupe les mmes cellules du quadrillage que les colonnes contenues par celuici.
5. Les cellules peuvent s'tendre sur plusieurs ranges ou colonnes. Bien que CSS2 ne dfinisse pas
comment est dtermin le nombre de ranges ou colonnes qui s'tendent, un agent utilisateur peut avoir
une connaissance particulire du document source ; une version ultrieure de CSS pourrait en exprimer la
manire dans une syntaxe propre CSS. Ainsi chaque cellule a la forme d'une bote rectangulaire, dont la
largeur et la hauteur englobe une ou plusieurs cellules du quadrillage. La range du haut de ce rectangle
commence dans celle spcifie par le parent de la cellule. Le rectangle doit se trouver le plus possible
gauche, sans recouvrir une quelconque autre bote de cellule, et doit se trouver le plus possible la droite
des cellules de la mme range qui apparaissent plus tt dans le document source. Ceci quand la valeur de
la proprit 'direction' de la table est 'ltr', et a contrario, quand la valeur de cette proprit est 'rtl', inverser
les mots "gauche" et "droite" dans la phrase prcdente.
6. Une bote de cellule ne peut pas s'tendre audel de la dernire bote de range d'une table ou d'un
groupe de ranges, les agents utilisateurs doivent en rduire les dimensions jusqu' ce que celleci puisse
y tenir.
Note : On peut positionner les cellules d'une table, mais ce n'est pas recommand, car les positionnements absolu
et fixe, comme le flottement, soustraient la bote en question du flux normal, affectant ainsi la taille de la table.
Voici deux exemples, le premier intervenant dans un document HTML :
<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>
175

<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>
La seconde table est mise en forme selon l'illustration de droite. En HTML, le rendu de la table du premier
exemple n'est pas dfini explicitement, et en CSS pas du tout. Cette apprciation est laisse l'agent utilisateur
(ex. comme dans l'illustration de gauche).
gauche, une interprtation possible d'une table HTML 4.0 errone ; droite, la seule mise en forme possible
d'une table non HTML similaire.
17.5.1 Les couches de la table et la transparence
Dans le but de dterminer l'arrireplan de chacune des cellules de la table, on peut se reprsenter les divers
lments de celleci comme tant disposs sur six couches superposes. L'arrireplan d'un lment d'une couche
donne ne sera visible que si la couche qui vient pardessus celleci a un arrireplan transparent.
Schma des couches d'une table.

1.
La couche la plus basse, qui forme un seul plan, reprsente la bote de la table ellemme. Comme pour
toutes les botes, celleci peut tre transparente ;
2.
La couche suivante contient les groupes de colonnes. Ceuxci sont aussi haut que la table, mais ne
recouvrent pas ncessairement la table entire horizontalement ;
3.
Pardessus les groupes de colonnes viennent les aires reprsentant les botes des colonnes. Comme pour
les groupes de colonnes, les colonnes sont aussi haute que la table mais ne recouvrent pas ncessairement
la table entire horizontalement ;
176
4.

Ensuite vient la couche contenant les groupes de ranges. Chaque groupe de ranges est aussi large que la
table. L'ensemble des groupes de ranges recouvre compltement la table de haut en bas ;
5.
La couche suivante contient les ranges. Cellesci recouvrent galement la table en entier ;
6.
La couche suprieure contient les cellules ellesmmes. Ainsi que le montre l'illustration, et bien que les
ranges contiennent le mme nombre de cellules, certaines cellules peuvent n'avoir aucun contenu. Ces
cellules "vides" sont transparentes quand la valeur de leur proprit 'emptycells' est 'hide'.
Dans l'exemple suivant, la premire range contient quatre cellules, mais la seconde ne contient aucune cellule,
ainsi l'arrireplan de la table est visible au travers de cellesci, sauf l o une des cellules de la premire range
s'tend dans la seconde range. Soit le code HTML et les rgles de style :
<HTML>
<HEAD>
TABLE { background: #ff0; bordercollapse: collapse }
TD
{ background: red; border: double black }
</STYLE>
</HEAD>
<BODY>
<P>
<TABLE>
<TR>
<TD> 1
<TD rowspan="2"> 2
<TD> 3
<TD> 4
</TR>
<TR><TD></TD></TR>
</TABLE>
</BODY>
</HTML>
ceci pourrait tre mis en forme ainsi :
Une table avec trois cellules vides dans la range du bas.

Noter que pour 'bordercollapse: separate', l'arrireplan de l'aire donne par la proprit 'borderspacing' est
toujour celui de l'lment table. Voir 17.6.1.
17.5.2 Les algorithmes de largeur de table : la proprit 'tablelayout'
CSS ne dfinit pas de disposition "optimale" pour les tables dans la mesure o, pour de nombreux cas, ce qui est
optimal est une question de got. Par contre, CSS dfinit certaines contraintes que les agents utilisateurs doivent
respecter pour la disposition d'une table. Ceuxci peuvent employer l'algorithme de leur choix et sont libres de
favoriser la rapidit du rendu sur la prcision, sauf quand on slectionne celui dit "algorithme de disposition fixe".
Noter que les rgles dcrites dans ce chapitre surclassent celles pour le calcul des largeurs du chapitre 10.3. En
particulier, si pour la table les valeurs des marges sont '0' et celle de la largeur 'auto', la table ne prendra pas
automatiquement la taille ncessaire pour remplir son bloc conteneur. Cependant, une fois que la valeur calcule
pour 'width' est trouve ( l'aide des algorithmes dcrits plus bas ou, quand c'est appropri, par un algorithme
propre un certain agent utilisateur), les autres parties du chapitre 10.3 s'appliquent toujours. Ainsi, par exemple,
on peut centrer une table en spcifiant une valeur 'auto' pour ses marges gauche et droite.
'tablelayout'
Valeur :
Initiale :
S'applique :
auto | fixed | inherit

auto
ceux des lments dont la valeur de la proprit 'display' est 'table' ou 'inlinetable'
177

Hrite :
Pourcentage :
Mdias :
non
sans objet
visuel
La proprit 'tablelayout' contrle l'algorithme employ pour la disposition des cellules, des ranges et des
colonnes de la table. Les significations des valeurs sont :
fixed
Utilisation de l'algorithme de disposition de table fixe ;
auto
Utilisation d'un quelconque algorithme automatique pour la disposition de la table.
Les deux algorithmes sont dcrits cidessous.
La disposition de table fixe
Avec cet algorithme (rapide), la disposition horizontale de la table ne dpend pas du contenu des cellules, mais
seulement de la largeur de la table, de la largeur des colonnes, des bordures et de l'espacement entre les cellules.
On peut spcifier explicitement la largeur de la table avec la proprit 'width'. Une valeur 'auto' (dans le cas de
'display: table' et 'display: inlinetable') conduit l'emploi de l'algorithme de disposition de table automatique.
Dans l'algorithme de disposition de table fixe, la largeur de chacune des colonnes est dtermine ainsi :
1. Quand un lment de colonne a une valeur pour la proprit 'width' autre que 'auto', alors cette valeur est
retenue pour la largeur de cette colonne ;
2. Autrement, quand une cellule de la premi range a une valeur pour la proprit 'width' autre que 'auto',
cette valeur est retenue pour la largeur de cette colonne. Si cette cellule s'tend sur plus d'une colonne, la
largeur est divises entre les colonnes concernes ;
3. Les ventuelles colonnes restantes se partagent quitablement l'espace horizontal restant de la table
(moins les bordures et l'espacement entre les cellules).
Ainsi la largeur de la table est la plus grande des valeurs entre celle de la proprit 'width' de l'lment table et la
somme des largeurs des colonnes (plus l'espacement entre les cellules et les bordures).
De cette faon, l'agent utilisateur peut commencer afficher la table ds la rception de la premire range
effectue. Les cellules des ranges suivantes n'affectent pas les largeurs des colonnes. Toute cellule dont le
contenu dborderait s'appuie sur la proprit 'overflow' pour dterminer le rognage, ou non, du contenu qui a
dbord.
La disposition de table automatique
Avec cet algorithme (qui ne demande gnralement pas plus de deux itrations), la largeur de la table est donne
par celles de ses colonnes et des bordures intermdiaires. Cet algorithme reflte le comportement de plusieurs
agents utilisateurs courants au moment de la rdaction de cette spcification. Les agents utilisateurs ne sont pas
tenus de l'implmenter pour la dtermination de la disposition de la table, dans le cas o la valeur de la proprit
'tablelayout' est 'auto', et peuvent alors employer un algorithme quelconque.
Cet algorithme peut tre inefficace, l'agent utilisateur devant avoir connaissance du contenu entier de la table
avant de dterminer la disposition finale, et demander plus d'une itration.
On dtermine les largeurs des colonnes comme ceci :
1. Calculer la largeur minimale du contenu, note LMC, de chaque cellule : le contenu mis en forme peut
s'tendre sur un nombre indiffrent de lignes mais ne doit pas dborder de la bote de la cellule. Si la
valeur, note L, spcifie pour la proprit 'width' de la cellule est plus grande que LMC, alors cette
valeur L devient la largeur minimale de la cellule. Pour une valeur L de la proprit 'width' gale 'auto',
c'est LMC qui correspond la largeur minimale de la cellule ;
Calculer galement la largeur "maximale" de la cellule pour chaque cellule : la mise en forme du contenu
se fait alors sans retours la ligne sinon aux endroits explicitement indiqus ;
2. Pour chacune des colonnes, dterminer une largeur minimale et maximale partir des cellules qui
s'tendent dans celleci. La largeur minimale correspond celle de la cellule qui demande la plus grande
largeur minimale de cellule (ou la valeur de la proprit 'width' de la colonne, la plus grande entre ces
178

deux valeurs l'emporte). La largeur maximale correspond celle de la cellule qui demande la plus grande
largeur maximale de cellule (ou la valeur de la proprit 'width' de la colonne, la plus grande entre ces
deux valeurs l'emporte) ;
3. Pour chacune des cellules qui s'tendent sur plus d'une colonne, augmenter les largeurs minimales des
colonnes concernes de manire ce que leur runion soit aussi large que la cellule en question. Mme
chose pour leurs largeurs maximales. Si possible, largir approximativement ces colonnes d'une mme
quantit.
Ceci fournit une largeur minimale et maximale pour chaque colonne. Les largeurs des colonnes agissent sur la
largeur finale de la table ainsi :
1. Quand la valeur L spcifie pour la proprit 'width' d'un lment 'table', ou 'inlinetable', est autre que
'auto', alors la valeur calcule pour cette proprit correspond celle la plus grande entre L et la largeur
minimale requise par l'ensemble des colonnes plus l'espacement entre les cellules et les bordures, cette
valeur tant note MIN. Si L est plus grand que MIN, la diffrence de largeur devrait tre rpartie entre
les colonnes ;
2. Quand, pour un lment 'table' ou 'inlinetable', la valeur spcifie pour 'width' est 'auto', la largeur
calcule pour la table correspond la largeur la plus grande entre celle du bloc conteneur de la table et
MIN. Cependant, si la largeur maximale requise par les colonnes plus l'espacement entre les cellules et les
bordures, cette valeur tant note MAX, est infrieure celle du bloc conteneur, alors utiliser MAX ;
Une valeur en pourcentage pour la largeur d'une colonne s'entend relativement la largeur de la table. Quand la
valeur de la proprit 'width' de la table est 'auto', un pourcentage exerce une contrainte sur la largeur de la
colonne, ce qu'un agent utilisateur devrait essayer de rsoudre (ceci n'est videmment pas toujours possible, par
exemple, si la largeur de la colonne tait 110%, la contrainte ne pourrait pas tre respecte).
Note : Avec cet algorithme, les ranges (et groupes de ranges) et les colonnes (et groupes de colonnes) la fois
contraignent et sont tributaires des dimensions des cellules qui y sont contenues. La spcification de la largeur
d'une colonne peut avoir une influence indirecte sur la hauteur d'une range, et inversement.
17.5.3 Les algorithmes de la hauteur de table
La hauteur d'une table est donne par la proprit 'height' de l'lment 'table' ou 'inlinetable'. Pour une valeur
'auto' de celleci, la hauteur correspond la somme des hauteurs des ranges plus les ventuels espacements entre
les cellules et les bordures. Toute autre valeur indique une hauteur explicite, la table peut ainsi plus haute, ou
moins haute, que la hauteur totale des ranges. CSS2 ne prcise pas les modalits de rendu quand la hauteur
spcifie pour la table diffre de celle de son contenu, en particulier si la hauteur du contenu devrait prendre le pas
sur celle spcifie, et sinon, comment l'espace supplmentaire devrait tre rparti entre les ranges dont le total
des hauteurs est infrieur la hauteur de la table, ou encore, quand la hauteur du contenu dpasse celle spcifie
pour la table, si l'agent utilisateur devrait proposer un mcanisme de dfilement. Note : Des versions ultrieures de
CSS pourraient approfondir cette question.
La hauteur de la bote d'un lment 'tablerow' est calcule une fois que l'agent utilisateur dispose de toutes les
cellules d'une range donne, c'est la valeur maximale spcifie pour la proprit 'height' et la hauteur minimale,
note MIN, requise par les cellules. Quand, pour un lment 'tablerow', la proprit 'height' a la valeur 'auto', la
hauteur calcule de la range correspond MIN. Cette valeur MIN dpend des hauteurs des botes des cellules et
de l'alignement de cellesci (tout comme pour le calcul de la hauteur d'une bote de ligne). CSS2 ne dfinit pas
quoi se rapportent les valeurs en pourcentage de la proprit 'height' des ranges et groupes de ranges des tables.
En CSS2, la hauteur de la bote d'une cellule correspond la valeur maximale de la proprit 'height' de la cellule
en question et la hauteur minimale requise par son contenu (MIN). Pour la proprit 'height', une valeur spcifie
'auto' induit une valeur calcule gale MIN. CSS2 ne dfinit pas quoi se rfrent les valeurs en pourcentage de
la proprit 'height' des cellules des tables.
CSS2 ne spcifie pas comment les cellules qui s'tendent sur plus d'une range influencent les calculs de la
hauteur d'une range, sauf sur ce qui tient la somme des hauteurs des ranges concernes, celleci devant tre
suffisamment grande pour contenir la cellule qui s'tend sur ces ranges.
La proprit 'verticalalign' de chacune des cellules de la table en dtermine l'alignement dans la range. Le
contenu de chaque cellule comprend une ligne de base, un haut et un bas, comme la range ellemme. Dans le
contexte des tables, les significations des valeurs admises par la proprit 'verticalalign' sont :
baseline
La ligne de base de la cellule se place la mme hauteur que celle de la premire range dans laquelle
celleci s'tend (voir plus loin les dfinitions des lignes de base des cellules et des ranges) ;
179

top
Le haut de la bote de la cellule s'aligne sur le haut de la premire range dans laquelle celleci s'tend ;
bottom
Le bas de la bote de la cellule s'aligne sur celui de la dernire range dans laquelle celleci s'tend ;
middle
Le milieu de la cellule s'aligne sur celui des ranges dans lesquelles celleci s'tend ;
sub, super, texttop, textbottom
Ces valeurs ne s'appliquent pas aux cellules ; pour une de ces valeurs, la cellule s'aligne sur la ligne de
base la place.
La ligne de base d'une cellule correspond celle de la premire bote de ligne de la cellule. Quand celleci ne
contient pas de texte, cette ligne de base correspond celle de l'objet qui s'y tient, ou s'il n'y en a pas, au bas de la
bote de la cellule. C'est la distance maximale entre le haut de la bote de la cellule et la ligne de base entre toutes
les cellules, dont la valeur de la proprit 'verticalalign' est 'baseline', qui dtermine la ligne de base de la range.
Voici un exemple :
Schma montrant les effets de diverses valeurs de la proprit 'verticalalign' sur les cellules d'une table.
Les botes des cellules 1 et 2 s'alignent sur leur ligne de base. La bote de cellule 2 ayant la plus grande hauteur
audessus de sa ligne de base, c'est elle qui dtermine la ligne de base de la range. Noter que, si aucune cellule
ne s'alignait sur sa ligne de base, la range n'aurait pas (ou n'aurait pas besoin) de ligne de base.
Pour viter des situations ambiges, l'alignement des cellules se dtermine dans cet ordre :
1. On positionne en premier les cellules alignes sur leur ligne de base. Ceci tablit la ligne de base de la
range. Ensuite, on positionne les cellules dont la valeur de la proprit 'verticalalign' est 'top' ;
2. La range a maintenant un haut, ventuellement une ligne de base et une hauteur provisoire qui
correspond la distance entre le haut et le point le plus bas des cellules positionnes jusqu'ici (voir les
conditions d'espacement de la cellule plus loin) ;
3. Si une des cellules restantes, celles qui sont alignes en bas ou au milieu, a une hauteur plus grande que la
hauteur provisoire, alors la hauteur de la range est augmente jusqu'au maximum de cellesci, en
dplaant le bas ;
4. Et finalement, on positionne les autres cellules.
Les botes de cellule moins grandes que la hauteur de la range reoivent un espacement supplmentaire en haut
ou en bas.
17.5.4 L'alignement horizontal dans une colonne
On spcifie l'alignement horizontal du contenu d'une cellule dans sa bote avec la proprit 'textalign'.
Pour plus d'une cellule dans une colonne, quand on spcifie une valeur de <chane> la proprit 'textalign', le
contenu de ces cellules s'aligne sur un axe vertical. Le dbut de la chane touche cet axe. C'est le sens de lecture
qui dtermine de quel ct se situe la chane par rapport l'axe.
Un alignement du texte de cette manire ne prsente un intrt que si le texte tient sur une seule ligne. Le rsultat
n'est pas dfini quand le contenu de la cellule s'tend sur plusieurs lignes.
180

Quand la valeur de la proprit 'textalign' est une chane et que celleci n'apparat pas dans le contenu de la
cellule, c'est la fin de celuici qui touche l'axe d'alignement vertical.
Noter que les chanes ne doivent pas forcment tre les mmes pour chacune des cellules, bien que ce soit
gnralement le cas.
CSS n'offre aucun moyen de spcifier le dcalage entre l'axe d'alignement vertical et le bord d'une bote de
colonne.
Exemple(s) :
Soit la feuille de style :
TD { textalign: "." }
TD:before { content: "$" }
cette feuille de style associe avec cette table HTML :

<TABLE>
<COL width="40">
<TR> <TH>Appels hors circonscription
<TR> <TD> 1.30
<TR> <TD> 2.50
<TR> <TD> 10.80
<TR> <TD> 111.01
<TR> <TD> 85.
<TR> <TD> 90
<TR> <TD> .05
<TR> <TD> .06
</TABLE>
Ceci fera que le signe montaire dollar va s'aligner sur le point dcimal. En complment, on a utilis le
pseudolment :before pour insrer le signe dollar devant chacun des chiffres. La table pourrait tre rendue ainsi
:
Appels hors circonscription :
$1.30
$2.50
$10.80
$111.01
$85.
$90
$.05
$.06
17.5.5 Les effets dynamiques des ranges et colonnes

La proprit 'visibility' accepte la valeur 'collapse' pour les lments des ranges, groupes de ranges, colonnes et
groupes de colonnes. Avec cette valeur, la range ou la colonne entires ne sont pas affiches et l'espace
normalement occup par cellesci devient disponible pour d'autres contenus. Cependant, leur suppression
n'affecte pas pour autant la disposition de la table. Ceci permet des effets dynamiques qui ne provoquent pas une
redisposition de la table pour tenir compte des changements potentiels des contraintes des colonnes.
17.6 Les bordures

CSS propose deux modles distincts pour la spcification des bordures des cellules des tables. L'un, appel
modle des bordures spares, convient pour spcifier des bordures autour de cellules individuelles, l'autre
convient pour des bordures continues d'un ct de la table l'autre. On peut obtenir plusieurs styles de bordure
selon le modle employ, le choix de l'un ou de l'autre tant affaire de got.
'bordercollapse'
Valeur :
Initiale :
S'applique :
Hrite :
Percentages:
Mdias :
collapse | separate | inherit

collapse
ceux des lments dont la valeur de la proprit 'display' est 'table' ou 'inlinetable'
oui
sans objet
visuel
181

Cette proprit permet la slection du modle de bordure d'une table. Pour une valeur 'separate', on slectionne le
modle des bordures spares, pour la valeur 'collapse', celui des bordures fusionnes. Voici leur description
cidessous.
17.6.1 Le modle des bordures spares
'borderspacing'
Valeur :
Initiale :
S'applique :
Hrite :
Percentages:
Mdias :
<longueur> <longueur>? | inherit

0
ceux des lments dont la proprit 'display' a la valeur 'table' ou 'inlinetable'
oui
N/A
visuel
Les longueurs spcifient la distance qui sparent les bordures de cellules adjacentes. Quand on ne spcifie qu'une
longueur, ceci donne l'espacement horizontal et vertical. Quand on spcifie deux longueurs, la premire donne
l'espacement horizontal et la deuxime celui vertical. Ces longueurs ne peuvent pas tre ngatives.
Dans ce modle, chaque cellule a une bordure individuelle. La proprit 'borderspacing' indique la distance entre
les bordures de cellules adjacentes. Cet espace est combl par l'arrireplan de l'lment table. Les ranges,
colonnes, groupes de ranges et de colonnes ne peuvent pas avoir de bordures (c..d. les agents utilisateurs doivent
ignorer les proprits de bordure de ces lments).
Exemple(s) :
La table dont l'illustration suit pourrait tre le rsultat d'une feuille de style comme celleci :
TABLE
{ border: outset 10pt;

bordercollapse: separate;
borderspacing: 15pt }
TD
{ border: inset 5pt }
TD.special { border: inset 10pt } /* La cellule en haut gauche */
Une table dont la proprit 'borderspacing' n'a qu'une valeur de longueur. Noter que chacune des cellules a sa
propre bordure tout comme la table une bordure spare.
Les bordures autour des cellules vides : la proprit 'emptycells'
'emptycells'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
182
show | hide | inherit

show
ceux des lments dont la valeur de la proprit 'display' est 'tablecell'
oui
sans objet
visuel

Dans le modle des bordures spares, cette proprit contrle le rendu de l'arrireplan des cellules et des
bordures autour de cellesci, ces cellules n'ayant pas de contenu. Les cellules vides et celles dont la proprit
'visibility' a la valeur 'hide' se comportent comme si elles n'avaient pas de contenu visible. Par contenu visible, on
entend " " et les autres blancs, sauf les caractres ASCII retour chariot ("\0D"), nouvelle ligne ("\0A"),
tabulation ("\09") et espace ("\20").
Quand cette proprit a la valeur 'show', les bordures sont dessines autour des cellules vides (comme pour les
cellules normales).
Pour la valeur 'hide', aucune bordure n'est dessine autour des cellules vides. De plus, si toutes les cellules d'une
range ont la valeur 'hide' et n'ont pas de contenu visible, la range entire se comporte comme si la valeur de la
proprit 'display' de celleci avait t 'none'.
Exemple(s) :
Cette rgle autorise le dessin des bordures autour de chacune des cellules :
TABLE { emptycells: show }
17.6.2 Le modle des bordures fusionnes

Dans le modle des bordures fusionnes, on peut spcifier des bordures, entirement ou en partie, autour d'une
cellule, d'une range, d'un groupe de range, d'une colonne ou d'un groupe de colonnes. Les bordures pour
l'attribut HTML "rule" peuvent tre spcifies de cette manire.
Les bordures se centrent sur les lignes du quadrillage entre les cellules. Les agents utilisateurs doivent trouver une
rgle d'arrondi cohrente dans le cas d'un nombre impair d'units discrtes (les pixels l'cran, les points d'une
imprimante).
Le schma plus loin montre l'interaction de la largeur de la table, des paisseurs des bordures, de l'espacement et
de la largeur de la cellule. Leur relation est donne par l'quation suivante, celleci est valable pour chacune des
ranges de la table :
largeurrange = (0.5 * paisseurbordure 0 ) + espacementgauche 1 + largeur 1 +
espacementdroit1 + paisseurbordure1 + espacementgauche2 +...+
espacementdroitn + (0.5 * paisseurborduren)
Ici, n reprsente le nombre de cellules de la range, paisseurbordurei se rfre la bordure entre les cellules i
et i + 1, et espacementgauchei et espacementdroiti se rfrent respectivement l'espacement gauche et droite de
la cellule i. Noter que seule la moiti des deux bordures extrieures est compte dans la largeur de la table, l'autre
moiti se trouvant dans l'aire de la marge.
183

Schma montrant les dimensions des cellules et de leurs bordures ainsi que l'espacement des cellules.
Noter que dans ce modle, la largeur de la table inclut la moiti de la bordure de celleci. galement, une table n'a
pas d'espacement (mais elle a des marges).
La rsolution des conflits de bordure
Dans le modle des bordures fusionnes, on peut spcifier les bordures de chacun des bords de chacune des
cellules avec les proprits de bordure pour les divers lments qui ont des bords communs (ceux des cellules,
ranges, groupes de ranges, colonnes, groupes de colonnes et de la table ellemme), ces bordures peuvent varier
en style, taille et couleur. En rgle gnrale, pour un bord donn, c'est le style de bordure "attirant le plus
l'attention" qui est retenu, sauf quand survient ventuellement la proprit 'borderstyle' avec une valeur 'hidden',
ce qui a pour effet inconditionnel de supprimer l'affichage de la bordure.
En cas de conflit, les rgles suivantes dterminent lequel des styles de bordure l'emporte :
1. Les bordures contrles par la proprit 'borderstyle' avec la valeur 'hidden' sont considres avant toutes
celles intervenant dans le conflit. Cette valeur cause la suppression de toutes les bordures cet endroit ;
2. Les bordures dont la valeur de la proprit 'borderstyle' est 'none' ont la plus faible priorit. Une bordure
ne sera omise que quand toutes les proprits de bordure des lments convergents sur ce bord auront une
valeur 'none' (noter en passant que c'est la valeur par dfaut pour la proprit 'borderstyle') ;
3. Si aucun des styles de bordure de ces lments n'est 'hidden' et au moins l'un d'entre eux n'est pas 'none',
alors les bordures les plus larges sont retenues, les plus troites rejetes. Si plusieurs d'entre eux ont la
mme valeur pour leur proprit 'borderwidth', alors on retiendra le style de bordure dans cet ordre de
priorit 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove' et enfin, celui de moindre poids, 'inset' ;
4. Si les styles de bordure ne diffrent que par leur couleur, alors le style de bordure d'une cellule l'emporte
sur celui d'une range, ce dernier l'emporte son tour sur celui d'un groupe de ranges, puis en succesion,
sur celui d'une colonne, sur celui d'un groupe de colonnes et finalement, sur celui de la table.
Exemple(s) :
L'exemple suivant illustre l'application de ces rgles de prsance. Soit la feuille de style :
TABLE
{ bordercollapse: collapse;
border: 5px solid yellow; }
*#col1
{ border: 3px solid black; }
TD
{ border: 1px solid red; padding: 1em; }
TD.solidblue { border: 5px dashed blue; }
TD.solidgreen { border: 5px solid green; }
celleci associe avec cette source HTML :

<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
<TD> 1
<TD> 2
<TD> 3
</TR>
<TR id="row2">
<TD> 4
<TD class="solidblue"> 5
<TD class="solidgreen"> 6
</TR>
<TR id="row3">
<TD> 7
<TD> 8
<TD> 9
</TR>
<TR id="row4">
<TD> 10
<TD> 11
<TD> 12
</TR>
<TR id="row5">
<TD> 13
<TD> 14
<TD> 15
</TR>
</TABLE>
184

ceci produirait quelque chose comme :
Un exemple de table avec des bordures fusionnes.

Exemple(s) :
Cet exempleci montre une table avec des traits horizontaux entre les ranges. La bordure du haut de la table a
une valeur 'hidden', ce qui a pour effet de supprimer la bordure du haut de la premire range. C'est une
implmentation de l'attribut "rules" en HTML 4.0 (rules="rows") :
TABLE[rules=rows] TR { bordertop: solid }
TABLE[rules=rows]
{ bordercollapse: collapse;
bordertop: hidden }
Une table avec des traits horizontaux entre les ranges.

On aurait pu obtenir le mme effet, sans utiliser la valeur 'hidden' pour la bordure de la table, en donnant un style
distinct la premire range, le choix de l'une ou l'autre mthode tant une affaire de got :
TR:firstchild { bordertop: none }
TR { bordertop: solid }
Exemple(s) :
Voici un autre exemple de bordures fusionnes caches :
Une table avec deux bordures internes absentes.

La source HTML :
<TABLE style="bordercollapse: collapse; border: solid;">
<TR><TD style="borderright: hidden; borderbottom: hidden">foo</TD>
<TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
<TD style="border: solid">bar</TD></TR>
</TABLE>
17.6.3 Les styles de bordure

Certaines valeurs de la proprit 'borderstyle' ont une signification diffrente dans le contexte des tables que dans
celui des autres lments. Cellesci sont repres par un astrisque dans la liste qui suit :
185

none
Aucune bordure ;
*hidden
Mme chose que pour 'none', cependant, dans le modle des bordures fusionnes, cette valeur a une action
inhibitrice sur les autres bordures (voir les conflits de bordures) ;
dotted
La bordure est constitue d'une succession de points ;
dashed
La bordure est constitue d'une succession de petits traits ;
solid
La bordure est constitue d'un trait plein ;
double
La bordure est constitue de deux traits pleins. La somme de leur paisseur et de l'espace entre eux est
gale la valeur de la proprit 'borderwidth' ;
groove
La bordure semble avoir t grave dans le canevas ;
ridge
L'oppos de 'groove', la bordure semble tre en relief sur le canevas ;
*inset
Dans le modle des bordures spares, la bordure donne l'impression que la bote entire est incruste
dans le canevas. Dans le modle des bordures fusionnes, mme effet que 'groove' ;
*outset
Dans le modle des bordures spares, la bordure donne l'impression que la bote entire est extrude du
canevas. Dans le modle des bordures fusionnes, mme effet que 'ridge'.
17.7 Le rendu auditif des tables

Lors de la diction d'une table par un synthtiseur de parole, les relations entre les cellules de donnes et celles des
enttes doivent tre exprimes diffremment, selon que ces cellules sont alignes horizontalement ou
verticalement. Certains navigateurs avec synthse de parole permettent l'utilisateur de se mouvoir dans un
espace en deux dimensions, leur donnant ainsi la possibilit d'une reprsentation spatiale de ces relations. Quand
cela n'est pas possible, la feuille de style doit spcifier les endroits o les enttes sont annonces.
17.7.1 Les enttes parles : la proprit 'speakheader'
'speakheader'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
once | always | inherit

once
ceux des lments avec une information d'entte de table
oui
sans objet
auditif
Cette proprit indique si les enttes de table sont parles avant chacune des cellules ou seulement avant une
cellule quand celleci est associe une entte diffrente de la cellule prcdente. Les significations des valeurs
sont :
once
L'entte est annonce une fois, avant une succession de cellules ;
always
L'entte est annonce chaque fois, avant chacune des cellules pertinentes.
Chaque langage de document peut avoir un mcanisme diffrent permettant aux auteurs la spcification des
enttes. Par exemple en HTML 4.0 ([HTML40]), on peut spcifier une information d'entte l'aide de trois
attributs diffrents ("headers", "scope" et "axis"), cette spcification prcisant un algorithme pour dterminer cette
information d'entte en l'absence de ces attributs.
186
Illustration d'une table dont les cellules d'entte ("San Jose" et "Seattle") ne se trouvent pas dans la mme range,
ou colonne, que les donnes auxquelles elles s'appliquent.
Cet exemple en HTML prsente les notes de frais, repas, htels et transport, pour un sjour de plusieurs jours dans
deux dplacements. Conceptuellement, on peut considrer cette table comme un espace en plusieurs dimensions.
Les enttes de cet espace sont : le lieu du dplacement, la date, la catgorie de frais et les soustotaux. Certaines
cellules dfinissent des repres le long d'un axe alors que d'autres reprsentent l'argent dpens, des points de cet
espace. Voici le balisage pour cette table :
<TABLE>
<CAPTION>Rapport de frais de dplacement</CAPTION>
<TR>
<TH></TH>
<TH>Repas</TH>
<TH>Htels</TH>
<TH>Transports</TH>
<TH>Soustotaux</TH>
</TR>
<TR>
<TH id="sanjose" axis="sanjose">San Jose</TH>
</TR>
<TR>
<TH headers="sanjose">25Aug97</TH>
<TD>37.74</TD>
<TD>112.00</TD>
<TD>45.00</TD>
<TD></TD>
</TR>
<TR>
<TH headers="sanjose">26Aug97</TH>
<TD>27.28</TD>
<TD>112.00</TD>
<TD>45.00</TD>
<TD></TD>
</TR>
<TR>
<TH headers="sanjose">subtotal</TH>
<TD>65.02</TD>
<TD>224.00</TD>
<TD>90.00</TD>
<TD>379.02</TD>
</TR>
<TR>
<TH id="seattle" axis="seattle">Seattle</TH>
</TR>
<TR>
<TH headers="seattle">27Aug97</TH>
<TD>96.25</TD>
<TD>109.00</TD>
<TD>36.00</TD>
<TD></TD>
</TR>
<TR>
<TH headers="seattle">28Aug97</TH>
<TD>35.00</TD>
<TD>109.00</TD>
<TD>36.00</TD>
<TD></TD>
187

</TR>
<TR>
<TH headers="seattle">subtotal</TH>
<TD>131.25</TD>
<TD>218.00</TD>
<TD>72.00</TD>
<TD>421.25</TD>
</TR>
<TR>
<TH>Totals</TH>
<TD>196.27</TD>
<TD>442.00</TD>
<TD>162.00</TD>
<TD>800.27</TD>
</TR>
</TABLE>
En produisant le modle des donnes de cette manire, les auteurs autorisent une exploration plus riche de la table
par les navigateurs synthtiseurs de parole, par exemple, chaque cellule pourrait tre numre dans une liste,
l'entte concerne tant rpte avant chacune des cellules de donnes :
San Jose, 25Aug97, Repas : 37.74
San Jose, 25Aug97, Htels : 112.00
San Jose, 25Aug97, Transports : 45.00
...
Le navigateur pourrait aussi dire les enttes quand cellesci changent :

San Jose, 25Aug97, Repas : 37.74
Htels : 112.00
Transports : 45.00
26Aug97, Repas : 27.28
Htels : 112.00
...
188
18 L'interface utilisateur
18.1 Les curseurs : la proprit 'cursor'
'cursor'
Valeur :
Initiale :
S'applique
:
Hrite :
Pourcentage
:
Mdias :
[ [<uri> ,]* [ auto | crosshair | default | pointer | move | eresize | neresize | nwresize |
nresize | seresize | swresize | sresize | wresize| text | wait | help ] ] | inherit
auto
tous les lments
oui
sans objet
visuel, interactif
Cette proprit spcifie le type de curseur qui sera affich pour l'appareil de pointage. Les significations des
valeurs sont :
auto
L'agent utilisateur dtermine lequel des curseurs employer selon un contexte donn
crosshair
Une marque en croix (ex. deux traits formant un signe "+" ;
default
Le curseur par dfaut dpendant de la plateforme. Souvent rendu par une flche ;
pointer
Le curseur est reprsent par un doigt indiquant un lien ;
move
Indique un objet qu'on peut dplacer ;
eresize, neresize, nwresize, nresize, seresize, swresize, sresize, wresize
Indique que le bord d'un certain objet peut tre dplacer. Par exemple, la valeur 'seresize' est utilise
pour un mouvement commenant du coin sudest de la bote ;
text
Indique qu'on peut slectionner le texte. Souvent rendu par une barre en I ;
wait
Indique un programme en progression, l'utilisateur devrait en attendre l'achvement. Souvent rendu par
une montre ou un sablier ;
help
Une aide est disponible pour l'objet survol par le curseur. Souvent rendu par un point d'interrogation ou
une bulle ;
<uri>
L'agent utilisateur charge le curseur partir de la ressource dsigne par l'URI. Quand l'agent utilisateur,
dans une liste de curseur, ne peut pas prendre en charge le premier curseur, il devrait essayer avec le
deuxime, et ainsi de suite. Si celuici ne peut rien faire avec aucun des curseurs de la liste, il doit utiliser
le curseur gnrique plac la fin de celleci.
Exemple(s) :
P { cursor : url("mything.cur"), url("second.csr"), text; }
18.2 Les prfrences de couleur de l'utilisateur

En plus de la possibilit de prdfinir les valeurs de couleur du texte, de l'arrireplan, etc., CSS2 permet aux
auteurs la spcification de couleurs de faon les intgrer dans l'environnement graphique de l'utilisateur. Les
feuilles de style qui prennent en compte les prfrences de l'utilisateur offrent ainsi certains avantages :
1. Des pages qui s'accordent avec les choix dfinis par l'utilisateur ;
2. Des pages qui peuvent tre plus accessibles, l'utilisateur ayant pu effectuer des rglages pour pallier une
dficience donne.
On a voulu que le jeu des valeurs dfinies pour les couleurs systme soit exhaustif. Pour les systmes n'ayant pas
de valeur correspondante, la valeur spcifie devrait tre relie l'attribut systme le plus proche ou une couleur
par dfaut.
189

Voici la liste des valeurs supplmentaires des attributs CSS lis la couleur et leurs significations. Toute proprit
de couleur (ex. 'color' ou 'backgroundcolor') peut prendre l'un des noms suivants. Bien que ceuxci ne soient pas
sensibles la casse, on recommande leur capitalisation mlange comme cidessous, pour une meilleure lisibilit.
ActiveBorder
La bordure de la fentre active ;
ActiveCaption
La lgende de la fentre active ;
AppWorkspace
La couleur d'arrireplan de l'interface de documents multiples ;
Background
L'arrireplan du plan de travail ;
ButtonFace
La couleur de la police des lments d'affichage en trois dimensions ;
ButtonHighlight
La couleur d'activation des lments d'affichage en trois dimensions (pour les bords l'oppos de la
source lumineuse) ;
ButtonShadow
La couleur de l'ombre des lments d'affichage en trois dimensions ;
ButtonText
Le texte des boutons pousser ;
CaptionText
Le texte des lgendes, des botes de dimensionnement et des botes des flches des barres de dfilement ;
GrayText
Le texte en gris (dsactiv). Cette couleur prend la valeur #000 si un driver d'affichage donn ne peut
rendre srement la couleur grise ;
Highlight
L'article, ou les articles, slectionns dans une zone de saisie ;
HighlightText
Le texte de l'article, ou des articles, slectionns dans une zone de saisie ;
InactiveBorder
La bordure d'une fentre inactive ;
InactiveCaption
La lgende d'une fentre inactive ;
InactiveCaptionText
La couleur du texte d'une lgende inactive ;
InfoBackground
La couleur de fond des infobulles ;
InfoText
La couleur du texte des infobulles ;
Menu
L'arrireplan d'un menu ;
MenuText
Le texte d'un menu ;
Scrollbar
L'aire grise d'une barre de dfilement ;
ThreeDDarkShadow
L'ombre sombre des lments d'affichage en trois dimensions ;
ThreeDFace
La couleur de la police des lments d'affichage en trois dimensions ;
ThreeDHighlight
La couleur d'activation des lments d'affichage en trois dimensions ;
ThreeDLightShadow
L'ombre claire des lments d'affichage en trois dimensions (pour les bords faisant face la source
lumineuse) ;
ThreeDShadow
L'ombre des lments d'affichage en trois dimensions ;
Window
L'arrireplan de la fentre ;
WindowFrame
Le cadre de la fentre ;
WindowText
Le texte des fentres.
Exemple(s) :
190

Par exemple, pour que les couleurs d'avantplan et d'arrireplan d'un paragraphe soient les mmes que celles de
la fentre de l'utilisateur :
P { color: WindowText; backgroundcolor: Window }
18.3 Les prfrences de police de l'utilisateur

Comme pour les couleurs, les auteurs peuvent spcifier des polices de manire utiliser les ressources du systme
de l'utilisateur. Consulter la proprit 'font' pour des dtails.
18.4 Les contours dynamiques : la proprit 'outline'

Parfois, les auteurs de feuilles de style peuvent souhaiter crer des contours autour d'objets visuels, comme les
boutons, les champs actifs des formulaires, les images dcoupes, etc., pour les faire ressortir. Les contours CSS2
diffrent des bordures ainsi :
1. Les contours n'occupent pas d'espace ;
2. Les contours peuvent avoir une forme non rectangulaire.
Les proprits de contour rgissent le style de ces contours dynamiques.
'outline'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
[ <'outlinecolor'> || <'outlinestyle'> || <'outlinewidth'> ] | inherit

tous les lments
non
sans objet
visuel, interactif
'outlinewidth'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
medium
tous les lments
non
sans objet
visuel, interactif
'outlinestyle'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
none
tous les lments
non
sans objet
visuel, interactif
'outlinecolor'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<couleur> | invert | inherit

invert
tous les lments
non
sans objet
visuel, interactif
Le contour produit par les proprits de contour est dessin "par dessus" la bote, c..d. le contour est toujours
audessus de celleci et n'influence pas sur son placement ou sur sa taille, et sur aucune des autres botes. De ce
fait, l'affichage, ou la suppression, des contours ne provoque pas une nouvelle mise en forme de la page.
Le contour est dessin juste en dehors du bord de la bordure.
Les contours peuvent avoir une forme non rectangulaire. Par exemple, quand un lment est distribu sur
plusieurs lignes, le contour correspond celui minimum qui englobe toutes les botes de l'lment. l'inverse des
bordures, le contour ne s'ouvre pas la fin ou au dbut de la bote de ligne, et celuici est toujours entirement
connect.
La proprit 'outlinewidth' admet les mmes valeurs que celles de la proprit 'borderwidth'.
191

La proprit 'outlinestyle' admet les mmes valeurs que celles de la proprit'borderstyle', sauf la valeur
'hidden' qui n'est pas admise pour un style de contour.
La proprit 'outlinecolor' admets toutes les valeurs de couleur, avec en plus le motcl 'invert'. Celuici produit
l'inversion des couleurs des pixels l'cran. C'est une astuce courante pour s'assurer que la bordure active soit
visible, indpendamment de la couleur du fond.
La proprit raccourcie 'outline' property is a sert la spcification des valeurs pour les trois proprits
individuelles 'outlinestyle', 'outlinewidth' et 'outlinecolor'.
Noter que le contour est le mme pour tous les cts, l'inverse des bordures, il n'existe pas de proprits
'outlinetop' ou 'outlineleft'.
Cette spcification ne dfinit pas, quand plusieurs contours se chevauchent, comment ceuxci sont dessins ni
comment le faire pour les botes dont des parties sont caches derrire d'autres lments.
Note : Le contour d'activation [ndt. focus outline] n'affectant pas la mise en forme (c..d. aucun espace n'est
consacr aux contours dans le modle de la bote), celuici peut trs bien dborder sur d'autres lments de la
page.
Exemple(s) :
Voici un exemple de dessin d'un contour pais autour d'un lment BUTTON :
BUTTON { outlinewidth : thick }
On peut employer un script pour le changement dynamique de l'paisseur du contour, sans induire une remise en
forme de la page.
18.4.1 Les contours et la slection [ndt. focus]
Les interfaces graphiques des utilisateurs peuvent employer des contours autour des lments pour confirmer
ceuxci lequel des lments de la page est slectionn. Ces contours s'ajoutent aux ventuelles bordures de ces
lments, leur slection ou dslection ne devant pas provoquer une nouvelle mise en forme de la page. La
slection d'un lment d'un document relve d'une action de l'utilisateur (ex. saisie d'un texte, slection d'un
bouton, etc.). Les agents utilisateurs reconnaissant le groupe de mdia interactif doivent conserver l'information
relative l'endroit o intervient la slection et doivent aussi en donner une reprsentation. Ceci peut tre ralis
l'aide de contours dynamiques en conjonction avec la pseudoclasse :focus.
Exemple(s) :
Par exemple, on peut employer les rgles suivantes pour faire apparatre un trait noir pais autour d'un lment
slectionn, ce trait devenant rouge quand on l'active :
:focus { outline: thick solid black }
:active { outline: thick solid red }
18.5 La magnification
Le groupe de travail de CSS considre que la magnification d'un document, ou de parties de celuici, ne devrait
pas tre spcifie par des feuilles de style. Les agents utilisateurs peuvent en avoir une interprtation de diffrentes
faons (ex. images agrandies, volumes sonores augments, etc.).
Lors de la magnification d'une page, les agents utilisateurs devraient conserver les relations entre les lments
positionns. Par exemple, une bande dessine peut se composer d'images sur lesquelles viennent s'appliquer des
lments de texte. Quand un agent utilisateur magnifie celleci, le texte devrait rester dans les bulles de la bande
dessine.
192
19 Les feuilles de styles auditives

19.1 Introduction aux feuilles de styles auditives
Le rendu auditif d'un document, dj couramment employ par la communaut des aveugles et des lecteurs
dficients, combine la synthse de la parole avec des "images auditives". Une telle prsentation auditive est
souvent ralise, suite une conversion du document en un texte plein, par un lecteur d'cran (un logiciel ou un
appareil qui lit simplement tous les caractres apparaissant l'cran). Ceci conduit une prsentation bien moins
efficace que si la structure du document avait t conserve. On peut utiliser les proprits des feuilles de style
pour une prsentation auditive en mme temps que visuelle (mdias mlangs) ou comme une alternative auditive
une prsentation visuelle.
En dehors des avantages vidents pour l'accessibilit des documents, il existe d'autres marchs importants pour
l'coute d'informations, savoir pour une utilisation dans les voitures, les systmes de documentation industriels
et mdicaux (en intranets), les divertissements la maison et pour aider les utilisateurs qui apprennent ou qui ont
des difficults lire.
Quand on emploie les proprits auditives, le canevas consiste en un espace physique en trois dimensions
(l'environnement sonore) et en un espace temporel (on peut spcifier des sons avant, pendant et aprs d'autres
sons). Les proprits CSS permettent aussi une variation de la qualit de la voix synthtise (le type de voix, la
frquence, l'inflexion, etc.).
Exemple(s) :
H1, H2, H3, H4, H5, H6 {
voicefamily: paul;
stress: 20;
richness: 90;
cuebefore: url("ping.au")
}
P.heidi { azimuth: centerleft }
P.peter { azimuth: right }
P.goat { volume: xsoft }
Ceci va conduire le synthtiseur de parole dire les enttes avec une voix (un peu comme une "police auditive")
appele "paul", d'un ton neutre mais avec des intonations fortes. Avant la lecture de cellesci, un chantillon
sonore, dsign par l'URI, sera jou. Les paragraphes avec la classe "heidi" sembleront venir de l'avant gauche
(pourvu que le systme sonore soit capable de spacialisation audio) et ceux avec la classe "peter" venir de la
droite. Les paragraphes avec la classe "goat" seront dit trs doucement.
19.2 La proprit de volume : 'volume'

'volume'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<nombre> | <pourcentage> | silent | xsoft | soft | medium | loud | xloud | inherit

medium
tous les lments
oui
se rapporte la valeur hrite
auditif
Le volume se rfre la valeur moyenne de la forme de la vibration. En d'autres mots, une voix avec de fortes
inflexions pour un volume de 50 pourrait trs bien se situer audel de cette moyenne. Ces valeurs globales seront
vraisemblablement ajustes par une action humaine pour un certain confort (avec pour effet d'augmenter
proportionnellement les valeurs 0 et 100) ; cette proprit permet le rglage de l'chelle dynamique.
<nombre>
Tout nombre compris en tre '0' et '100'. La valeur '0' reprsente le volume du niveau minimum audible et
la valeur '100' correspond celui du maximum de confort ;
<pourcentage>
Les valeurs en pourcentage sont calcules par rapport la valeur hrite, et sont ensuite rognes pour se
ranger dans l'chelle de '0' '100' ;
193

silent
Pas de son du tout. Une valeur de '0' a une signification diffrente de 'silent' ;
xsoft
quivaut '0' ;
soft
quivaut '25' ;
medium
quivaut '50' ;
loud
quivaut '75' ;
xloud
quivaut '100'.
Les agents utilisateurs devraient laisser le soin aux auditeurs de paramtrer les valeurs correspondant aux repres
'0' et '100'. Aucun rglage n'est universel, les valeurs convenables dpendant de l'appareil utilis (hautparleurs,
couteurs), de l'environnement (en voiture, la maison sur un ensemble de restitution audio, dans une librairie) et
des prfrences personnelles. Quelques exemples :
Un navigateur pour un usage en voiture est adapt aux conditions o les bruits de fond sont importants. La
valeur '0' correspondrait un niveau d'coute assez soutenu, la valeur '100' un niveau plutt lev. On
distingue facilement la parole des bruits de la route mais l'chelle dynamique globale est rduite. Les
vhicules mieux insonoriss autoriseraient une chelle dynamique largie ;
Un autre navigateur parlant employ dans un appartement, tard dans la nuit, ou dans une salle d'tude
partage. La valeur '0' correspondrait un niveau d'coute trs bas, la valeur '100' un niveau peu lev.
Comme pour le premier exemple, la variation est faible, l'chelle dynamique est rduite. Ici les volumes
effectifs sont bas, alors qu'ils taient levs prcdemment ;
Dans une maison calme et isole, les rglages pour un ensemble de restitution audio de qualit. La valeur
'0' correspondrait un niveau d'coute plutt bas, la valeur '100' un niveau plutt lev, l'chelle
dynamique est tendue.
On pourrait utiliser la mme feuille de style de l'auteur dans tous ces cas, avec simplement un paramtrage
convenable des valeurs '0' et '100' sur l'agent utilisateur.
19.3 La proprit de parole : 'speak'

'speak'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
normal | none | spellout | inherit

normal
tous les lments
oui
sans objet
auditif
Cette proprit spcifie si un texte aura un rendu auditif, et si c'est le cas, la manire de ce rendu (d'une faon
analogue la proprit 'visibility' et, parfois, la proprit 'display'). Les valeurs admises sont :
none
Supprime le rendu auditif de manire ce qu'un lment donn ne consomme pas de temps pour ce rendu.
Noter, cependant, que les descendants peuvent surclasser cette valeur et ainsi tre lus. Pour compltement
supprimer le rendu d'un lment et de ses descendants, utiliser la proprit 'display') ;
normal
Suit les rgles de prononciation propres de la langue pour le rendu auditif d'un lment et de ses enfants
;
spellout
pelle le texte, lettre par lettre (utile pour les acronymes et les abrviations).
Noter la diffrence entre un lment dont la valeur de la proprit 'volume' est 'silent' et un lment dont la valeur
de la proprit 'speak' est 'none'. Le premier lment aurait la mme dure que s'il avait t lu, y compris les
pauses avant et aprs celuici, aucun son n'tant produit. Le second n'a aucune dure et n'est pas rendu (bien que
ses descendants puissent l'tre).
19.4 Les proprits de pause : 'pausebefore', 'pauseafter' et 'pause'

'pausebefore'
194

Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<dure> | <pourcentage> | inherit

tous les lments
non
voir les explications
auditif
'pauseafter'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

tous les lments
non
voir les explications
auditif
Ces proprits spcifient la pause observer avant que le contenu d'un lment ne soit lu, ou aprs qu'il l'ait t.
<dure>
Exprime la pause dans une unit de dure absolue (secondes et millisecondes) ;
<pourcentage>
Se rapporte la valeur inverse de la proprit 'speechrate'. Par exemple, si la valeur de celleci est de
120 mots par minute (c..d. un mot dure une demiseconde ou 500ms) alors une valeur de 100% pour la
proprit 'pausebefore' signifie une pause de 500ms et une valeur de 20% une pause de 100ms.
La pause s'insre entre le contenu de l'lment et les contenus ventuels des proprits 'cuebefore' ou 'cueafter'.
Les auteurs devraient employer des units relatives pour crer des feuilles de style plus robustes quand le dbit de
la parole varie beaucoup.
'pause'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
[ [<dure> | <pourcentage>]{1,2} ] | inherit

tous les lments
non
voir les descriptions des proprits 'pausebefore' et 'pauseafter'
auditif
La proprit raccourcie 'pause' regroupe les spcifications des proprits individuelles 'pausebefore' et
'pauseafter'. Quand on lui donne deux valeurs, la premire s'applique la proprit 'pausebefore' et la seconde
la proprit 'pauseafter'. Pour une seule valeur, celleci s'applique ces deux proprits.
Exemple(s) :
H1 { pause: 20ms } /* pausebefore: 20ms; pauseafter: 20ms */
H2 { pause: 30ms 40ms } /* pausebefore: 30ms; pauseafter: 40ms */
H3 { pauseafter: 10ms } /* pausebefore: ?; pauseafter: 10ms */
19.5 Les proprits de signal : 'cuebefore', 'cueafter' et 'cue'

'cuebefore'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

none
tous les lments
non
sans objet
auditif
'cueafter'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :

none
tous les lments
non
sans objet
auditif
195

Les images auditives sont une autre faon de distinguer des lments smantiques. On peut jouer des sons avant
et/ou aprs un lment et, ainsi, le dlimiter. Les significations des valeurs sont :
<uri>
L'URI doit dsigner une ressource d'image auditive. Si cet URI dsigne autre chose qu'un fichier audio,
cette ressource doit tre ignore, la proprit devant tre considre avoir la valeur 'none' ;
none
Aucune image auditive n'est spcifie.
Exemple(s) :
A {cuebefore: url("bell.aiff"); cueafter: url("dong.wav") }
H1 {cuebefore: url("pop.au"); cueafter: url("pop.au") }
'cue'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
[ <'cuebefore'> || <'cueafter'> ] | inherit

tous les lments
non
sans objet
auditive
La proprit raccourcie 'cue' regroupe les spcifications des proprits individuelles 'cuebefore' et 'cueafter'.
Quand on lui donne deux valeurs, la premire s'applique la proprit 'cuebefore' et la seconde la proprit
'cueafter'. Pour une seule valeur, celleci s'applique ces deux proprits.
Exemple(s) :
Ces deux rgles sont quivalentes :
H1 {cuebefore: url("pop.au"); cueafter: url("pop.au") }
H1 {cue: url("pop.au") }
Quand un agent utilisateur ne peut rendre une image auditive (ex. l'environnement de l'utilisateur ne le permettant
pas), on recommande que celuici produise un signal alternatif (ex. un message d'avertissement, l'mission d'un
bip sonore, etc.).
Voir les passages sur les pseudolments :before et :after pour des informations sur les aspects techniques de la
gnration de contenu.
19.6 La proprit de mixage : 'playduring'

'playduring'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<uri> mix? repeat? | auto | none | inherit

auto
tous les lments
non
sans objet
auditif
Semblable aux proprits 'cuebefore' et 'cueafter', cette proprit spcifie le son jouer en arrireplan, au
cours de la lecture de l'lment. Les significations des valeurs sont :
<uri>
Le son dsign par cet <uri> est jou en arrireplan du contenu de l'lment en train dtre lu ;
mix
Si prsent, ce motcl indique que le son, celui hrit de la proprit 'playduring' du parent de l'lment
en question, continuant d'tre jou, est mix avec celui dsign par la proprit <uri>. Quand cette valeur
'mix' n'est pas spcifie, le son d'arrireplan de l'lment en question remplace celui de son parent ;
repeat
Si prsent, ce motcl indique que le son se rptera quand celuici est trop court pour le temps de la
lecture d'un lment donn. Autrement, le son est jou une seule fois et puis s'arrte. Ceci est similaire la
proprit 'backgroundrepeat'. Quand le son est trop long pour la dure de l'lment, on rogne ce son
quand l'lment a fini d'tre lu ;
auto
196

Le son du parent de l'lment continue d'tre jou (on ne recommence pas le jouer comme cela aurait t
le cas si cette proprit avait t hrite) ;
none
Ce motcl indique un silence. Le son du parent (ventuel) de l'lment n'est pas audible pendant que
l'lment en question se droule, et redevient audible ensuite.
Exemple(s) :
BLOCKQUOTE.sad { playduring: url("violins.aiff") }
BLOCKQUOTE Q
{ playduring: url("harp.wav") mix }
SPAN.quiet
{ playduring: none }
19.7 Les proprits spatiales : 'azimuth' et 'elevation'

La spacialisation de l'coute est une importante proprit de style pour une prsentation auditive. C'est une faon
naturelle de discriminer entre plusieurs voix, comme dans la ralit (les gens se tiennent rarement au mme
endroit dans une pice). Les hautparleurs en stro produisent une scne sonore latrale. Les couteurs
quadriphoniques ou les configurations de chanes avec 5 hautparleurs, de plus en plus rpandues, peuvent
reproduire un environnement sonore complet et certaines configurations avec de multiples hautparleurs peuvent
crer une vritable scne sonore en trois dimensions. VRML 2.0 inclut galement une spacialisation audio, ce qui
implique la disponibilit allant grandissant de matriels grandpublic intgrant ces mcanismes.
'azimuth'
Valeur :
Initiale :
S'applique
:
Hrite :
Pourcentage
:
Mdias :
<angle> | [[ leftside | farleft | left | centerleft | center | centerright | right | farright |

rightside ] || behind ] | leftwards | rightwards | inherit
center
tous les lments
oui
sans objet
auditif

<angle>
La position est dcrite selon un angle compris entre les valeurs '360deg' et '360deg'. La valeur '0deg'
indique une position directement en face et au centre de la scne sonore, la valeur '90deg' en indique une
vers la droite, la valeur '180deg' une vers l'arrire et la valeur '270deg' ('90deg' en tant une quivalence
plus pratique) une vers la gauche ;
leftside
Mme chose que '270deg'. La valeur de 'behind' quivalant '270deg' ;
farleft
left
centerleft
center
centerright
right
farright
rightside
leftwards
Dplace le son vers la gauche en fonction de l'angle courant. Plus prcisment, on lui soustrait 20 degrs.
Cette opration est effectue avec un modulo de 360 degrs. Noter que la valeur 'leftwards' est plus
justement dcrite par " l'inverse des aiguilles d'une montre", celleci retirant toujours 20 degrs, et mme
si l'azimuth hrit se situe dj derrire l'auditeur (auquel cas le son semble se dplacer vers la droite) ;
rightwards
197

Dplace le son vers la droite en fonction de l'angle courant. Plus prcisment, on lui ajoute 20 degrs.
Voir 'leftwards' pour des explications l'inverse.
Cette proprit sera plus vraisemblablement implmente par le mlange d'un mme signal issus de diffrents
canaux, leurs volumes tant diffrents. Ceci pourrait aussi tre obtenu par une modulation de phase, un retard
digital et autres techniques de ce genre qui donne l'illusion d'une scne sonore. Les moyens prcis d'atteindre cet
effet ainsi que le nombre de hautparleurs ncessaires dpendent de l'agent utilisateur, cette proprit dcrivant
simplement le rsultat final souhait.
Exemple(s) :
H1
{ azimuth: 30deg }
TD.a { azimuth: farright }
#12 { azimuth: behind farright }
P.comment { azimuth: behind }
/* 60deg */
/* 120deg */
/* 180deg */
Quand on spcifie un azimuth spatial, l'appareil de sortie ne pouvant produire de sons en arrire de la position de
l'auditeur, les agents utilisateurs devraient convertir ces valeurs de l'hmisphre arrire pour les ramener vers
l'hmisphre avant. En voici une mthode :
si 90deg < x <= 180deg alors x := 180deg x
si 180deg < x <= 270deg alors x := 540deg x
'elevation'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<angle> | below | level | above | higher | lower | inherit

level
tous les lments
oui
sans objet
auditif

<angle>
Spcife l'angle d'lvation compris entre les valeurs '90deg' et '90deg'. La valeur '0deg' indique une
position en face l'horizontale, peu prs de niveau avec l'auditeur. La valeur '90deg' signifie directement
audessus et '90deg' directement audessous de celuici ;
below
quivaut '90deg'.
level
quivaut '0deg' ;
above
quivaut '90deg'.
higher
Ajoute 10 degrs l'lvation courante ;
lower
Soustrait 10 degrs l'lvation courante.
Les moyens prcis d'obtenir cet effet ainsi que le nombre de hautparleurs ncessaires pour cela ne sont pas
dfinis. Cette proprit dcrit simplement le rsultat final souhait.
Exemple(s) :
H1
TR.a
TR.b
TR.c
{
{
{
{
elevation:
elevation:
elevation:
elevation:
above
60deg
30deg
level
}
}
}
}
19.8 Les proprits des caractristiques des voix : 'speechrate', 'voicefamily',

'pitch', 'pitchrange', 'stress' et 'richness'
'speechrate'
Valeur :
Initiale :
S'applique :
Hrite :
198
<nombre> | xslow | slow | medium | fast | xfast | faster | slower | inherit

medium
tous les lments
oui

Pourcentage :
Mdias :
sans objet
auditif
Cette proprit spcifie le dbit de la parole. Noter que des valeurs de motscls absolus et relatifs sont la fois
admises ( comparer avec la proprit 'fontsize'). Les significations des valeurs sont :
<nombre>
Spcifie le dbit de parole en mots par minute, celuici, bien que variant selon la langue, est une quantit
largement reconnue par les synthtiseurs de parole ;
xslow
quivaut 80 mots par minute ;
slow
medium
quivaut 180 200 mots par minute ;
fast
xfast
faster
Ajoute 40 mots par minute au dbit courant ;
slower
Soustrait 40 mots par minute au dbit courant.
'voicefamily'
Valeur :
Initiale :
S'applique
:
Hrite :
Pourcentage
:
Mdias :
[[<voixspcifique> | <voixgnrique> ],]* [<voixspcifique> | <voixgnrique> ] |

inherit
tous les lments
oui
sans objet
auditif
La valeur est une liste de noms de familles de voix, ceuxci spars par une virgule et par ordre de priorit (
comparer avec 'fontfamily'). Les significations des valeurs sont :
<voixgnrique>
Ce sont des familles de voix. Les valeurs admises sont 'male', 'female' et 'child' ;
<voixspcifique>
Ces valeurs sont des instances spcifiques (ex. comedian, trinoids, carlos, lani, etc.) ;
Exemple(s) :
H1 { voicefamily: announcer, male }
P.part.romeo { voicefamily: romeo, male }
P.part.juliet { voicefamily: juliet, female }
On peut mettre les noms des voix spcifiques entre guillemets et on doit en effet le faire si un mot ventuel
formant le nom ne se conforme pas aux rgles de syntaxe pour les identifiants. On recommande aussi les
guillemets pour les noms des voix spcifiques composs de plusieurs mots. Si on omet ces guillemets, les
caractres blancs survenant avant ou aprs le nom de la famille de voix sont ignors et les squences ventuelles
de ceuxci sont converties en un seul espace.
'pitch'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<frquence> | xlow | low | medium | high | xhigh | inherit

medium
tous les lments
oui
sans objet
auditif
Cette proprit spcifie la tonalit moyenne (une frquence) de la voix. Celleci dpend de la famille de voix. Par
exemple, la tonalit moyenne pour une voix masculine se situe aux alentours de 120Hz et pour une voix fminine
199

aux alentours de 210Hz.
<frquence>
Spcifie la tonalit moyenne de la voix courante en hertz (Hz) ;
xlow, low, medium, high, xhigh
Ces valeurs ne correspondent pas des frquences absolues, ces valeurs dpendant de la famille de voix.
Les agents utilisateurs devraient faire correspondre cellesci avec des frquences appropries en fonction
de la famille de voix et de l'environnement de l'utilisateur. Cependant, cette correspondance doit se faire
dans un ordre cohrent (c..d. la valeur 'xlow' a une frquence infrieure celle de 'low', etc.).
'pitchrange'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<nombre> | inherit
50
tous les lments
oui
sans objet
auditif
Cette proprit spcifie la variation d'une tonalit moyenne. La perception de la tonalit d'une voix humaine est
dtermine par la frquence fondamentale, la valeur typique de celleci tant 120Hz pour une voix masculine et
210Hz pour une voix fminine. Les langues humaines comportent des inflexions et des tonalits variables, ces
variations vhiculent des significations supplmentaires et des accentuations. Ainsi, une voix exalte, qui a
beaucoup d'inflexions, affiche une grande variation de tonalit. Cette proprit donne l'tendue de cette variation,
c..d. de combien la frquence fondamentale peut dvier par rapport la tonalit moyenne.
<nombre>
Une valeur entre '0' et '100'. Une variation de tonalit de '0' produit une voix terne et monotone. Une
variation de '50' correspond une voix avec des inflexions normales. Pour des valeur suprieures '50', la
voie devient de plus en plus exalte.
'stress'
Valeur :
Initiale :
S'applique ::
Hrite :
Pourcentage :
Mdias :
<nombre> | inherit
50
tous les lments
oui
sans objet
auditif
Cette proprit spcifie la hauteur des "pics locaux" dans le profil de l'intonation d'une voix. Par exemple, l'anglais
est une langue accentue, diffrentes parties d'une phrase recevant une accentuation primaire, secondaire ou
tertiaire. La valeur de la proprit 'stress' rgit l'ampleur de l'inflexion survenant l'endroit de ces accentuations.
Cette proprit s'utilise en conjonction avec la proprit 'pitchrange' et permet aux dveloppeurs l'exploitation
d'appareils auditifs de haute performance.
<nombre>
Une valeur entre '0' et '100'. L'interprtation de celleci dpend de la langue employe. Soit, par exemple,
une valeur de '50' pour une voix masculine moyenne anglaise (tonalit moyenne = 122Hz) avec une
intonation et une accentuation normale, toutes choses tant gales, une voix italienne aurait un autre sens.
'richness'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
<nombre> | inherit
50
tous les lments
oui
sans objet
auditif
Cette proprit spcifie l'ampleur, ou la clart, d'une voix. Une voix ample va "porter" dans une grande pice, au
contraire d'une voix douce (le terme "douce" se rfre au dessin de la forme de la vibration).
200

<nombre>
Une valeur entre '0' et '100'. Plus la valeur est grande, plus la voix va porter. Une valeur plus faible
produira une voix douce et mlodieuse.
19.9 Les proprits de diction : 'speakpunctuation' et 'speaknumeral'

Une proprit de diction supplmentaire, speakheader, est dcrite dans le chapitre sur les tables.
'speakpunctuation'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
code | none | inherit

none
tous les lments
oui
sans objet
auditif
Cette proprit spcifie comment lire les signes de ponctuation. Les significations des valeurs sont :
code
Les signes de ponctuation, telles que les pointvirgules, les accolades et tout le reste, sont lues
litralement ;
none
Les signes de ponctuation ne sont pas lus, mais plutt rendus naturellement, avec des pauses diverses.
'speaknumeral'
Valeur :
Initiale :
S'applique :
Hrite :
Pourcentage :
Mdias :
digits | continuous | inherit

continuous
tous les lments
oui
sans objet
auditif
Cette proprit contrle la faon de lire les nombres. Les significations des valeurs sont :
digits
Lit les nombres dcomposs en leurs chiffres individuels. Ainsi, le nombre "237" est lu "deux trois sept" ;
continuous
Lit les nombres dans leur forme globale. Ainsi, le nombre "237" est lu "deux cent trente sept", leur
reprsentation textuelles dpendant de la langue.
201
202
Appendices
Appendice A : Un exemple de feuille de style pour HTML 4.0
Cet appendice est informatif, et non normatif.
Cette feuille de style dcrit la mise en forme typique de tous les lments HTML 4.0 ([HTML40]) partir d'un
examen approfondi des pratiques des agents utilisateurs actuels. On encourage les dveloppeurs l'utiliser comme
feuille de style par dfaut pour leurs implmentations.
La prsentation complte de certains lments HTML n'est pas exprimable en CSS2, ainsi les lments remplacs
(IMG, OBJECT), des scripts (SCRIPT, APPLET), des contrles des formulaires et des cadres.
ADDRESS,
BLOCKQUOTE,
BODY, DD, DIV,
DL, DT,
FIELDSET, FORM,
FRAME, FRAMESET,
H1, H2, H3, H4,
H5, H6, IFRAME,
NOFRAMES,
OL, P, UL,
CENTER, DIR,
HR, MENU, PRE
{
OBJECT, APPLET {
LI
{
HEAD
{
TABLE
{
TR
{
THEAD
{
TBODY
{
TFOOT
{
COL
{
COLGROUP
{
TD, TH
{
CAPTION
{
TH
{
CAPTION
{
BODY
{
H1
{
H2
{
H3
{
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU
{
H5
{
H6
{
H1, H2, H3, H4,
H5, H6, B,
STRONG
{
BLOCKQUOTE
{
I, CITE, EM,
VAR, ADDRESS
{
PRE, TT, CODE,
KBD, SAMP
{
PRE
{
BIG
{
SMALL, SUB, SUP {
SUB
{
SUP
{
S, STRIKE, DEL {
HR
{
OL, UL, DIR,
MENU, DD
{
OL
{
OL UL, UL OL,
UL UL, OL OL
{
U, INS
{
CENTER
{
BR:before
{
display: block }
display: inline }
display: listitem }
display: none }
display: table }
display: tablerow }
display: tableheadergroup }
display: tablerowgroup }
display: tablefootergroup }
display: tablecolumn }
display: tablecolumngroup }
display: tablecell }
display: tablecaption }
fontweight: bolder; textalign: center }
textalign: center }
padding: 8px; lineheight: 1.12em }
fontsize: 2em; margin: .67em 0 }
fontsize: 1.5em; margin: .83em 0 }
fontsize: 1.17em; margin: 1em 0 }
margin: 1.33em 0 }
fontsize: .83em; lineheight: 1.17em; margin: 1.67em 0 }
fontsize: .67em; margin: 2.33em 0 }
fontweight: bolder }
marginleft: 40px; marginright: 40px }
fontstyle: italic }
fontfamily: monospace }
whitespace: pre }
fontsize: 1.17em }
fontsize: .83em }
verticalalign: sub }
verticalalign: super }
textdecoration: linethrough }
border: 1px inset }
marginleft: 40px }
liststyletype: decimal }
margintop: 0; marginbottom: 0 }
textdecoration: underline }
textalign: center }
content: "\A" }
203

/* Un exemple de style pour les lments HTML 4.0 ABBR et ACRONYM */
ABBR, ACRONYM
A[href]
:focus
{ fontvariant: smallcaps; letterspacing: 0.1em }

{ textdecoration: underline }
{ outline: thin dotted invert }
/* Dbut des rglages bidi (ne pas changer) */

BDO[DIR="ltr"] { direction: ltr; unicodebidi: bidioverride }
BDO[DIR="rtl"] { direction: rtl; unicodebidi: bidioverride }
*[DIR="ltr"]
*[DIR="rtl"]
{ direction: ltr; unicodebidi: embed }

{ direction: rtl; unicodebidi: embed }
/* lments de type bloc en HTML 4.0 */

ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET,
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER,
DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT,
COL, COLGROUP, TD, TH, CAPTION
{ unicodebidi: embed }
/* Fin des rglages bidi */
@page
}
@media print {
H1, H2, H3,
H4, H5, H6
BLOCKQUOTE,
PRE
UL, OL, DL
}
@media aural {
H1, H2, H3,
H4, H5, H6
H1
H2
H3
H4
H5
H6
LI, DT, DD
DT
PRE, CODE, TT
EM
STRONG
DFN
S, STRIKE
I
B
U
A:link
A:visited
A:active
}
204
{ margin: 10%
{ pagebreakafter: avoid; pagebreakinside: avoid }

{ pagebreakinside: avoid }
{ pagebreakbefore: avoid }
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
{
voicefamily: paul, male; stress: 20; richness: 90 }

pitch: xlow; pitchrange: 90 }
pitch: xlow; pitchrange: 80 }
pitch: low; pitchrange: 70 }
pitch: medium; pitchrange: 60 }
pitch: medium; richness: 60 }
stress: 80 }
pitch: medium; pitchrange: 0; stress: 0; richness: 80 }
pitch: high; pitchrange: 60; stress: 60 }
richness: 0 }
richness: 0 }
voicefamily: harry, male }
voicefamily: betty, female }
voicefamily: betty, female; pitchrange: 80; pitch: xhigh }
Appendice B : Les changements depuis CSS1

CSS2 s'appuyant sur CSS1, toute feuille de style valide pour CSS1 l'est aussi pour CSS2. Les changements
survenus entre la spcification CSS1 (voir [CSS1]) et cette spcificationci se rangent dans trois catgories : les
nouvelles fonctionnalits, les descriptions mises jour de celles de CSS1 et les changements proprement dits
apports CSS1.
B.1 Les nouvelles fonctionnalits

CSS2 apporte les fonctionnalits suivantes celles de CSS1 :
Le concept des types de mdias ;
La valeur 'inherit' toutes les proprits ;
Les mdias pagins ;
Les feuilles de style auditives ;
Plusieurs fonctions pour l'internationalisation, dont les styles de numrotage des listes, la prise en compte
des textes bidirectionnels et celle des marques de citation en fonction de la langue utilise ;
Un mcanisme de slection de police enrichi, incluant la correspondance intelligente des polices, leur
synthse et celles tlchargeables. galement, le concept des polices systme a t introduit et une
nouvelle proprit a t ajoute, 'fontsizeadjust' ;
Les tables, ainsi que de nouvelles valeurs pour les proprits 'display' et 'verticalalign' ;
Les positionnements relatif et absolu, avec aussi le positionnement fixe ;
De nouveaux types de botes (en plus de bloc et enligne), compact et runin ;
La possibilit de contrler le dbordement, le rognage et la visibilit du contenu dans le modle de mise
en forme visuel ;
La possibilit de spcifier des largeurs et hauteurs, minimales et maximales, dans le modle de mise en
forme visuel ;
Une extension du mcanisme des slecteurs, avec les slecteurs d' enfants, ceux adjacents et ceux
d'attribut ;
Le contenu gnr, les compteurs et le numrotage automatique et les marqueurs ;
Les ombrages de texte, au travers de la nouvelle proprit 'textshadow' ;
Plusieurs nouvelles pseudoclasses, :firstchild, :hover, :focus, :lang ;
Les couleurs et les polices systme ;
Les curseurs ;
Les contours dynamiques.
B.2 La mise jour des descriptions

La spcification CSS1 tait courte et concise, celleci est beaucoup plus volumineuse et plus claire. Une grande
part du contenu supplmentaire est conscre aux descriptions des nouvelles fonctionnalits, sans pour autant
dlaisser celles des fonctions de CSS1 qui ont t compltes. Sauf dans de rares cas, les descriptions refondues
n'introduisent pas de changements syntaxiques ni smantiques.
B.3 Les changements smantiques depuis CSS1

Bien qu'une feuille de style CSS1 soit valide pour CSS2, il existe certains cas o l'interprtation de celleci
prendra un sens diffrent en CSS2. La plupart de ces changements rsulte de la prise en considration de
l'exprience accumule dans les implmentations, mais certains d'entre eux sont aussi des corrections d'erreurs.
La signification de "!important" a chang. En CSS1, la mention de "!important" dans la feuille de style de
l'auteur avait priorit sur celle de l'utilisateur. Ceci est invers en CSS2 ;
En CSS2, les valeurs de couleur sont rognes en fonction du gamut de l'appareil, et non plus en fonction
du gamut de sRGB comme en CSS1 ;
En CSS1, la proprit 'marginright' tait ignore quand on spcifiait la fois une valeur pour
'marginleft' et pour 'width'. En CSS2, la relaxe de 'marginleft', ou de 'marginright' dpend du sens
d'criture ;
En CSS1, les valeurs de plusieurs proprits (ex. 'padding') se rfraient la largeur de leur lment
parent. C'tait une erreur, cette valeur devrait toujours se rapporter la largeur d'un lment de type bloc,
ce qui est reflt par l'introduction de l'expression "bloc conteneur" en CSS2 ;
En CSS2, la valeur initiale de la proprit 'display' est 'inline', et non 'block' comme en CSS1 ;
En CSS1, la proprit 'clear' s'appliquait tous les lments. C'tait une erreur, la proprit ne s'applique
qu' ceux de type bloc en CSS2 ;
205

En CSS1, les pseudoclasses ':link', ':visited' et ':active' s'excluaient mutuellement. En CSS2, la
pseudoclasse ':active' peut survenir en runion avec ':link' ou ':visited' ;
Le facteur d'chelle recommand, entre deux index adjacents dans la table des tailles des polices, pour la
proprit 'fontsize', a t rduit de 1.5 1.2 ;
La valeur calcule, et non pas la valeur relle, de la proprit 'fontsize' s'hrite ;
La description CSS1 de la valeur 'inside' (pour la proprit 'liststyleposition') laissait entendre que la
marge gauche du texte pouvait tre affecte, plutte que la position de la marque de liste. En CSS2, ce
n'est plus le cas ;
Consulter galement le chapitre normatif traitant des diffrences entre l'atomiseur de CSS1 et celui de
CSS2.
206
Appendice C : Les notes pour l'implmentation et la mise en

uvre des polices
C.1 Un glossaire pour les polices

DocLock
La technologie DocLock de la socit Bitstream assure que les ressources TrueDoc PFR ne peuvent tre
employes que dans le site auquel cellesci sont destines. Une ressource TrueDoc PFR dplace vers un
site diffrent, ou rfrence par un autre site, ne fonctionnera pas ;
Signature digitale
Partie d'une technologie d'administration de confiance, employe pour la certification d'une ressource ;
Mise en cache des polices
La mise en cache des polices autorise la copie temporaire d'une police sur le systme de l'utilisateur. Ces
copies sont souvent stockes sur un disque dur en mme temps que d'autres articles mis en cache comme,
en particulier, les images pour un agent utilisateur ;
Le dessin d'une police
Un "indicateur" qui se rapporte au dessin particulier d'une police, excluant la taille de celleci ;
Correspondance de police
La correspondance de police est un processus de slection d'une police similaire, fond sur un ou
plusieurs des attributs d'une police primaire. Quelques attributs courants : serif, sansserif, graisse,
hauteur de capitale, hauteurx, espacement, langue et apparence. La correspondance de police est lie
l'algorithme utilis et l'chantillon des polices candidates ;
Sousensemble de reprsentation des glyphes
Le sousensemble de reprsentation des glyphes correspond au processus par lequel on retire les
reprsentations de glyphes non souhaites (l'information sur leurs mesures environnantes et leur crnage
compris) d'une police primaire pour produire un sousensemble propre un document ou un jeu de
documents. C'est une opration particulirement profitable pour les documents avec des critures
idographiques, le complment des glyphes de la police de base pouvant tre trs important. La
production d'un sousensemble de reprsentations des glyphes pour les documents employant des
critures avec des ligatures, comme pour l'arabe, est difficile si l'on ne connat pas les rgles de formation
des ligatures du systme d'affichage final ;
Intellifont
La technologie Intellifont, dveloppe par la socit Agfa, est le format natif pour les imprimantes de la
socit HewlettPackard et d'autres, cellesci s'appuyant sur le langage PCL5. C'est galement le format
natif des ordinateurs de la marque Amiga ;
Infinifont
Une technique de synthse de police qui, partir d'un nombre Panose1 (et, en option, des donnes
supplmentaires dcrivant la police), peut gnrer une copie de la police sans extrapolation des contours
d'une police de rfrence ou sans interpolation entre deux contours, ou plus (voir [INFINIFONT]) ;
Italique
Une classe de formes de lettres pour les critures latines, ces formes tant plus cursives que celle des
lettres romanes, mais moins que celles des lettres manuscrites. Souvent, on dessine une paire de polices
pour une utilisation conjointe, une police serif romane et une police italique. On emploie d'autres termes
pour dcrire cette classe, comme le terme cursive (kursiv pour les critures cyrilliques). Pour une police
sans serif, la police apparie consiste souvent en une variante incline ou oblique plutte que de provenir
d'une classe diffrente.
[D]
207

Crnage
Une modification de l'espacement entre les reprsentations de glyphes donns, qui semblerait autrement
trop proches ou trop loigns les uns des autres, pour obtenir un certain quilibre typographique ;
[D]
Police Multiple Master

Une police Multiple Master contient deux polices primaires qui sont traites par un logiciel de rendu
particulier pour donner une interpolation rsultante. La socit Adobe Systems fournit un mcanisme
paramtrable pour contrler le rsultat ou la police interpole rsultante. Ces paramtres dcrivant
gnralement les caractristiques d'une police originale on parle du rsultat "multiple master" comme de
la "police synthtise" ;
OpenType
OpenType est un largissement du format de police TrueType qui contient des informations
supplmentaires, cellesci augmentant les capacits des polices pour une typographie internationale de
qualit. Avec OpenType, on peut associer un seul caractre avec plusieurs reprsentations de glyphes et,
l'inverse, associer une combinaison de caractres avec une seule reprsentation de glyphe (la formation
d'une ligature). Ce format inclus une information bidimensionnelle qui autorise des fonctions de
positionnement et de liaison des glyphes complexes. Les formats TrueType et OpenType contiennent une
information explicite sur l'criture et la langue, de ce fait, une application de traitement de texte peut
s'adapter en consquence (voir [OPENTYPE]) ;
Police de serveur
Une police de serveur est une ressource de polices installe sur un serveur Web, cette ressource tant
rfrence par la dfinition d'une PoliceWeb. L'agent utilisateur peut employer celleci pour le rendu
d'une page ;
Speedo
La technologie de police Speedo, dveloppe par la socit Bitstream, est le format de police natif des
ordinateurs de marque Atari ST et Falcon. Celleci est galement employe par certaines plateformes
utilisant le systme X Window ;
TrueDoc
La technologie TrueDoc, dveloppe par la socit Bitstream, pour la cration, le transport et l'illustration
d'objets de police variables et indpendants de la plateforme sur le Web. Ces objets sont crs par
l'enregistreur de forme de caractre TrueDoc (Character Shape Recorder) et sont rendus par le lecteur de
forme du caractre TrueDoc (Charachter Shape Player). Cette technologie est prvue pour l'affichage et
l'impression sur le Web ;
TrueDoc Portable Font Resource
Un objet de police TrueDoc Portable Font Resource (ou PFR), indpendant de la plateforme, est produit
par un enregistreur de forme de caractre. On peut y mettre en entre des polices TrueType ou Type 1 de
208

toute provenance, que ce soit sur Windows, Macintosh ou Unix. Les resources produites offrent de bons
ratios de compression, sont indpendantes de la plateforme et, comme elles ne sont pas dans un format
natif (TrueType ou Type 1), ne peuvent facilement tre installes sur un systme ;
TrueType
Le format de police TrueType , dvelopp par la socit Apple puis licenci la socit Microsoft. C'est le
format de police systme natif pour les plateformes Windows et Macintosh. Celuici contient un jeu de
tables hirarchique et des reprsentations de glyphes. Les caractres peuvent tre repers un un et selon
leur taille exprimes en points, ce qui produit d'excellents rsultats pour les rsolutions des crans. Bien
que les polices TrueType soient peu diffrentes entre Windows et Macintosh, cellesci peuvent l'tre
suffisamment et empcher leur usage commun.
TrueType Collection
Le format TrueType Collection (ou TTC), une extension du format TrueType, inclut des tables permettant
la runion de plusieurs polices TrueType dans un seul fichier de police TrueType. Les fichiers de ce type
sont encore relativement peu courants ;
Polices TrueType GX
Les polices TrueType GX contiennent des rajouts au format TrueType standard qui permettent certaines
variations, de faon similaire aux polices Multiple Master. Cellesci peuvent varier selon divers
paramtres tels la graisse, la hauteur et l'inclinaison. On peut dfinir ces paramtres pour obtenir
pratiquement tous les effets. Le format TrueType GX peut galement comporter d'autres reprsentations
de glyphes de substitution pour les ligatures, les formes contextuelles, les fractions, etc. ce jour, ce
format n'est disponible que pour la plateforme Macintosh (voir [TRUETYPEGX]) ;
Police Type 1
Les polices Type 1, dveloppes par la socit Adobe Systems, ont t l'un des premiers formats variables
disponibles. Cellesci contiennent gnralement 228 caractres dont les reprsentations de glyphes sont
dcrites par des courbes de Bzier du troisime ordre. Les formats sont similaires pour les plateformes
Macintosh, Windows et Unix mais nanmoins spars ; La socit Adobe fournit un logiciel de gestion
des polices, Adobe Type Manager, pour ces trois plateformes. Le format Type1c est la forme de stockage
avec une compression non destructive la plus rcente pour les reprsentations de glyphes du Type 1 ;
Attache par URI
Un processus pour lier une ressource de police donne un certain site Web, ceci par l'incorporation d'un
URI crypt ou d'un certificat digital d'utilisation dans la ressource mme de police.
C.2 Le tlchargement des polices

De nombreux formats de police diffrents sont employs sur diverses plateformes. Pour la slection d'un format
de police adquat, on utilise une ngociation de contenu transparente (voir [NEGOT]). On peut toujours savoir
quand une police n'est plus rfrence, car l'URI se trouve dans la description de la police. Une implmentation
donne saura lesquels des formats de polices tlchargeables lui sont connus et vitera ainsi, avec ces indices, de
tlcharger un format inexploitable.
C.3 La signification des chiffres Panose
209

[D]
Le systme d'exploitation Windows95 utilise les informations des rubriques Famille, Style Serif et Proportion
pour la slection et la correspondance d'une police.
On donne ciaprs la signification des dix chiffres avec leurs valeurs admises (entre parenthses), pour le cas le
plus courant o le chiffre pour la "famille" est 2 texte et affichage (quand le premier chiffre a une
valeur diffrente, les neufs chiffres restants prennent un autre sens). Pour des dtails supplmentaires sur
Panose1, voir [PANOSE].
Famille
Tous (0)
Pas de correspondance (1)
[PANOSE] Texte et affichage latins (2)
[PANOSE] criture latine (3)
[PANOSE] Dcoratif latin (4)
[PANOSE] Pictural latin (5)
Style des srifs
Tous (0)
Anse (2)
Anse obtuse(3)
Anse carre (4)
Anse obtuse carre (5)
Carr (6)
Mince (7)
Arte (8)
Exagre (9)
Triangulaire (10)
Normal Sans (11)
Obtus Sans (12)
Perpendiculaire Sans (13)
vas (14)
Arrondi (15)
Graisse
Tous (0)
Very Light (2)[100]
Light (3) [200]
210

Thin (4) [300]
Book (5) [400] mme chose que pour 'fontweight: normal;' en CSS1
Medium (6) [500]
Demi (7) [600]
Bold (8) [700] mme chose que pour 'fontweight: bold;' en CSS1
Heavy (9) [800]
Black (10) [900]
Extra Black / Nord (11) [900] force une correspondance avec l'chelle 100900 de CSS1
Proportion
Tous (0)
Ancienne mode (2)
Moderne (3)
Largeur galise (4)
largie (5)
troite (6)
Trs largie (7)
Trs troite (8)
Monospace (9)
Contraste
Tous (0)
Aucun (2)
Trs faible (3)
Faible (4)
Moyen faible (5)
Moyen (6)
Moyen grand (7)
Grand (8)
Trs grand (9)
Variation du trait
Tous (0)
Aucune variation (2)
Graduelle/Diagonale (3)
Graduelle/Transitionnelle (4)
Graduelle/Verticale (5)
Graduelle/Horizontale (6)
Rapide/Verticale (7)
Rapide/Horizontale (8)
Instantane/Horizontale (9)
Instantane/Verticale (10)
Style des branches
Tous (0)
Branches droites/Horizontal (2)
Branches droites/Cal (3)
Branches droites/Vertical (4)
Branches droites/Serif simple (5)
Branches droites/Serif double (6)
Branches non droites/Horizontal (7)
Branches non droites/Cal (8)
Branches non droites/Vertical 90)
Branches non droites/Serif simple (10)
Branches non droites/Serif double (11)
Forme de la lettre
Tous (0)
Normale/Touchante (2)
Normale/quilibre (3)
Normale/Encadre (4)
Normale/Aplatie (5)
Normale/Arrondie (6)
Normale/Dcentre (7)
Normale/Carre (8)
211

Oblique/Touchante (9)
Oblique/quilibre (10)
Oblique/Encadre (11)
Oblique/Aplatie (12)
Oblique/Arrondie (13)
Oblique/Dcentre (14)
Oblique/Carre (15)
Traits du milieu
Tous (0)
Standard/Coup (2)
Standard/Pointu (3)
Standard/Serif (4)
Haut/Coup (5)
Haut/Pointu (6)
Haut/Serif (7)
Constant/Coup (8)
Constant/Pointu (9)
Constant/Serif (10)
Bas/Coup (11)
Bas/Pointu (12)
Bas/Serif (13)
Hauteurx
Tous (0)
Constante/Petite (2)
Constante/Standard (3)
Constante/Grande (4)
Plongeante/Petite (5)
Plongeante/Standard (6)
Plongeante/Grande (7)
La spcification Panose2 (voir [PANOSE2]) offre une classification des polices plus complte et une
technologie de correspondance qui ne se limite pas aux polices latines. Par exemple, on peut comparer les
caractristiques des srifs d'une police latine avec les terminaisons des traits d'une police Kanji.
La valeur Panose2 n'est incorpore aucun format de police connu, nanmoins on peut la mesurer.
C.4 La dduction des tendues Unicode pour TrueType

C'est une information qui est contenue dans la police et situe dans les bits 'ulUnicodeRange de la table 'OS/2'
(s'ils existent), ceuxci contenant une reprsentation du jeu. Cette table est dfinie dans la spcification TrueType
version corrige 1.66 de la socit Microsoft. En considrant l'information comme tant un jeu, chacun des
lments correspond avec un ensemble de caractres Unicode 1.1, la prsence d'un lment donn dans le jeu est
une indication que la police a un ou plusieurs glyphes reprsents dans cet ensemble. Le jeu comprend 128
lments dcrits plus loin. L'ordre de leur succession suit en gnral celui du standard Unicode 1.1. On peut
utiliser cette table pour convertir l'information contenue dans une police TrueType en un descripteur CSS
'unicoderange'.
212
Bloc Adresse
Nom de l'ensemble
tendue Unicode
0
1
2
3
1
2
4
8
Latin de base
Supplment Latin1
Latin1 tenduA
Latin tenduB
U+07F
U+80FF
U+10017F
U+18024F
4
5
6
7
1
2
4
8
Extensions IPA
Lettres modifiant l'espacement
Combinaisons de marques diacritiques
Grec
U+2502AF
U+2B02FF
U+30036F
U+3703CF
8
9
10
11
1
2
4
8
Symboles grecs et copte

Cyrillique
Armnien
Hbreu
U+3D03EF
U+4004FF
U+53058F
U+5905FF
12
Quelles tendues ?
13
14
15
2
4
8
Hbreu tenduA
Hbreu tenduB
Arabe
Arabe tendu
Devanagari
16
17
18
19
1
2
4
8
Bengali
Gurmukhi
Gujarati
Oriya
U+9809FF
U+A00A7F
U+A80AFF
U+B00B7F
20
21
22
23
1
2
4
8
Tamil
Telugu
Kannada
Malayalam
U+B80BFF
U+C00C7F
U+C80CFF
U+D00D7F
24
25
26
27
1
2
4
8
Thai
Lao
Georgien
Georgien tendu
U+E00E7F
U+E80EFF
U+10A010EF
U+10F010FF ?
28
29
30
31
1
2
4
8
Hangul Jamo
Latin tendu supplmentaire
Grec tendu
Ponctuation gnrale
U+110011FF
U+1F001FFF
U+2000206F
32
Exposants et indices
U+60069F
U+6706FF
U+90097F
213

33
34
35
2
4
8
Symboles montaires
U+20A020CF
Combinaisons de marques pour les symboles U+20D020FF
Symboles avec un aspect de lettre
U+2100214F
36
37
38
39
1
2
4
8
Formes numriques
Flches
Oprateurs mathmatiques
Divers techniques
U+2150218F
U+219021FF
U+220022FF
U+230023FF
40
41
42
43
1
2
4
8
Dessins de contrle
Reconnaissance optique des caractres
Les alphanumriques inclus
Dessins de botes
U+2400243F
U+2440245F
U+246024FF
U+2500257F
44
45
46
47
1
2
4
8
lments d'ensemble
Formes gomtriques
Symboles divers
Dingbats
U+2580259F
U+25A025FF
U+260026FF
U+270027BF
48
49
50
51
1
2
4
8
CJK Symboles et ponctuation

Hiragana
Katakana
Bopomofo
U+3000303F
U+3040309F
U+30A030FF
U+3100312F
52
53
54
55
1
2
4
8
Hangul compatibilit Jamo

CJK Divers
CJK Lettres et mois inclus
CJK Compatibilit
U+3130318F
?
U+320032FF
U+330033FF
56
59
1
8
Hangul
CJK Idogrammes unifis
U+AC00D7FF
U+4E009FFF
60
61
62
63
1
2
4
8
Aire d'utilisation prive

CJK idogrammes de compatibilit
Formes de prsentation alphabtique
FormesA de prsentation arabe
U+E000F8FF
U+F900FAFF
U+FB00FB4F
U+FB50FDFF
64
65
66
67
1
2
4
8
Combinaisons de demimarques
CJK Formes de compatibilit
Petites variantes de forme
FormesB de prsentation arabe
U+FE20FE2F
U+FE30FE4F
U+FE50FE6F
U+FE70FEFF
68
69
1
2
Formes de demilargeur et de largeur entire U+FF00FFEF

Spciaux
U+FFF0FFFD
214

Le systme de champs de bits de TrueType prsente l'inconvnient d'tre li Unicode 1.1 et celui de ne pouvoir
accompagner l'volution de Unicode, ainsi, par exemple, celuici ne peut reprsenter le tibtain ou les autres
critures introduites depuis Unicode 2.0.
C.5 La gnration automatique des descripteurs

Les outils de cration devraient permettre aux auteurs l'ajout et l'dition des descripteurs de police. Dans certains
cas, ces outils peuvent fournir une aide pour l'examen des polices installes localement et pour la gnration des
descripteurs de police mentionns dans la feuille de style. Cette fonction peut aussi tre accomplie par des outils
produisant des sousensembles de polices, ou des conversions de police, en vue de leur chargement dynamique.
Cette table suggre, pour les formats de police courants, o trouver ces informations :
TrueType GX
[TRUETYPEGX]
dans 'Ascender'
dans 'Ascender' dans la table 'hhea' dans
'ascent'
dans le fichier
ou (de prfrence) dans
'horizontalBefore'
AFM/PFM
'sTypoAscender' dans la table 'OS/2' dans la table 'fmtx'
dans la table bsln, voir
'baseline'
note
dans le dictionnaire de dans les entres 'xMin', 'xMax',
'bbox'
police FontBBox
'yMin' et 'yMax' de la table 'head'
dans
CapHeight
dans
'capheight' le fichier AFM/PFM
dans 'Descender'
'descent'
dans le fichier
AFM/PFM
'mathline'
dans la table bsln
dans FamilyName, le
'fontfamily' dictionnaire
dans la table name
d'information de police
dans StdHW, le
'stemh'
dictionnaire priv du
fichier AFM/PFM
dans /StdVW, le
'stemv'
dans la table cvt
dictionnaire priv
'topline'
dans la table bsln
'unicoderange'dans le fichier cmap
dans la table OS/2, voir l'appendice C
FontMatrix, le
'unitsperem'dans
dictionnaire de police dans unitsPerEm, dans la table head
'widths'
dans la table hmtx
Descripteur
Type 1
TrueType et OpenType
Dans la table bsln, on peut utiliser la ligne de base idographique centrale pour des
successions majoritaires de caractres idographiques, la ligne de base idographique
infrieure convenant mieux un jet de caractres majoritairement latins, grecs ou cyrilliques.
215
Appendice D : La grammaire de CSS2

Cet appendice est normatif.
La grammaire cidessous dfinit la syntaxe de CSS2. En quelque sorte, c'est un sousensemble de CSS2 dans la
mesure o cette spcification impose des contraintes smantiques supplmentaires que n'exprime pas cette
grammaire. Un agent utilisateur conforme doit aussi adhrer aux rgles d'interprtations ascendantes, la
convention de notation des proprits et valeurs et celle de la notation des units. Le langage du document
pouvant en plus imposer certaines restrictions (ex. en HTML, il existe des restrictions sur les valeurs admises par
l'attribut "class").
D.1 La grammaire
La grammaire cidessous est LL(1) (mais noter que la plupart des agents utilisateurs ne devraient pas l'employer
telle quelle car celleci n'exprime pas les conventions d'interprtation, mais seulement la syntaxe CSS2). Le
format de ces productions est optimis pour une consultation humaine, certaines notations raccourcies allant
audel de Yacc (voir [YACC]) tant employes :
* : 0 ou plus ;
+ : 1 ou plus ;
? : 0 ou 1 ;
| : alternatives spares ;
[ ] : regroupement.
Voici les productions :
stylesheet
: [ CHARSET_SYM S* STRING S* ';' ]?
[S|CDO|CDC]* [ import [S|CDO|CDC]* ]*
[ [ ruleset | media | page | font_face ] [S|CDO|CDC]* ]*
;
import
: IMPORT_SYM S*
[STRING|URI] S* [ medium [ ',' S* medium]* ]? ';' S*
;
media
: MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S*
;
medium
: IDENT S*
;
page
: PAGE_SYM S* IDENT? pseudo_page? S*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
pseudo_page
: ':' IDENT
;
font_face
: FONT_FACE_SYM S*
;
operator
: '/' S* | ',' S* | /* vide */
;
combinator
: '+' S* | '>' S* | /* vide */
;
unary_operator
: '' | '+'
;
property
: IDENT S*
;
ruleset
: selector [ ',' S* selector ]*
;
selector
: simple_selector [ combinator simple_selector ]*
;
216

simple_selector
: element_name? [ HASH | class | attrib | pseudo ]* S*
;
class
: '.' IDENT
;
element_name
: IDENT | '*'
;
attrib
: '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
[ IDENT | STRING ] S* ]? ']'
;
pseudo
: ':' [ IDENT | FUNCTION S* IDENT S* ')' ]
;
declaration
: property ':' S* expr prio?
| /* vide */
;
prio
: IMPORTANT_SYM S*
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
TIME S* | FREQ S* | function ]
| STRING S* | IDENT S* | URI S* | UNICODERANGE S* | hexcolor
;
function
: FUNCTION S* expr ')' S*
;
/*
* Il y a une contrainte sur la couleur,
* celleci devant avoir 3 ou 6 chiffres hexadcimaux (ex. [09afAF])
* aprs le signe "#" ; ex. "#000" est OK, mais pas "#abcd".
*/
hexcolor
: HASH S*
;
D.2 Le scanner lexical

Ce qui suit est l'atomiseur, crit en notation Flex (voir [FLEX]) L'atomiseur est insensible la casse.
Les deux expressions "\377" qui surviennent reprsentent le nombre du caractre le plus lev que Flex peut grer
(en dcimal : 255). Cellesci devraient tre interprtes comme tant "\4177777" (en dcimal : 1114111), lequel
est le code du point le plus lev pour Unicode/ISO10646.
%option caseinsensitive
h
nonascii
unicode
escape
nmstart
nmchar
string1
string2
[09af]
[\200\377]
\\{h}{1,6}[ \t\r\n\f]?
{unicode}|\\[ ~\200\377]
[az_]|{nonascii}|{escape}
[az09_]|{nonascii}|{escape}
\"([\t !#$%&(~]|\\{nl}|\'|{nonascii}|{escape})*\"
\'([\t !#$%&(~]|\\{nl}|\"|{nonascii}|{escape})*\'
ident
name
num
string
url
w
nl
range
{nmstart}{nmchar}*
{nmchar}+
[09]+|[09]*"."[09]+
{string1}|{string2}
([!#$%&*~]|{nonascii}|{escape})*
[ \t\r\n\f]*
\n|\r\n|\r|\f
\?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h})))))
%%
[ \t\r\n\f]+
{return S;}
217

\/\*[^*]*\*+([^/][^*]*\*+)*\/
/* ignorer les commentaires */
"<!"
">"
"~="
"|="
{return
{return
{return
{return
CDO;}
CDC;}
INCLUDES;}
DASHMATCH;}
{string}
{return STRING;}
{ident}
{return IDENT;}
"#"{name}
{return HASH;}
"@import"
"@page"
"@media"
"@fontface"
"@charset"
{return
{return
{return
{return
{return
"!{w}important"
{return IMPORTANT_SYM;}
{num}em
{num}ex
{num}px
{num}cm
{num}mm
{num}in
{num}pt
{num}pc
{num}deg
{num}rad
{num}grad
{num}ms
{num}s
{num}Hz
{num}kHz
{num}{ident}
{num}%
{num}
{return
{return
{return
{return
{return
{return
{return
{return
{return
{return
{return
{return
{return
{return
{return
{return
{return
{return
IMPORT_SYM;}
PAGE_SYM;}
MEDIA_SYM;}
FONT_FACE_SYM;}
CHARSET_SYM;}
EMS;}
EXS;}
LENGTH;}
LENGTH;}
LENGTH;}
LENGTH;}
LENGTH;}
LENGTH;}
ANGLE;}
ANGLE;}
ANGLE;}
TIME;}
TIME;}
FREQ;}
FREQ;}
DIMEN;}
PERCENTAGE;}
NUMBER;}
"url("{w}{string}{w}")" {return URI;}

"url("{w}{url}{w}")"
{return URI;}
{ident}"("
{return FUNCTION;}
U\+{range}
U\+{h}{1,6}{h}{1,6}
{return UNICODERANGE;}
{return UNICODERANGE;}
{return *yytext;}
D.3 La comparaison entre les atomisations de CSS2 et CSS1

Il existe quelques diffrences entre la syntaxe spcifie dans la recommandation CSS1 ([CSS1]) et celle spcifie
plus haut. La plupart de ces diffrences tant dues aux nouveaux jetons de CSS2 qui n'existaient pas en CSS1. Et
les autres tant dues au fait que la grammaire a t rcrite pour une meilleure lisibilit. Cependant, il y a certains
changements incompatibles, ceuxci taient considrs comme des erreurs de la syntaxe CSS1. Leur explication
suit :
L'encodage des caractres des feuilles de style CSS1 ne pouvaient avoir lieu que sur 1 octet, comme pour
ASCII et ISO88591. CSS2 n'a plus ces limitations. Dans les faits, l'extrapolation partir de l'atomiseur
CSS1 ne prsentant pas de grandes difficults, certains agents utilisateurs acceptaient les encodages sur 2
octets ;
CSS1 n'admettait que quatre chiffres hexadcimaux aprs la barre oblique inverse (\) pour la dsignation
des caractres Unicode, CSS2 en admet six. En plus, CSS2 admet un caractre blanc pour la dlimitation
d'une squence d'chappement. Par exemple, selon CSS1, la chane "\abcdef" est forme de 3 lettres
(\abcd, e et f), selon CSS2, celleci n'en a qu'une (\abcdef) ;
Le caractre tabulation (ASCII 9) n'tait pas admis dans une chane. C'est pourquoi, comme en CSS1, on
n'employait les chanes que pour les noms des polices et pour les URLs, le seul cas o cela pouvait
conduire une incompatibilit entre CSS1 et CSS2 rside dans une feuille de style dans laquelle le nom
d'une famille de polices contient une tabulation ;
De la mme faon en CSS1, les nouvelles lignes (chappes avec une barre oblique inverse) n'taient pas
admises ;
CSS2 interprte un nombre immdiatement suivi par un identifiant comme tant un jeton DIMEN (c..d.
une unit inconnue), CSS1 l'interprtait comme un nombre et un identifiant. Cela signifie que pour CSS1,
218

les dclarations 'font: 10pt/1.2serif' tout comme 'font: 10pt/1.2 serif' taient valides, mais pour CSS2,
l'espace est devenu obligatoire avant "serif" (certains agents utilisateurs acceptaient la premire forme
mais pas la seconde) ;
En CSS1, le nom d'une classe pouvait commencer par un chiffre (".55ft"), moins qu'il s'agissait d'une
dimension reconnue (".55in"). CSS2 interprte de telles classes comme tant des dimensions inconnues
(ce qui laisse le champs libre pour l'addition ultrieure de nouvelles units). Pour que la classe ".55ft" soit
valide en CSS2, le premier chiffre doit tre chapp (".\35 5ft").
219
Appendice E : Rfrences
E.1 Les rfrences normatives
[COLORIMETRY]
"Colorimetry, Second Edition", CIE Publication 15.21986, ISBN 3900734003.
Disponible http://www.hike.te.chibau.ac.jp/ikeda/CIE/publ/abst/15286.html ;
[CSS1]
"Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17 December 1996.
Disponible http://www.w3.org/TR/RECCSS1961217.html ;
[FLEX]
"Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213 ;
[HTML40]
"HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, 8 July 1997.
Disponible http://www.w3.org/TR/REChtml40/. Ce document dfinit trois dfinitions de type de
document, Strict, Transitional et Frameset, cellesci tant atteignables depuis cette Recommandation ;
[IANA]
"Assigned Numbers", STD 2, RFC 1700, USC/ISI, J. Reynolds and J. Postel, October 1994.
Disponible ftp://ftp.internic.net/rfc/rfc1700.txt ;
[ICC32]
"ICC Profile Format Specification, version 3.2", 1995.
Disponible ftp://sgigate.sgi.com/pub/icc/ICC32.pdf ;
[ISO8879]
ISO 8879:1986 "Information Processing Text and Office Systems Standard Generalized Markup
Language (SGML)", ISO 8879:1986.
Pour une liste des entits SGML, consulter ftp://ftp.ifi.uio.no/pub/SGML/ENTITIES/ ;
[ISO10646]
"Information Technology Universal Multiple Octet Coded Character Set (UCS) Part 1: Architecture
and Basic Multilingual Plane", ISO/IEC 106461:1993. La spcification actuelle prend aussi en
considration les cinq premiers amendements ISO/IEC 106461:1993. On peut consulter utilement les
documents relatifs BMP et au plan 1 qui montrent l'emplacement des critures par rapport celui des
tendues numriques ;
[PNG10]
"PNG (Portable Network Graphics) Specification, Version 1.0 specification", T. Boutell ed., 1 October
1996.
Disponible http://www.w3.org/pub/WWW/TR/RECpngmulti.html ;
[RFC1808]
"Relative Uniform Resource Locators", R. Fielding, June 1995.
Disponible ftp://ds.internic.net/rfc/rfc1808.txt ;
[RFC2045]
"Multipurpose Internet Mail Extensions (MIME) Part One: Format of Internet Message Bodies", N. Freed
and N. Borenstein, November 1996.
Disponible ftp://ftp.internic.net/rfc/rfc2045.txt. Noter que cet RFC2045 annule RFC1521, RFC1522 et
RFC1590 ;
[RFC2068]
"HTTP Version 1.1 ", R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen, and T. BernersLee, January
1997.
[RFC2070]
"Internationalization of the HyperText Markup Language", F. Yergeau, G. Nicol, G. Adams, and M.
Drst, January 1997.
[RFC2119]
"Key words for use in RFCs to Indicate Requirement Levels", S. Bradner, March 1997.
[RFC2318]
"The text/css Media Type", H. Lie, B. Bos, C. Lilley, March 1998.
[RFC1738]
"Uniform Resource Locators", T. BernersLee, L. Masinter, and M. McCahill, December 1994.
[SRGB]
"Proposal for a Standard Color Space for the Internet sRGB", M. Anderson, R. Motta, S. Chandrasekar,
M. Stokes.
220

Disponible http://www.w3.org/Graphics/Color/sRGB.html ;
[UNICODE]
"The Unicode Standard: Version 2.0", The Unicode Consortium, AddisonWesley Developers Press,
1996. Pour la bidirectionnalit, voir aussi le rectificatif
http://www.unicode.org/unicode/uni2errata/bidi.htm. Pour plus d'information et pour la dernire version
de Unicode, consulter le site du Consortium Unicode http://www.unicode.org/ ;
[URI]
"Uniform Resource Identifiers (URI): Generic Syntax and Semantics", T. BernersLee, R. Fielding, L.
Masinter.
August 1998. Internet RFC 2396. Disponible http://www.ietf.org/rfc/rfc2396.txt ;
[XML10]
"Extensible Markup Language (XML) 1.0" T. Bray, J. Paoli, C.M. SperbergMcQueen, editors, 10
February 1998.
Disponible http://www.w3.org/TR/RECxml/ ;
[YACC]
"YACC Yet another compiler compiler", S. C. Johnson, Technical Report, Murray Hill, 1975.
E.2 Les rfrences informatives

[CHARSETS]
Les valeurs des jeux de caractres enregistres. Tlcharger la liste de cellesci
ftp://ftp.isi.edu/innotes/iana/assignments/charactersets ;
[DOM]
"Document Object Model Specification", L. Wood, A. Le Hors, 9 October 1997.
Disponible http://www.w3.org/TR/WDDOM/ ;
[ISO10179]
ISO/IEC 10179:1996 "Information technology Processing languages Document Style Semantics
and Specification Language (DSSSL)"
Disponible http://occam.sjf.novell.com:8080/dsssl/dsssl96 ;
[GAMMA]
"Gamma correction on the Macintosh Platform", C. A. Poynton.
Disponible ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf ;
[HTML32]
"HTML 3.2 Reference Specification", Dave Raggett, 14 January 1997.
Disponible http://www.w3.org/TR/REChtml32.html ;
[INFINIFONT]
Voir http://www.fonts.com/hp/infinifont/moredet.html ;
[ISO9899]
ISO/IEC 9899:1990 Programming languages C.
[MONOTYPE]
Voir http://www.monotype.com/html/oem/uni_scrmod.html ;
[NEGOT]
"Transparent Content Negotiation in HTTP", K. Holtman, A. Mutz, 9 March, 1997.
Disponible http://gewis.win.tue.nl/~koen/conneg/draftietfhttpnegotiation01.html ;
[OPENTYPE]
Voir http://www.microsoft.com/OpenType/OTSpec/tablist.htm ;
[PANOSE]
Pour des informations sur les mesures de classification PANOSE, consulter
http://www.fonts.com/hp/panose/greybook et notamment les chapitres suivants : Latin Text, Latin Script,
Latin Decorative et Latin Pictorial.
Les nombres Panose de certaines polices sont disponibles en ligne, on peut effectuer leur recherche ;
[PANOSE2]
Voir http://www.w3.org/Fonts/Panose/pan2.html. Panose2 ne se limite pas aux polices latines ;
[POSTSCRIPT]
"The PostScript Language Reference Manual", Second Edition, Adobe Systems, Inc., AddisionWesley
Publishing Co., December 1990 ;
[RFC1630]
"Universal Resource Identifiers in WWW: A Unifying Syntax for the Expression of Names and Addresses
of Objects on the Network as used in the WorldWide Web", T. BernersLee, June 1994.
[RFC1766]
"Tags for the Identification of Languages", H. Alvestrand, March 1995.
[RFC1866]
221

"HyperText Markup Language 2.0", T. BernersLee and D. Connolly, November 1995.
[RFC1942]
"HTML Tables", Dave Raggett, May 1996.
[TRUETYPEGX]
Voir http://fonts.apple.com/TTRefMan/index.html pour des dtails sur le format TrueType GX de la
socit Apple Computer, ainsi que les descriptions des tables rajoutes et les spcifications de la qualit
des polices ;
[W3CSTYLE]
La page des ressources du W3C sur les feuilles de style sur le Web.
Disponible http://www.w3.org/pub/WWW/Style ;
[WAIPAGEAUTH]
Le guide "WAI Accesibility Guidelines: Page Authoring" pour construire des documents accessibles est
disponible
http://www.w3.org/TR/WDWAIPAGEAUTH.
222
Appendice F : Index des proprits

Nom
Valeurs
Valeur
initiale
S'applique
(dfaut : all)
'azimuth'
<angle> | [[ leftside | farleft | left |

centerleft | center | centerright | right |
farright | rightside ] || behind ] | leftwards
| rightwards | inherit
center
oui
'background'
['backgroundcolor' || 'backgroundimage'
|| 'backgroundrepeat' ||
|| 'backgroundposition'] | inherit
voir les
proprits
indivi
duelles
non
scroll | fixed | inherit
scroll
non
visuel
'backgroundcolor'
transparent
non
visuel
'backgroundimage'
none
non
visuel
'backgroundposition'
[ [<pourcentage> | <longueur> ]{1,2} | [

[top | center | bottom] || [left | center | right]
] ] | inherit
0% 0%
'backgroundrepeat'
repeat | repeatx | repeaty | norepeat |

inherit
repeat
non
visuel
'border'
[ 'borderwidth' || 'borderstyle' ||
<couleur> ] | inherit
voir les
proprits
indivi
duelles
non
visuel
'bordercollapse'
collapse | separate | inherit
collapse
oui
visuel
'bordercolor'
<couleur>{1,4} | transparent | inherit
voir les
proprits
indivi
duelles
non
visuel
'borderspacing'
<longueur> <longueur>? | inherit
oui
visuel
'borderstyle'
<bordurestyle>{1,4} | inherit
voir les
proprits
indivi
non
visuel
ceux des lments de

type bloc et ceux
remplacs
ceux des lments

avec 'display:table' ou
'display:inlinetable'
ceux des lments

'display:inlinetable'
Hrite ?
non
Pourcentage
Groupes de
(dfaut : sans objet)
mdias
auditif
admis pour
'background
position'
se rapporte la taille
de la bote
ellemme
visuel
visuel
duelles
'bordertop'
'borderright'
'borderbottom'
'borderleft'
[ 'bordertopwidth' || 'borderstyle' ||
<couleur> ] | inherit
voir les
proprits
indivi
duelles
non
visuel
'bordertopcolor'
'borderrightcolor'
'borderbottomcolor'
'borderleftcolor'
<couleur> | inherit
la valeur de la
proprit
'color'
non
visuel
'bordertopstyle'
'borderrightstyle'
'borderbottomstyle'
'borderleftstyle'
none
non
visuel
'bordertopwidth'
'borderrightwidth'
'borderbottomwidth'
'borderleftwidth'
medium
non
visuel
'borderwidth'
<bordurepaisseur>{1,4} | inherit
voir les
proprits
indivi
duelles
non
visuel
'bottom'
auto
lments positionns
non
'captionside'
top | bottom | left | right | inherit
top
ceux des lments

avec 'display:
tablecaption'
oui
visuel
'clear'
none | left | right | both | inherit
none
ceux des lments de

type bloc
non
visuel
'clip'
<forme> | auto | inherit
auto
ceux des lments de

type bloc et ceux
remplacs
non
visuel
'color'
<couleur> | inherit
selon l'agent
utilisateur
oui
visuel
'content'
[ <chane> | <uri> | <compteur> | attr(X) |

openquote | closequote | noopenquote
| noclosequote ]+ | inherit
chane vide
non
tous
pseudolments
:before et :after
se rapporte la
hauteur du bloc
conteneur
visuel
'counterincrement'
none
non
tous
'counterreset'
none
non
tous
'cue'
[ 'cuebefore' || 'cueafter' ] | inherit
XX
non
auditif
'cueafter'
none
non
auditif
'cuebefore'
none
non
auditif
'cursor'
[ [<uri> ,]* [ auto | crosshair | default |

pointer | move | eresize | neresize |
nwresize | nresize | seresize | swresize
| sresize | wresize| text | wait | help ] ] |
inherit
auto
oui
visuel,
inter
active
'direction'
ltr | rtl | inherit
ltr
oui
visuel
'display'
inline | block | listitem | runin | compact |

marker | table | inlinetable |
tablerowgroup | tableheadergroup |
tablefootergroup | tablerow |
tablecolumngroup | tablecolumn |
tablecell | tablecaption | none | inherit
inline
non
tous
'elevation'
<angle> | below | level | above | higher |

lower | inherit
level
oui
auditif
'emptycells'
show | hide | inherit
show
ceux des lments

avec 'display:
tablecell'
oui
visuel
tous les lments,

sauf ceux positionns
et ceux avec un
contenu gnr
non
visuel
tous les lments, voir

explications
'float'
left | right | none | inherit
none
'font'
[ [ 'fontstyle' || 'fontvariant' ||
'fontweight' ]? 'fontsize' [ / 'lineheight'
]? 'fontfamily' ] | caption | icon | menu |
messagebox | smallcaption | statusbar |
inherit
voir les
proprits
indivi
duelles
oui
'fontfamily'
[[ <famillenom> | <famillegnrique>
],]* [<famillenom> |
<famillegnrique>] | inherit
selon l'agent
utilisateur
oui
'fontsize'
<tailleabsolue> | <taillerelative> |
medium
admis pour
'fontsize' et
'lineheight'
oui, la valeur se rapporte la taille

calcule
de la police du parent
visuel
visuel
visuel
s'hrite
'fontsizeadjust'
<nombre> | none | inherit
none
oui
visuel
'fontstretch'
normal | wider | narrower | ultracondensed

| extracondensed | condensed |
semicondensed | semiexpanded |
expanded | extraexpanded |
ultraexpanded | inherit
normal
oui
visuel
'fontstyle'
normal | italic | oblique | inherit
normal
oui
visuel
'fontvariant'
normal | smallcaps | inherit
normal
oui
visuel
'fontweight'
normal | bold | bolder | lighter | 100 | 200 |

300 | 400 | 500 | 600 | 700 | 800 | 900 |
inherit
normal
oui
visuel
'height'
auto
tous les lments,

sauf ceux enligne
non remplacs, les
colonnes et groupes
de colonnes des tables
'left'
auto
ceux des lments

positionns
'letterspacing'
normal
oui
'lineheight'
normal | <nombre> | <longueur> |

<pourcentage> | inherit
normal
oui
'liststyle'
[ 'liststyletype' || 'liststyleposition' ||
'liststyleimage' ] | inherit
XX
ceux des lments

avec 'display:
listitem'
oui
visuel
'liststyleimage'
none
ceux des lments

avec 'display:
listitem'
oui
visuel
'liststyleposition'
inside | outside | inherit
outside
ceux des lments

avec 'display:
listitem'
oui
visuel
'liststyletype'
disc | circle | square | decimal |

decimalleadingzero | lowerroman |
upperroman | lowergreek | loweralpha |
lowerlatin | upperalpha | upperlatin |
disc
oui
visuel
ceux des lments

avec 'display:
listitem'
non
voir explication
visuel
non
se rapporte la
largeur du bloc
conteneur
visuel
visuel
se rapporte la taille
de la police de
l'lment luimme
visuel
hebrew | armenian | georgian |

cjkideographic | hiragana | katakana |
hiraganairoha | katakanairoha | none |
inherit
'margin'
<margelargeur>{1,4} | inherit
XX
non
se rapporte la
largeur du bloc
conteneur
visuel
'margintop'
'marginright'
'marginbottom'
'marginleft'
<margelargeur> | inherit
non
se rapporte la
largeur du bloc
conteneur
visuel
'markeroffset'
<longueur> | auto | inherit
auto
ceux des lments

avec 'display: marker'
non
visuel
'marks'
[ crop || cross ] | none | inherit
none
dans un contexte de
page
sans objet
visuel,
pagin
none
tous les lments,

sauf ceux enligne
non remplacs et ceux
des tables
non
se rapporte la
hauteur du bloc
conteneur
visuel
none
tous les lments,

sauf ceux enligne
des tables
non
se rapporte la
largeur du bloc
conteneur
visuel
tous les lments,

sauf ceux enligne
des tables
non
se rapporte la
hauteur du bloc
conteneur
visuel
tous les lments,

selon l'agent sauf ceux enligne
utilisateur non remplacs et ceux
des tables
non
se rapporte la
largeur du bloc
conteneur
visuel
ceux des lments de

type bloc
oui
visuel,
pagin
visuel,
inter
active
'maxheight'
'maxwidth'
'minheight'
'minwidth'
'orphans'
<entier> | inherit
'outline'
[ 'outlinecolor' || 'outlinestyle' ||
'outlinewidth' ] | inherit
voir les
proprits
indivi
duelles
non
'outlinecolor'
<couleur> | invert | inherit
invert
non
visuel,
inter
active
'outlinestyle'
none
non
visuel,
inter
active
'outlinewidth'
medium
non
visuel,
inter
active
'overflow'
visible | hidden | scroll | auto | inherit
visible
non
visuel
'padding'
<espacementlargeur>
{1,4} | inherit
XX
non
se rapporte la
largeur du bloc
conteneur
visuel
'paddingtop'
'paddingright'
'paddingbottom'
'paddingleft'
<espacementlargeur> | inherit
non
se rapporte la
largeur du bloc
conteneur
visuel
'page'
<identifiant> | auto
auto
ceux des lments de

type bloc
oui
visuel,
pagin
'pagebreakafter'
auto
ceux des lments de

type bloc
non
visuel,
pagin
'pagebreakbefore'
auto
ceux des lments de

type bloc
non
visuel,
pagin
'pagebreakinside'
avoid | auto | inherit
auto
ceux des lments de

type bloc
oui
visuel,
pagin
'pause'
ceux des lments de

type bloc et ceux
remplacs
l'agent
[ [<dure> | <pourcentage>]{1,2} ] | inherit selon
utilisateur
non
voir les descriptions

de 'pausebefore' et
'pauseafter'
auditif
'pauseafter'
selon l'agent
utilisateur
non
voir explication
auditif
'pausebefore'
selon l'agent
utilisateur
non
voir explication
auditif
'pitch'
<frquence> | xlow | low | medium | high |

xhigh | inherit
medium
oui
auditif
'pitchrange'
<nombre> | inherit
50
oui
auditif
'playduring'
<uri> mix? repeat? | auto | none | inherit
auto
non
auditif
'position'
static | relative | absolute | fixed | inherit
static
non
visuel
'quotes'
[<chane> <chane>]+ | none | inherit
selon l'agent
utilisateur
oui
visuel
'richness'
<nombre> | inherit
50
oui
auditif
'right'
auto
lments positionns
non
'size'
<longueur>{1,2} | auto | portrait | landscape

| inherit
auto
dans un contexte de
page
sans objet
visuel,
pagin
'speak'
normal | none | spellout | inherit
normal
oui
auditif
'speakheader'
once | always | inherit
once
oui
auditif
'speaknumeral'
digits | continuous | inherit
continuous
oui
auditif
'speakpunctuation'
code | none | inherit
none
oui
auditif
'speechrate'
<nombre> | xslow | slow | medium | fast |

xfast | faster | slower | inherit
medium
oui
auditif
'stress'
<nombre> | inherit
50
oui
auditif
ceux des lments

'display:
inlinetable'
non
visuel
selon l'agent
utilisateur et ceux des lments de
du sens
type bloc
d'criture
oui
visuel
non (voir
explications)
visuel
'tablelayout'
auto | fixed | inherit
auto
'textalign'
left | right | center | justify | <chane> |

inherit
'textdecoration'
none | [ underline || overline || linethrough

|| blink ] | inherit
none
'textindent'
tous les lments,

sauf ceux avec un
contenu gnr
ceux des lments

contenant une
information d'entte
ceux des lments de

type bloc
oui
se rapporte la
largeur du bloc
conteneur
se rapporte la
largeur du bloc
conteneur
visuel
visuel
'textshadow'
none | [<couleur> || <longueur> <longueur>

<longueur>? ,]* [<couleur> || <longueur>
<longueur>
<longueur>?] | inherit
none
non (voir
explications)
visuel
'texttransform'
capitalize | uppercase | lowercase | none |

inherit
none
oui
visuel
'top'
auto
lments positionns
non
'unicodebidi'
normal | embed | bidioverride | inherit
normal
tous les lments,

mais voir explications
non
'verticalalign'
baseline | sub | super | top | texttop |

middle | bottom | textbottom |
<pourcentage> | <longueur> | inherit
baseline
ceux des lments de

type enligne et ceux
avec 'display:
tablecell'
'visibility'
visible | hidden | collapse | inherit
inherit
non
visuel
'voicefamily'
[[<voixspcifique> | <voixgnrique>
],]* [<voixspcifique> |
<voixgnrique> ] | inherit
selon l'agent
utilisateur
oui
auditif
'volume'
<nombre> | <pourcentage> | silent | xsoft |

soft | medium | loud | xloud | inherit
medium
oui
'whitespace'
normal | pre | nowrap | inherit
normal
ceux des lments de

type bloc
oui
visuel
'widows'
<entier> | inherit
ceux des lments de

type bloc
oui
visuel,
pagin
tous les lments,

sauf ceux de type
enligne non
remplacs, les
ranges et groupes de
ranges des tables
non
'width'
auto
'wordspacing'
normal
'zindex'
auto | <entier> | inherit
auto
lments positionns
non
se rapporte la
hauteur du bloc
conteneur
visuel
visuel
se rapporte la
valeur de
'lineheight' de
l'lment luimme
se rapporte la
valeur hrite
se rapporte la
largeur du bloc
conteneur
visuel
auditif
visuel
oui
visuel
non
visuel
Appendice G : Index des descripteurs

Nom
'ascent'
'baseline'
'bbox'
'capheight'
'centerline'
'definitionsrc'
'descent'
'fontfamily'
'fontsize'
'fontstretch'
'fontstyle'
'fontvariant'
'fontweight'
'mathline'
'panose1'
'slope'
'src'
'stemh'
'stemv'
'topline'
'unicoderange'
'unitsperem'
'widths'
'xheight'
Valeur
<nombre>
<nombre>
<nombre>, <nombre>, <nombre>,
<nombre>
<nombre>
<nombre>
<uri>
<nombre>
[ <famillenom> | <famillegnrique> ]
[, [<famillenom> | <famillegnrique>
]]*
all | <longueur> [, <longueur>]*
all | [ normal | ultracondensed |
extracondensed | condensed |
semicondensed | semiexpanded |
expanded | extraexpanded |
ultraexpanded ] [, [ normal |
ultracondensed | extracondensed |
condensed | semicondensed |
semiexpanded | expanded |
extraexpanded | ultraexpanded] ]*
all | [ normal | italic | oblique ] [, [normal |
italic | oblique] ]*
[normal | smallcaps] [,[normal |
smallcaps]]*
all | [normal | bold | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900] [, [normal |
bold | 100 | 200 | 300 | 400 | 500 | 600 |
700 | 800 | 900]]*
<nombre>
[<entier>]{10}
<nombre>
[ <uri> [format(<chane> [, <chane>]*)] |
<policenom> ] [, <uri>
[format(<chane> [, <chane>]*)] |
<policenom> ]*
<nombre>
<nombre>
<nombre>
<tendueunicode> [,
<tendueunicode>]*
<nombre>
[<tendueunicode> ]? [<nombre> ]+
[,[<tendueunicode> ]? <nombre> ]+]
<nombre>
Valeur initiale
indfinie
0
indfinie
indfinie
indfinie
indfinie
indfinie
all
normal
all
normal
all
indfinie
0000000000
0
indfinie
indfinie
indfinie
indfinie
U+07FFFFFFF
indfinie
indfinie
indfinie

css2 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

css2 PDF

Transféré par

Droits d'auteur :

Formats disponibles

RECCSS219980512

Table des matires

Table des matires

Table des matires

Table des matires

Table des matires

Table des matires

Recommandation CSS2 du W3C en version franaise

Notes sur la traduction

Autres documents traduits

Feuilles de style en cascade, niveau 2

Les feuilles de style en cascade, niveau 2

Feuilles de style en cascade, niveau 2

Feuilles de style en cascade, niveau 2

1 propos de la spcification CSS2

1.2 Organisation de la spcification

valeurs et syntaxe lgales

Feuilles de style en cascade, niveau 2

Feuilles de style en cascade, niveau 2

on peut les rcrire en une seule proprit raccourcie :

Ici, 'fontvariant', 'fontstretch', 'fontsizeadjust' et 'fontstyle' prennent leur valeur initiale.

Feuilles de style en cascade, niveau 2

1.5 Notice de copyright

Feuilles de style en cascade, niveau 2

Feuilles de style en cascade, niveau 2

L'lment LINK spcifie :

Feuilles de style en cascade, niveau 2

2.2 Un bref tutoriel de CSS2 pour XML

Feuilles de style en cascade, niveau 2

Ce qu'un agent visuel pourrait rendre par :

Ce qu'un agent visuel pourrait rendre ainsi :

Feuilles de style en cascade, niveau 2

2.3 Le modle de traitement de CSS2

Feuilles de style en cascade, niveau 2

2.4 Les principes de construction de CSS

Feuilles de style en cascade, niveau 2

Feuilles de style en cascade, niveau 2

3 La conformit : obligations et recommandations

Feuilles de style en cascade, niveau 2

et maintenant son arborescence :

Feuilles de style en cascade, niveau 2

3.3 Les conditions d'erreur

3.4 Le type de contenu text/css

Feuilles de style en cascade, niveau 2

4 La syntaxe de CSS2 et les types de donnes de base

Feuilles de style en cascade, niveau 2

[ CDO | CDC | S | dclaration ]*;

est un motcl, mais :

n'en est pas un (c'est une chane). D'autres exemples proscrire :

Feuilles de style en cascade, niveau 2

4.1.3 Les caractres et la casse

Feuilles de style en cascade, niveau 2

4.1.6 Les blocs

Feuilles de style en cascade, niveau 2

4.1.8 Les dclarations et proprits

sont quivalentes celleci :

Feuilles de style en cascade, niveau 2

/* valeur invalide : 12pt */

4.1.9 Les commentaires

4.2 Les rgles de traitement des erreurs d'interprtation

l'agent utilisateur la traitera comme si elle tait :

valide pour CSS2 */

Feuilles de style en cascade, niveau 2