Fiche CSS : Structuration automatique des pages


Objet de la fiche

État de la fiche Terminée validée


Plan de la fiche

Avant propos

Dans certains cas, les auteurs peuvent souhaiter que le navigateur puisse représenter un contenu qui n'apparaît pas dans le corps du document, comme par exemple une liste numérotée pour laquelle l'auteur ne veut pas avoir à fournir la liste des numéros explicitement, préférant laisser le navigateur les générer automatiquement. De façon similaire, l'auteur peut vouloir qu'un mot ou une chaîne de caractères soit insérés avant une illustration, comme par exemple , "Fiche HTML" avant le titre des chapitres.
En CSS2, plusieurs mécanismes peuvent générer un tel contenu avec les propriétés 'content' associées aux pseudo-éléments before et after ;

Certains navigateurs et en particulier Internet Explorer (au moins jusqu'à Mars 2008) ne gèrent pas la propriété content , donc attention l'effet n'est garanti.

Les pseudo-éléments :before et :after

L'auteur spécifie le style et l'emplacement d'un contenu généré au moyen des pseudo-éléments before et after. Comme leurs noms l'indiquent, ceux-ci précisent l'emplacement du contenu avant ou après celui d'un élément du document. La propriété 'content', utilisée en conjonction avec eux, spécifie la nature de ce qui est inséré.

Syntaxe avec before

<style>
    Balise HTML:before{content:XXXXXXX;style ZZZZZZ}
</style>

Exemple appliqué à la balise HTML h1

<style>
    h1:before{content:XXXXXXX;style ZZZZZZ}
</style>

Lors du chargement de la page HTML,  les informations XXXXXXX auxquelles on applique le style ZZZZZZ sont automatiquement insérées avant le contenu HTML encadré par chaque balise <h1> du corps du document.

Syntaxe avec after

<style>
    Balise HTML:after{content:AAAAAAA;style BBBBBBB}
</style>

Exemple appliqué à la balise HTML li

<style>
    li:after{content:AAAAAAA;style BBBBBBB}
</style>

Lors du chargement de la page HTML,  les informations AAAAAAA auxquelles on applique le style BBBBBBB sont automatiquement insérées aprés le contenu HTML encadré par chaque balise <li> du corps du document.

Ces syntaxes s'appliquent à la plus part des balises HTML ( h1,h2...,p,li,dd,img etc)

Exemple simple (résultat sur un navigateur conforme aux standards).

Utilisation de :before et :after (insertion d'une chaîne de caractères sur les élément <p> de classe Note1 et Note2.



Remarques sur le code

  • Les bordures prévues pour les paragraphes <p> possédant les classes .Note1 et .Note2 incluent  les chaînes rajoutées avant ou après l'élément.
  • La concaténation de chaînes de caractères pour la propriété content s'effectue en laissant un espace entre les commandes : open-quote "- Note 2 : " close-quote
  •  Les pseudo-éléments :before et :after héritent de chacune des propriétés(celles qui sont transmissibles) de leurs parents: Aucune taille n'étant précisée pour les classes Note1 after, Note2 before et Note2 after, ces dernières prendront la taille des caractères défini dans le body (parent de <p>  dans cet exemple) .Les propriétés non héritées prennent leur valeur initiale.
  • Grâce à la propriété "display" on peut inscrire le contenu de content dans un élément de type bloc (cas de la classe before .Note1 avec display:block) ou inline (cas de la classe before .Note2) pour lequel l'insertion se trouve sur la même ligne que le contenu. Les contenus de ces pseudo-éléments, avec valeurs 'block' ou 'inline', font partie de la boîte principale générée par l'élément, ce que l'on voit très bien dans l'exemple ou les cadres rouge et noir englobent l'élément plus les contenus apportés par les pseudo-éléments.
    Autres valeurs possibles avec la propriété "display" :
    - Si le sujet du sélecteur est un élément de type bloc, les valeurs admises sont 'none', 'inline', 'block' et 'marker'. Pour toute autre valeur de la propriété 'display', le pseudo-élément se comporte comme si la valeur était 'block' ;
    - Si le sujet du sélecteur est un élément de type en-ligne, les valeurs admises sont 'none' et 'inline'. Pour toute autre valeur de la propriété 'display', le pseudo-élément se comporte comme si la valeur était 'inline'.

Note : les propriétés 'position', 'float', listes (ul,ol)  tables, formulaires ne sont pas autorisées en association avec les pseudo éléments after et before..

La propriété 'content'

La propriété de feuille de style css "content" permet de spécifier un contenu à insérer avec les propriétés de feuille de style css after ou before. Nous avons eu un premier aperçu ci dessus, mais il existe d'autres possibilités que l'insertion simple d'une chaîne de caractères.

Attributs Commentaires
chaîne Un contenu de texte. On peut produire des retours à la ligne dans le contenu généré en écrivant la séquence  "\A" dans l'une des chaînes après la propriété 'content'. Ceci insère un retour à la ligne forcé, semblable à l'élément <br /> du HTML.

La concaténation de chaînes de caractères pour la propriété content s'effectue en laissant un espace entre les commandes :
url URL qui pointe sur une ressource externe en général une image.
Exemple de Syntaxe : p:before{content: url('web108.gif') " - Note 1 : "}.
compteur(1) On peut spécifier des compteurs à l'aide de deux fonctions : 'counter()' ou 'counters()'. La première peut se présenter sous deux formes : 'counter(nom)' ou 'counter(nom, style)'. Le texte généré correspond à la valeur du compteur nommé à cet endroit de la structure de mise en forme, et son style, à celui indiqué (par défaut, c'est 'decimal'). La deuxième prend aussi deux formes : 'counters(nom, chaîne)' ou 'counters(nom, chaîne, style)'. Le texte généré 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 défaut, 'decimal') par les styles disponibles pour la propriété 'list-style-type' (attribut de liste).
attr(X) (3) Cette fonction retourne, sous forme de chaîne, la valeur de l'attribut X du sujet du sélecteur. Cette chaîne n'est pas parcourue par l'interpréteur CSS. Au cas ou le sujet du sélecteur n'a pas d'attribut X, il est retourné une chaîne vide. La sensibilité à la casse du nom des attributs dépend du langage du document. Remarque : En CSS2, il n'est pas possible de se référer aux valeurs d'attribut d'autres éléments du sélecteur.
quote(2) Cette propriété spécifie des guillemets, quel que soit le nombre de citations imbriquées.

