Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

Générer du contenu à l'aide des CSS

Générer l'affichage d'une image ou d'un caractère

Je désire, pour indiquer une astuce, qu'une petite image d'ampoule soit présente devant la mention "Astuce" pour la mettre plus en valeur.
De façon classique, ceci pourrait donner cela :

source html

<p style="color:red; font-weight:bold">
 <img src="images/lightmov.gif" style="width:20px;height:27px" alt="" /> Astuce !
</p>

Mais comme je donne beaucoup d'astuces (sic !), je trouve cette opération répétitive un peu pénible, sans compter que cela alourdit le poids de la page.
C'est là que les CSS prennent le relais.

Pour automatiser l'inclusion de l'image et, soyons fainéant jusqu'au bout, le point d'exclamation, j'inscris donc cela dans ma feuille de style :

Code CSS

.astuce {
 color:red;
 font-weight:bold;
 background-color:transparent;
 }
.astuce:before {
 content:url(images/light_bulb__exclamation.png)
 }
.astuce:after {
 content:" ! "
 }

Notez bien que les caractères à faire apparaître (ici le point d'exclamation), doivent être entre guillemets.

Code html

<p class="astuce"> Astuce</p>

Évidemment, si vous regardez ceci avec une ancienne version d'IE, vous ne voyez ni l'ampoule ni le point d'exclamation. Idem si vous utilisez un lecteur d'écran. Est-ce grave Docteur ? Non : voir ou ne pas voir l'ampoule ne soustrait absolument rien à l'information. C'est juste de la déco.

Générer les informations des attributs

Exemple d'application à l'attribut hreflang

On peut aussi trouver intéressant de générer le contenu de certains attributs mentionnés dans des balises. Une pratique courante, par exemple, est d'indiquer la langue de la page vers laquelle pointe un lien et qui est indiqué par l'attribut hreflang.

Code (x)html

<a href="http://www.w3.org" hreflang="en">Site du W3C</a>

La mention "en" de l'attribut hreflang indique que la langue utilisée sur le site du W3C est l'anglais. Après (:after) le lien, l'attribut content peut permettre d'afficher cette information.

Code CSS

a[hreflang]:after {
 content: " (" attr(hreflang) ") "; 
 }

Attention

Ne pas spécifier a[hreflang] générera les parenthèses vides derrière tous les liens, même ceux qui ne comportent pas l'attribut hreflang. Il est donc plus prudent de l'indiquer.

Exemple d'application à une feuille de style d'impression

Cette même méthode peut être utilisée dans une feuille de style d'impression pour faire imprimer l'url complète, ce qui peut être pratique pour l'utilisateur qui n'aura pas à recopier à la main les adresses des sites liés. Dans ce cas, on indiquera dans la feuille de style (appelée print.css par exemple et déclarée ainsi <link rel="stylesheet" type="text/css" media="print" href="print.css" />) :

Code CSS

a:after {
 content: " (" attr(href) ") ";
 }

Astuce

On peut cumuler les indications à afficher. Ainsi, si on veut qu'à l'impression il y ait aussi l'indication de langue comme dans le précédent exemple (entre crochets et séparées d'un tiret), on indique :

a:after {
 content: " [" attr(href) " - " attr(hreflang) "] ";
 }

Résultat attendu 

Haut