Bon, d’accord, le titre est naze même s’il est à la fois incitatif et incitatif.

Une mauvaise expérience pour tout le monde

Sur un article intitulé d’humeur sarcastique je citais un autre blogue, Dying Culture. J’ai naturellement respecté la sémantique : enveloppement du texte par un blockquote et renseignement de l’attribut cite, attribut signalant la provenance de la citation.

Seulement voilà, ce n’est pas du tout gêré par les navigateurs. Ça devrait, mais ça ne l’est pas.

Je n’ai jamais eu à créer de site commercial, avec cahier des charges et supérieur qui croit s’y connaître mieux que vous ou bien veut absolument que ça passe sur IE, validité ou pas. Étant fainéant de nature, je colle aux standards, point. Et j’oublie que la différence entre la théorie et la pratique, c’est qu’en théorie, il n’y a pas de différence entre la théorie et la pratique.

En l’occurrence (et en pratique), j’ai donc l’air de recopier le travail d’autrui sans lui donner de crédit. Que la sémantique soit correcte n’y change rien : à quoi sert un truc que personne n’utilise ? À être là quand les autres se rendront compte que ça existe, rétorqueré-je. Mouaih, maigre consolation pour la personne qui se sent lésée.

Je n’aime pas les hacks, ces petits morceaux de code conçus pour berner un navigateur et lui faire avaler quelque chose qu’il devrait comprendre, mais ne comprend pas. Mais j’aime encore moins avoir à revenir sur d’anciens fichiers pour les modifier. Dans le cas de la citation problématique (c’était un article nommé « Qui sème le vent récolte la tempête »), il eut été très simple d’ajouter une phrase du genre :

Le premier texte nous vient de chez Dying Culture

Qu’est-ce que cela aurait rajouté comme information ? Absolument rien ; la référence étant déjà présente dans le blockquote cite, c’eût été une pure redite. Je ne l’ai donc pas fait.

Le webmestre m’a envoyé un commentaire (il faudrait à ce propos que je modifie le template de mon blog pour ajouter un lien contact) me signalant qu’il n’apprécie pas mon repompage éhonté — même si repompage éhonté il n’y a pas, confère le début de l’article.

Que faire ?

Cette situation n’étant agréable pour personne, je me suis mis à réfléchir à une solution.

Pseudo-classe

J’ai d’abord envisagé de la génération de contenu grâce à une pseudo-classe :after (à la manière de la notification de langue pour les hreflang, si populaire dans DotClear), une méthode déjà décrite il y a deux ans.

Voici ce que ça donne :

blockquote[cite]:after { content: "Source : " attr(cite); display:block }

Code inspiré par Holovaty

Mais ce n’est qu’une demi-solution, le contenu autogénéré ne pouvant être un hyperlien ni même être copié (pour par exemple se rendre sur la page). D’un point de vue sémantique, l’intérêt est proche du zéro (sauf pour une CSS d’impression).

JavaScript

Une autre possibilité est de faire appel à JavaScript. ParanoidFish explique comment faire, source à l’appui (vous trouvez un autre exemple chez Pip the Pixie). Pour ma part, on m’a appris à fuir le JavaScript alors je n’y connaîs rien. Mais il est vrai que les deux exemples ne sont pas mal du tout (essayez en activant et désactivant JavaScript).

Extensions propriétaires

J’en ai alors parlé sur Pompeurs où, comme à l’accoutumée, les réponses intéressantes ne furent pas rares :

• Un article de Laurent Denis
• Une doléance pour KDE (bogue n° 89386, merci Franck d’avoir été si réactif)
• Triturations du DOM via JavaScript [Lien 1] [Lien 2]

Pour résumer : il n’existe aucune solution élégante à l’heure actuelle. Il est en revanche possible de passer par les extensions propriétaires d’Opera et de Mozilla (méthodes inconnues pour Internet Explorer et KHTML). C’est moins pire qu’une inscription en dur (puisqu’il y aura juste besoin de modifier la CSS et non tous les documents) mais reste loin d’être parfait : extensions propriétaires et multiples (une par navigateur).

Pour Opera, c’est encore assez simple :

q[cite], blockquote[cite] { -o-link: attr(cite); -o-link-source: current; cursor: pointer }

C’est en revanche plus complexe pour Mozilla qui nécessite de créer un fichier spécial. Voir l’article de Laurent Denis pour les détails).

Finalement, en attendant que les navigateurs soient mis à jour, je me rabat sur la solution qui demande le moins d’effort maintenant et surtout plus tard, celle du contenu auto-généré. Mon style permet d’avoir l’URL plus le titre et signale que la source n’est pas cliquable.

[cite]blockquote:after { border-top: 1px solid #669; color:#669; content: "Source : " attr(cite)"\0000a0–0000a0(non-cliquable)" display:block; font-size:.8em; font-weight:700 }

A plus mal, maintenant.

Je viens de me rendre compte que j’avais fait un billet à ce sujet il y a un an. C’est bien la peine d’écrire si c’est pour ne pas s’en souvenir…

N’ayant pas de système à la Viabloga, je ne me rends compte que manuellement que j’avais déjà blogué sur le sujet.

blockquote[cite]:after	{content:attr(cite)} blockquote[title]:after	{content:attr(title)} blockquote[cite][title]:after	{content:attr(title)"\a0-\a0"attr(cite)}

On récapitule !

Bon, voici le code qui vous permet d’afficher une citation d’élégante manière avec sa source (hypertexte et/ou littérale) et pour Opera, de pouvoir suivre directement le lien sans avoir à le rentrer dans la barre d’adresses.

blockquote { background-color:#eee; padding-left:.7em; padding-right:.5em; border-left:#bbb 4px solid } blockquote[cite] { -o-link:attr(cite); -o-link-source:current } blockquote[cite]:after, blockquote[title]:after, blockquote[cite][title]:after {border-top:1px solid #669; padding:.5em; col
or:#669; font-size:.8em; display:block; font-weight:bolder } blockquote[cite]:after {content:attr(cite)} blockquote[title]:after {font-weight:bolder} blockquote[cite][title]:after {content:attr(title)"\a0-\a0"attr(cite)}

L’excellent selfhtml.org montre comment faire avec un bloc de texte ce que l’on fait avec un tableau : ajouter une méta-information qui semble aller de soit, en l’occurrence la source.

C’est tout simple, mais comme cite est généralement utilisé comme élément, je ne pensais pas qu’il pouvait aussi être utilisé comme attribut…

<blockquote>cite="URL">Texte>/blockquote<

Malheureusement, ni Safari (1.1) ni Mozilla (1.5) n’affiche l’URL de reférence.

De même, j’ai trouvé un attribut pour les éléments ins et del :

<ins datetime="yyyy-MM-ddThh:mm:ss+hh:mm">texte inséré</ins>

<del datetime="yyyy-MM-ddThh:mm:ss+hh:mm">texte effacé</del>

Là encore, ce n’est pas affiché par Daktari ou le Mozillosaure