Exemple

quotes: "«" "»" "<" ">" "°" "°"

La première paire (celle la plus à gauche) correspond au niveau de citation le plus extérieur, la deuxième paire, le premier niveau d'imbrication, etc. Le navigateur applique la paire de guillemets appropriée en fonction du niveau d'imbrication.
Si la profondeur est supérieure au nombre de paires, la dernière paire est réutilisée.
Une valeur de 'close-quote' qui rendrait la profondeur négative est incorrecte et ignorée : la profondeur reste à 0 et aucun guillemet n'est rendu (bien que le reste de la valeur de la propriété 'content' soit quand même inséré).
open-quote
close-quote		 open-quote et close-quote
Ces mot clé sont remplacées par les chaînes appropriées, celles-ci étant indiquées par la propriété 'quotes' et cela en fonction du niveau d'imbrication.
no-open-quote
no-close-quote		 Rien n'est inséré (sinon la chaîne vide), mais le niveau d'imbrication des citations est incrémenté (ou décrémenté).
inherit Hérite des attributs de son parent.

(1)Compteurs et numérotage automatiques

Le numérotage automatique est régi par deux propriétés, 'counter-increment' et 'counter-reset'. Les compteurs définis par celles-ci sont employés par les fonctions counter() et counters() de la propriété 'content'. Ces propriétés sont utilisées pour structurer des entêtes de chapitres, sous chapitres, sections, affecter des numérotations automatiques sur des titres ou des listes.

Un élément qui n'est pas affiché (sa propriété 'display' ayant la valeur 'none'), ne peut ni incrémenter un compteur ni le remettre à zéro.
Dans cet exemple suivant, les éléments h2 ayant une classe "secret" n'incrémente pas 'count2'
h2.secret {counter-increment: count2; display: none}

Par contre, les éléments dont la valeur de la propriété 'visibility' est 'hidden', incrémentent les compteurs.

counter(NomCompteur,list-style-type)

Cet attribut associé à la propriété content permet d'afficher la valeur du compteur dont le nom est précisé en paramètre. La valeur est affichée suivant le style défini par le paramètre list-style-type (le même déjà vu dans le cadre des listes) pouvant prendre les valeurs suivantes:

