Retrouvez cet article dans : Linux Pratique 40
Les pseudo-formats de texte permettent d'appliquer un style particulier à une portion de texte bien délimitée. Les pseudo-formats :before et :after ont la particularité de générer du contenu avant ou après le contenu d'un élément. Classiquement, ils sont utilisés pour afficher du texte sous certaines conditions, mais on peut également les utiliser dans bien d'autres cas.
Remarque importante :
Rappelons ici que les pseudo-formats :before et :after, implémentations de CSS2, ne sont à ce jour pas interprétés par le navigateur Internet Explorer.
Générer du contenu
L'insertion de contenu s'effectue grâce à la propriété
content. Le texte statique à insérer doit être placé entre guillemets, comme suit :
HTMLÂ :
|
|
<body>
<h1>Les pseudo-formats :before et :after</h1>
<p>...</p>
</body> |
CSSÂ :
|
|
h1:before {
content: "coucou!";
} |
Observez le résultat sur la figure 1.
Il peut être par exemple pratique de générer de cette façon un pied de page présent sur tout le site, ce qui éviterait de le redéfinir à chaque page :
|
|
body:after {
content: "mon pied de page";
} |
Veillez cependant à ne pas utiliser cette méthode pour des informations importantes (comme des mentions de copyright, vos coordonnées, etc.).
Exploiter du contenu existant
Nous allons découvrir ici que les pseudo-formats
:before et
:after peuvent également servir à l'affichage d'un élément HTML existant, mais non affiché par le navigateur web graphique utilisé. Il s'agit en général de profiter simplement des nombreux attributs qui ne sont pas exploités par les navigateurs actuels. Par exemple :
- hreflang, qui indique la langue du document cible d'un lien ;
- cite, qui indique l'URL de la source d'une citation ;
- datetime, qui indique la date d'une modification du contenu balisé à l'aide de ins ou de del ;
- alt, qui correspond au texte descriptif d'une image.
Il est bien évident que l'attribut mentionné entre les parenthèses doit être au préalable renseigné par vos soins dans le code HTML :
|
|
<p>...Phasellus vel nibh at diam laoreet interdum. Nulla porttitor erat a dui. <ins datetime="14/11/2006">Vivamus ullamcorper pellentesque tortor</ins> Nullam facilisis, mi sit amet ultricies sodales, urna diam porta enim. Donec a mi...</p>
...
<a href="http://www.linux-pratique.com" hreflang="fr">Le blog de Linux Pratique</a> |
On pourra alors écrire dans la feuille de style :
|
|
ins:after {
color: #FF0000;
content: " (ajouté le " attr(datetime) ") ";
}
a:after {
text-decoration: none;
content: " [" attr(hreflang) "] ";
} |
Et vous observerez à l'écran quelque chose de similaire à la figure 2.
La propriété
content est également très utile lorsqu'il s'agit d'ajouter des informations supplémentaires pour la version imprimable du document. En effet, il vous sera ainsi possible d'imprimer l'URL cible des liens (ce qui correspond à la valeur de l'attribut
href) à la suite de leur intitulé. De même, il est envisageable d'imprimer le développé des abréviations et acronymes à la suite de leurs intitulés. Il faudra donc adapter la CSS destinée au média
print en conséquence.
Par exemple, on pourra écrire dans la feuille de style destinée à l'impression :
|
|
a:after {
content: " (" attr(href) ") ";
} |
Ce qui aura pour effet d'insérer l'URL cible de tous les liens entre parenthèses, à la suite de leur label. Vous pouvez le vérifier en allant dans le menu Fichier -> Aperçu avant impression de votre navigateur (Fig. 3).
Dans ces exemples, on notera que l'on n'ajoute absolument rien au document original. De ce fait, aucune information essentielle n'est perdue pour quiconque utiliserait un navigateur sans feuille de style.
Insertion d'éléments graphiques
On peut utiliser
:before et
:after sans craindre un défaut d'accessibilité en les utilisant à des fins de " décoration ". Les éléments graphiques qui permettent de donner de l'allure à une page Web sont en effet loin d'être fondamentaux à la compréhension du contenu. C'est pourquoi, on peut envisager l'insertion automatique d'éléments graphiques : bordures améliorées, icônes diverses, etc.
Une des applications que l'on peut citer est l'affichage de cadres arrondis (voir Linux Pratique n°39). Ces derniers nécessitent l'utilisation d'images représentant les différents coins arrondis, que l'on inclut directement dans le bloc du cadre. Pour simplifier le code source et n'utiliser qu'une balise
<div> unique, on pourra penser à utiliser
:before et
:after de la façon suivante :
|
|
#cadre:before {
content:url(haut.png);
}
#cadre:after {
content:url(bas.png);
} |
Limites d'utilisation
Attention aux abus ! L'économie de gestion de contenu réalisée grâce à l'emploi de la propriété
content est si séduisante qu'il faut éviter de tomber dans l'excès. Il est ainsi fortement déconseillé d'abuser de la propriété
content en transformant un contenu HTML pour en faire un contenu généré via les CSS. Autrement dit, n'utilisez pas content pour l'affichage d'informations indispensables à la compréhension du document. En un mot,
content ne doit servir qu'à générer du superflu !
Ne perdez jamais de vue que le contenu généré de cette manière n'existera que dans un navigateur graphique sachant interpréter ces pseudo-formats. Pensez toujours à la façon dont votre page Web sera interprétée par un navigateur graphique avec le support de CSS désactivé, par un navigateur texte, lors d'une traduction automatisée de la page ou encore par un moteur de recherche (le contenu généré via CSS n'est pas pris en compte lors de l'indexation).
Retrouvez cet article dans : Linux Pratique 40
