Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Anne-Marie Luigi

Le balisage des spécifications CSS

La spécification CSS de niveau 2 et les différents modules CSS de niveau 3 ont un balisage spécifique au-delà de HTML. Ce balisage permet de dénommer de manière appropriée les différents types d'information (noms de propriétés, notes informatives, exemples, etc.), mais surtout de permettre à différents outils automatisés de lire les spécifications. Ces outils peuvent créer un index avec toutes les propriétés, extraire une grammaire lisible par une machine, vérifier tous les exemples, etc. Tout est détaillé dans les sections ci-dessous.

Les origines des conventions de balisage

Le balisage de CSS2 est différent de celui de CSS3. Le balisage de CSS3 est une évolution du balisage de CSS2 et est beaucoup plus récent. Il est à la fois plus compact et plus riche en sémantique.

D'autre part, le balisage dans les textes publiés sur CSS n'est pas exactement le même que le balisage utilisé par les auteurs lors de l'écriture du texte. Ce dernier contient des abréviations qui sont développées automatiquement avant la publication d'un document. Par exemple, les auteurs ne créent presque jamais de liens. Au lieu de cela, ils incluent une balise ou un caractère spécial qui indique le rôle d'un mot (un nom de propriété, un terme technique, une référence bibliographique, etc.) et chaque mot est automatiquement lié à sa définition.

Moins de frappe signifie moins d'erreurs et plus de temps pour se concentrer sur le contenu. Ainsi, puisque c'est l'ordinateur qui ajoute les liens et une grande partie du balisage, les documents terminés sont plus cohérents. En même temps, le document sur lequel travaillent les auteurs est toujours un document HTML complet qui peut être édité et visualisé dans n'importe quel outil HTML normal. Il contient juste moins de liens et un peu moins de couleurs que le document final.

Des documents aussi cohérents ont plusieurs avantages. Par exemple, la table des matières, l'index et la liste des propriétés sont créés automatiquement. En outre, diverses vérifications automatiques peuvent être effectuées avant la publication d'un document, par exemple : toutes les propriétés présentes dans le texte sont-elles également définies ? Toutes les grammaires sont-elles complètes ? Tous les exemples sont-ils valides ? Toutes les références bibliographiques sont-elles définies ?

Le balisage de la source CSS3

La façon dont les auteurs écrivent les modules CSS3 n'est pas toujours la façon dont les documents apparaissent une fois publiés. Le balisage que les auteurs utilisent est inclus ici, même si les lecteurs ne le voient jamais.

Deux caractéristiques importantes de ce balisage (et des programmes qui fonctionnent avec) sont :

Propriétés

Les propriétés sont des mots simples encadrés de guillemets simples, par exemple :

'font'
'text-indent'

C'est tout ce que l'auteur doit taper. De tels mots sont automatiquement inclus dans un élément <a> avec la classe "property" qui lie à la définition de la propriété :

<a class=property
 href="#font0">'font'</a>
<a class=property
 href="#text-indent">'text-indent'</a>

Toutes les occurrences de noms de propriété sont marquées comme ceci, sauf lorsqu'elles apparaissent dans un exemple ou dans du Code CSS. La définition de la propriété n'a pas de guillemets.

Code CSS en ligne et mots-clés CSS

Le code CSS en ligne est également encadré de guillemets simples ou de deux paires de guillemets simples, par exemple :

'color: blue'
''display: none''

L'auteur ne tape que les guillemets, le texte est automatiquement encadré de <span> avec la classe "css" lors de la publication. Si les guillemets ont été doublés, une paire est supprimée :

<span class=css>'color: blue'</span>
<span class=css>'display: none'</span>

Les mots-clés CSS (autres que les noms de propriétés) doivent être tapés par l'auteur avec une double paire de guillemets simples, afin de les distinguer des propriétés :

''none''

Le résultat dans le document publié est un mot avec des guillemets simples et un <span> comme ci-dessus :

<span class=css>'none'</span>

Types de valeur

Les types de valeurs sont placés entre des chevrons et dans un élément <var>. Par exemple :

<var>&lt;integer&gt;</var>
<var>&lt;color&gt;</var>
<var>&lt;percentage&gt;</var>