liste décimale (par défaut)

  • decimal : Chiffres arabes, 1, 2, 3.
  • decimal-leading-zero: 01, 02, 03.

liste alphabétique

  • lower-roman : Chiffres romain en minuscules, i, ii, ii.
  • upper-roman : chiffres romain en capitales, I, II, III.
  • lower-alpha : lettres en minuscules, a, aa, aaa.
  • upper-alpha : lettres en capitales, A, AA, AAA.
  • lower-greek : alpha grec en minuscule έ, ή, ί.

liste à puce

  • disc : gros point plain.
  • circle : gros point creux.
  • square : petit carré.

none : aucun style.

Note : Si le paramètre list-style-type est omis l'affichage sera de type décimal.

Exemple de syntaxe : h1:before{countent:counter(section,upper-roman)} pour afficher en style upper-roman (I, II, III) le compteur section.

counters(NomCompteur, Séparateur, list-style-type)

Cet attribut associé à la propriété content permet d'afficher une chaîne composée des valeurs de tous les compteurs de même nom, celles-ci séparées par une chaîne donnée. Les compteurs sont "auto-imbriquants", dans le sens ou la réutilisation d'un compteur dans un élément enfant crée automatiquement une nouvelle instance de celui-ci. Ceci est particulièrement adapté dans les cas de listes numérotés imbriquées dont un exemple est donné ci-dessous dans l'exemple3.

Exemple de syntaxe : li:before{content: counters(NomCompteur, ".",upper-alpha) }

Illustration du mécanisme avec une liste ordonnée


counter-increment:NomCompteur Incrément

Cet attribut accepte un ou plusieurs noms de compteurs (des identificateurs), chacun d'eux étant suivi d'un entier optionnel. Cet entier indique la valeur de l'incrémentation du compteur à chaque fois que survient l'élément. L'incrémentation par défaut est d'une unité. Les entiers nuls ou négatifs sont admis.

Exemple de syntaxe : h2:before{counter-increment: section 2} pour incrémenter le compteur section de 2

counter-reset:NomCompteur valeurInit

Cette propriété contient une liste de noms de compteurs, un ou plusieurs, chacun d'eux étant suivi d'un entier optionnel. Cet entier indique la valeur que prend un compteur à chaque fois que survient l'élément. Par défaut, celui-ci a une valeur égale à 0.

Exemples de syntaxe :

"counter-reset: section 10" pour initialiser le compteur section à10.

"counter-reset: chapitre 5 section 10" pour initialiser le compteur chapitre à 5 et  le compteur section à 10.

Exemples

Numérotation automatique de chapitres, sous chapitres, sections (résultat sur un navigateur conforme aux standards).

Remarque sur le code de l'exemple

Bien penser à faire un reset du compteur au niveau du  body si l'on désire obtenir une indexation correcte.

Numérotation simple automatique de listes (résultat sur un navigateur conforme aux standards).

Les listes en HTML, possèdent des éléments pouvant être imbriqués dans eux-mêmes à des profondeurs arbitraires. Si l'on appliquait la méthode de numérotation des chapitres/souschapitres/section telle que décrite ci-dessus il serait impossible de définir des noms de compteurs uniques pour chaque niveau d'imbrication.

Heureusement les compteurs sont "auto-imbriquants", dans le sens ou la réutilisation d'un compteur dans un élément enfant crée automatiquement une nouvelle instance de celui-ci.


Numérotation imbriquée automatique de listes (résultat sur un navigateur conforme aux standards).

La fonction 'counters()' génère une chaîne composée des valeurs de tous les compteurs de même nom, celles-ci séparées par une chaîne donnée.

(2)Marques de citation

En CSS2, les concepteurs de pages HTML peuvent demander au navigateur de représenter les marques de citation, en fonction du style et du contexte. La propriété 'quotes' spécifie des paires de guillemets pour chaque niveau d'imbrication des citations. C'est la propriété 'content' qui permet la mise en œuvre de ces marques, en les insérant avant ou après les citations.


Exemple de syntaxe : quotes: "«" "»" "<" ">" "°" "°"

ou encore avec des codes ISO hexadécimaux

