Exploitation d'un contenu HTML existant

Dans ce premier cas de figure, nous ne génèrerons aucun contenu à proprement parler. Il s'agit simplement d'utiliser les sélecteurs :before ou :after et la propriété content pour rendre visible un contenu HTML existant mais non rendu visuellement par le navigateur graphique.

Le cas type est celui des nombreux attributs peu ou pas exploités par nos navigateurs actuels :

• hreflang indiquant la langue primaire du document cible d'un lien a ;
• rel et rev indiquant la relation entre la source et le document cible d'un lien a ;
• cite indiquant l'URI de la source d'une citation blockquote ou q ;
• datetime indiquant la date d'une modification du contenu balisé à l'aide de ins ou de del ;
• cite indiquant l'URI d'un document justifiant une modification du contenu balisé à l'aide de ins ou de del ;
• alt véhiculant le descriptif abrégé d'une image img, qui peut être utilisé comme légende de celle-ci ;
• longdesc véhiculant l'URI du descriptif détaillé d'une image img ;
• id qui permet de créer un lien direct vers la section correspondante du contenu (div ou titre hn concerné) ;

Dans plusieurs des cas ci-dessus, nous avons affaire à une URL qu'il est alors possible de transformer en pseudo-lien cliquable (par le biais du menu contextuel).

Dans le même ordre d'idée, content, :before et :after permettent également d'enrichir le rendu du document lorsqu'il est imprimé, en y faisant figurer le contenu d'attributs habituellement ignoré dans le media print :

• En imprimant l'URL des hyperliens à la suite de leur intitulé (attribut href) ;
• En imprimant la signification des sigles (abbr et acronym) à la suite de leur intitulé, ou plus élégamment en affichant la signification du sigle suivie de celui-ci entre-parenthèses, ce qui est plus conforme aux usages de l'écrit (attribut title) ;
• En imprimant... tout ce qui dans la liste précédente est jugé utile.

Nous pouvons encore jouer de même sur le media et ces sélecteurs pour enrichir le rendu oral du document dans un navigateur vocal comme Opera 7.60, ou faire de même dans le media projection.

Dans la catégorie "extrême", nous pouvons exploiter ces sélecteurs et la propriété content pour rendre visible les informations habituellement masquées dans le head du document : title et liens relatifs, mais aussi style et liens vers les feuilles de style, meta et autres link rel="alternate" indiquant par exemple l'URL des fils RSS. On peut ainsi créer une feuille de style alternative amusante, ou simuler les affichages d'un navigateur texte. Plus sérieusement, une feuille de style utilisateur de ce type est un outil de test et de débogage précieux sous Opera.

Dans chacun de ces cas, rien n'est ajouté au document brut, et nous ne faisons que suppléer aux limitations ou aux carences des outils de navigation actuels qui n'exploitent qu'une faible part du contenu HTML. Nous ne rendons donc aucune infomation-clé dépendante du fonctionnement de notre astuce CSS, et notre document n'y perd ni en accessibilité ni en interopérabilité.

Notons cependant une fausse bonne idée classique dans ce domaine : générer à l'aide d'un content et d'un :after l'affichage de l'accesskey d'un lien : cette information sera absente dans les navigateurs textes et dans de nombreuses configurations de lecteurs d'écran... alors qu'elle est justement destinée en particulier à leur utilisateurs ;

Une autre idée discutable consisterait à remplacer la date explicite d'un document par le rendu CSS de l'attribut datetime d'un ins englobant le contenu (voir le code source de la page d'accueil de ce site). Il serait certes apparemment élégant d'utiliser ainsi le seul élément HTML capable de véhiculer explicitement une information de date, en remplaçant dans un blog par exemple :

<div class="post">
   <p class="date">2004-10-24</p>
   ...
</div>

...Par :

<ins datetime="2004-10-24">
...
</ins>

ins:before {
display: block;
content: attr(datetime);
}

Mais là encore, nous conditionnerions l'accès à l'information au support de cet aspect de la technologie CSS. Il convient donc d'être prudent : CSS n'est pas un moyen fiable pour suppléer réellement aux carences des navigateurs dans l'exploitation du HTML.

Notons pour conclure cette partie que le champ d'application de CSS n'est pas limité au HTML, et que cette combinaison :after, :before et content permet tout aussi bien d'autoriser l'affichage graphique (et anecdotique) de documents XML du type RSS, ou FOAF.

Génération d'éléments de présentation

L'utilisation la plus neutre de ces outils consiste en fait à insérer des motifs graphiques dans la présentation du document :

• Images de bordures plus élaborées que celles qu'autorisent actuellement les bordures CSS ;
• Images décoratives diverses ;
• Textes non nécessaire à la compréhension du contenu, mais facilitant celle-ci, comme c'est le cas dans ce site pour la mention Vous êtes dans qui améliore le rôle de "fil d'Ariane" donné au titre h1 :

  <h1>
    <a href="/" title="..." accesskey="1">Blog & Blues</a>
    <span>
        > 
        <a href="..." title="...">Novembre 2004</a>
        –
        <a href="..." title="...">Thème : <abbr>(X)HTML</abbr> - <abbr>CSS</abbr></a>
     </span>
  </h1>
  
  h1 span:before {
  content: "Vous êtes dans "
  }

Cette fois, une partie du rendu visuel sera bien conditionné à l'implémentation des sélecteurs :before ou :after et la propriété content, mais ceci ne concerne aucune information nécessaire à l'accès au contenu. Nous sommes entièrement dans le domaine de la présentation CSS.

Génération de contenu ex-nihilo

La facilité d'utilisation de la propriété content et l'apparente économie de gestion de contenu ainsi réalisée peuvent cependant conduire à un abus aussi dommageable pour le sens que pour l'accessibilité : retirer un contenu HTML pour en faire un contenu généré CSS, autrement dit, utiliser CSS pour ajouter au document une information nécessaire à sa compréhension ou son utilisation. Ceci concerne en particulier :

• La génération d'un texte informatif répété de page en page, type copyright, mention légale ou autre ;
• La génération d'une image qui ne relève pas de la décoration, mais qui véhicule un sens dont la perception est nécessaire pour la compréhension du contenu (génération de pseudo-listes à puces, voire logo d'une entreprise par exemple) ;
• Et tout autre information logiquement incluse dans le document HTML.

Si CSS offre effectivement les moyens de générer du contenu, il serait plus exact et plus prudent de parler de pseudo-contenu, en réalité absent du document, et donc inexistant pour une large partie des utilisateurs, et pour la quasi-totalité des "machines" d'indexation, de traduction, etc.