[Le balisage des définitions de ces types n'a pas encore été décidé.]

Références croisées et termes définis

L'occurrence de référence d'un terme est encadrée par un élément <dfn> (ce qui signifie qu'elle apparaîtra également dans l'index alphabétique) :

<dfn>dog</dfn>

Pour se référer à la définition, l'auteur n'a qu'à encadrer l'usage dans un élément en ligne (<em>, <span>, etc.) et l'usage sera automatiquement mis dans un élément <a> qui lie à l'occurrence de référence.

Si l'utilisation et la définition ne sont pas littéralement identiques, l'attribut title peut être utilisé pour donner le terme exact :

<dfn title="dog">dogs</dfn>
<em>dog</em>
<span title="dog">dog</span>

Le résultat ressemble à ceci :

<dfn id=dogs0 title="dog">dogs</dfn>
<em><a href="#gogs0">dog</a></em>
<span title="dog"><a href="#dogs0">dog</a></span>

Définitions de propriété

La définition des propriétés consiste en une table comme celle-ci :

Name: padding
Value: [ <length> | <percentage> ]{1,4}
Initial: (see individual properties)
Applies to: all elements
Inherited: no
Animatable: yes
Percentages: width* of containing block
Media: visual
Computed value: see individual properties
Canonical order: N/A
*) if the containing block is horizontal, otherwise the height

Qui est créée comme ceci :

<table class=propdef>
 <tr>
  <th>Name:
  <td><dfn>padding</dfn>
 <tr>
  <th>Value:
  <td>[ <var>&lt;length&gt;</var>
   | <var>&lt;percentage&gt;</var> ]{1,4}
 <tr>
  <th>Initial:
  <td>(see individual properties)
 <tr>
  <th>Applies&nbsp;to:
  <td>all elements
 <tr>
  <th>Inherited:
  <td>no
 <tr>
  <th>Animatable:
  <td>yes
 <tr>
  <th>Percentages:
  <td>width* of containing block
 <tr>
  <th>Media:
  <td>visual
 <tr>
  <th>Computed&nbsp;value:
  <td>see individual properties
 <tr>
  <th>Canonical&nbsp;order:
  <td>N/A
 <tr>
  <td colspan=2 class=footnote>*) if the
   containing block is horizontal, otherwise
   the height
</table>

La table a une classe "propdef" et le nom de la propriété qui est en train d'être définie est inclus dans <dfn> (mais pas entre des guillemets simples). Lorsque le document est publié, un attribut ID est automatiquement ajouté à <dfn> et le nom de la propriété est ajouté à l'index alphabétique et à l'index des propriétés.

Définitions des descripteurs

Les définitions des descripteurs (les caractéristiques des polices, à l'intérieur d'une règle @ font-face) sont similaires. Elles ressemblent à ceci :

Name: x-height
Value: <number>
Initial: undefined
Media: visual

La table a une classe "descdef" et ressemble à ceci :

<table class="descdef">
<tr><td>Name: <td><dfn>x-height</dfn>
<tr><td>Value: <td>&lt;number&gt;
<tr><td>Initial: <td>undefined
<tr><td>Media: <td>visual
</table>

Références bibliographiques

Il existe deux types de références bibliographiques : normatives et informatives. L'auteur tape le premier type comme ceci

[[!CSS3BOX]]
[[!UNICODE4]]

où "CSS3BOX" et "UNICODE4" sont les étiquettes des entrées qui sont définies dans une base de données externe refer (1). Les références informatives sont les mêmes, mais sans le point d'exclamation :

[[SELECT]]
[[MEDIAQ]]

Il est possible d'ajouter des entrées à la bibliographie sans avoir de [[...]] correspondant dans le texte, en plaçant l'étiquette à l'intérieur de {{...}} dans un commentaire :

<!-- {{CSS3BG}} -->

Dans le document publié, les références [[…]] sont développées en liens vers la bibliographie comme suit :

<a href="#CSS3BOX"
 rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a>
<a href="#UNICODE4"
 rel=biblioentry>[UNICODE4]<!--{{UNICODE4}}--></a>
<a href="#SELECT"
 rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>
<a href="#MEDIAQ"
 rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>

La raison pour l'inclusion du commentaire est qu'il permet au document final d'être édité, sans enlever les éléments <a>, sans avoir à régénérer la bibliographie, malgré l'absence de doubles crochets. (En théorie, les spécifications publiées ne sont jamais modifiées, mais la pratique et la théorie sont parfois différentes...)

Bibliographie

La bibliographie est générée automatiquement à partir des références bibliographiques et des données dans une base de données bibliographique externe. Le résultat est inséré à l'endroit des deux commentaires suivants dans la source :

<!--normative-->
<!--informative-->

Le premier pour la liste des références normatives, le second pour les références informatives. Le résultat dans le document publié ressemble à ceci :