quotes: "\00AB" "\00BB" "\2039" "\203A" "\2018" "\2019"

Caractères Code hexadécimal Commentaires
" 0022 Double guillemet
' 0027 Guillemet simple
< 2039 Chevron simple gauche
> 203A Chevron simple droit
« 00AB Chevron double gauche
» 00BB Chevron double droit
‘ 2018 Apostrophe ouvrante
’ 2019 Apostrophe fermante
“ 201C Guillemets anglais double gauche
” 201D Guillemets anglais double droit
„ 201E Guillemets double bas

Insérer des guillemets avec la propriété 'content'

Les valeurs 'open-quote' et 'close-quote' de la propriété 'content' insèrent les guillemets aux endroits appropriés du document. L'une des chaînes issues des valeurs de la propriété 'quotes' se substituent à chaque survenue de 'open-quote', ou ' close-quote', selon le niveau d'imbrication.

La valeur 'open-quote' se rapporte au premier guillemet d'une paire donnée, celle de 'close-quote' au second guillemet. L'utilisation de telle ou telle paire de guillemet dépend de la profondeur d'imbrication de la citation. Pour une profondeur égale à 0, la première paire est retenue, pour une profondeur de 1, c'est la deuxième paire, etc. Si la profondeur est supérieure au nombre de paires, la dernière paire est réutilisée. Une valeur de 'close-quote' qui rendrait la profondeur négative est incorrecte et ignorée : la profondeur reste à 0 et aucun guillemet n'est rendu (bien que le reste de la valeur de la propriété 'content' soit quand même inséré).

La profondeur de citation est indépendante de l'imbrication du document source ou de la structure de mise en forme.

no-close-quote' décrémente le niveau de citation, sans pour autant faire apparaître de guillemet fermant. De façon symétrique,  'no-open-quote', ne fait pas apparaître de guillemet ouvrant, et incrémente la profondeur de citation d'une unité.

Exemple de citations sur deux niveaux (résultat sur un navigateur conforme aux standards).


(3)La fonction attr(X)

Tout élément HTML possède ses propres attributs. En voici deux exemples pour fixer les idées:

<a href ="toto" title="Clicquez ici">MonLien</a> : la balise de lien <a> possède l' attribut href qui défini le lien, et l'attribut title qui définie l'information lors du survol de ce lien. MonLien n'est pas un attribut mais le texte qui s'affiche à l'écran pour le lien défini par l'attribut href.

<img src="MonImage" width="50" height="50" alt="Bonjour /> : la balise img possède l'attribut src qui défini l'emplacement de l'image, les attributs dimensionnels width et height, ainsi que l'attribut alt qui défini le texte de remplacement si l'image ne peut être chargée.

La fonction attr(x) permet de récupérer la valeur d'un des attributs d'un élément.

Cela peut servir par exemple dans les situations suivantes : lors de l'impression de pages Web, beaucoup de caractéristiques disparaissent et en particulier les attributs href qui définissent les liens. Lorsque l'on visualise la page Web à l'écran ce n'est gênant puisque il suffit de cliquer sur le nom donnée au lien pour accéder à un nouveau contenu, mais lors de l'impression on connaît bien le nom donné au lien mais on ne sait pas ou l'on va. Il serait donc très intéressant de pouvoir rajouter cette information. Avec la fonction attr(x) associée à la propriété content et aux pseudo éléments il va être possible de rendre visible sur le papier l'attribut href qui contient la cible du lien.

Exemple de récupération href d'une balise de lien (résultats sur un navigateur conforme aux standards).

Ce lien pointe vers l'adresse : toto) Lien1
Ce lien pointe vers l'adresse : titi) Lien2
Ce lien pointe vers l'adresse : tata) Lien3


Application au projet de site web

L'exercice consiste à insérer automatiquement une image représentant une petite flèche sur chaque élément de la liste de choix de la page d'accueil.

Pour cela on utilisera la  propriété de feuille de style css "content" (associé au pseudo-élément before) avec URL comme attribut pointant sur l'image Flèche.gif du répertoire Images/Site. Cette feuille de style sera incluse dans le fichier commun CSSExterneScreen.css pour la balise HTML dd (éléments de la liste).

Cet effet risque de ne pas s'afficher avec IE.

Retrouvez la solution


Respectons la propriété intellectuelle