<!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none">
    <!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS3LINE>[CSS3LINE]

   <dd>Michel Suignard; Eric A. Meyer. <cite>CSS3
    module: line.</cite> 15 May 2002. W3C Working
    Draft. (Work in progress.) URL: <a
    href=".../WD-css3-linebox-20020515">
    .../WD-css3-linebox-20020515</a>
    </dd>
   <!---->

   <dt id=CSS3SYN>[CSS3SYN]

   <dd>L. David Baron. <cite>CSS3 module:
    Syntax.</cite> 13 August 2003. W3C
    Working Draft. (Work in progress.) URL: <a
    href=".../WD-css3-syntax-20030813">
    .../WD-css3-syntax-20030813</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

Termes de l`index

Le balisage le plus simple qui place un mot ou une phrase dans l'index alphabétique est un <span> avec la classe "index" :

<span class=index>containing block</span>

Lorsque le terme doit apparaître différemment de l'index dans le texte, l'attribut title contient le texte de l'index :

<span class=index title="box">boxes</span>
<span class=index title="inherited value">inherit
 a value</span>

Lorsque le terme doit apparaître dans l'index sous deux ou plusieurs entrées différentes, l'attribut title contient les différentes entrées séparées par des barres verticales :

<span class=index title="outer edge|margin edge">
 outer (margin) edge</span>

Lorsque le terme doit apparaître comme une sous-entrée d'un autre terme, l'attribut title contient l'entrée et la sous-entrée séparées par deux points d'exclamation :

<span class=index title="edge!!outer">
 outer edge</span>
<span class=index title="edge!!inner">
 inner edge</span>

Bien sûr, les sous-termes et les termes multiples peuvent être combinés :

<span class=index title="edge!!outer|edge!!margin">
 outer edge</span>

Si une occurrence est considérée comme l'instance de référence du terme, l'élément <dfn> remplace le span et la classe est omise :

<dfn>padding</dfn>

L'attribut title peut être placé sur l'élément <dfn> exactement comme sur le <span>.

Tous les termes de l'index obtiennent automatiquement un attribut ID.

Index

L'index alphabétique généré à partir des termes de l'index est automatiquement inséré dans le document à l'endroit du commentaire suivant :

<!--index-->

Le résultat ressemble à ceci :

<!--begin-index-->
<ul class=indexlist>
 <li>anonymous,
  <a href="#anonymous0"><strong>#</strong></a>
 <li>'writing-mode',
  <a href="#writing-mode"><strong>#</strong></a>
</ul>
<!--end-index-->

Exemples

Les exemples sont balisés avec une classe "example" et peuvent être soit <div> soit <pre>. Le premier est utilisé si l'exemple comprend un texte explicatif ou des images, le second si l'exemple ne consiste en rien d'autre que du code :

<div class=example>
...
</div>

<pre class=example>
...
</pre>

Illustrations

Les illustrations ont normalement une légende. L'illustration et la légende sont encadrées d'un <div> avec la classe "figure" comme ceci :

<div class="figure">
  <p><img src="box.png"
   alt="Boxes have four sides [schema]">
  <p class=caption>Relation between four…
</div>

Notes

La classe "note" indique une note non normative. Elle est généralement utilisée sur un <p>, <div> ou <span>.

<p class=note>Note that the…

Numéros de section

Les numéros de section sont généralement ajoutés automatiquement. Ils sont encadrés d'un span avec la classe "secno" et ressemblent à ceci :

<span class=secno>1. </span>

Les sous-sections sont numérotées 1.1., 1.1.1, etc.

Titres

Un module CSS3 n'a qu'un seul élément <h1>, qui est le même que l'élément <title> (sauf peut-être pour la ponctuation et les abréviations).

Table des matières

La table des matières est automatiquement générée et insérée à l'endroit du commentaire suivant :

<!--toc-->

Le résultat ressemble à ceci :

<!--begin-toc-->
<ul class=toc>
 <li><a href="#dependencies"><span class=secno>1.
  </span>Dependencies on
  other modules</a>
 <li><a href="#introduction"><span class=secno>2.
  </span>Introduction</a>
</ul>
<!--end-toc-->

Le balisage de la source CSS2

[à faire]

Logiciel

Le CSS WG utilise une variété d'outils privés pour traiter, tester et utiliser autrement les spécifications qui sont marquées comme ci-dessus. Certains outils sont des scripts CGI, d'autres sont des programmes Perl ou des scripts sed. Mais une grande partie du traitement se fait avec diverses combinaisons d'outils C des utilitaires HTML-XML.

Bert Bos, coordinateur de l'activité style
Copyright © 1994–2018 W3C®

Made with    CSS! Valid CSS! Last updated mar. 15 mai 2018 09:52:16 UTC

Langues

À propos des traductions