Rappel : l'attribut cite

cite = uri [CT]

La valeur de cet attribut est l'URI qui désigne le document source ou le message. Cet attribut est destiné à fournir des informations sur l'origine de la citation.

[...]

Ces deux éléments [ndt. q et blockquote] désignent une citation [ndt. quotation]. L'élément BLOCKQUOTE indique une citation longue (avec un contenu de type bloc) et l'élément Q est censé être utilisé pour des citations courtes (avec un contenu de type en-ligne) ne nécessitant pas un saut de paragraphe.

L'attribut cite est utilisé sous la forme :

<q cite="http://example.org/">
    Exemple
</q>

<blockquote cite="http://example.org/">
    <p>Exemple</p>
</blockquote>

Nous avons donc un URI... Reste à permettre au navigateur de l'exploiter.

Note : cet attribut peut être utilisé de manière identique sur les éléments ins et del afin de spécifier l'URI d'un document annexe apportant des informations sur les ajouts et/ou suppressions ainsi balisées. Il pourrait alors faire l'objet d'un traitement identique à celui décrit ici.

Rappel : les extensions CSS

Nous voulons que notre navigateur donne à q et à blockquote un comportement similaire à celui de l'élément a, en nous permettant d'activer le lien vers la source spécifiée. Nous allons spécifier ces comportements grâce à des extensions CSS propres à nos deux navigateurs :

Dans CSS2.1, les identifiants peuvent commencer par '-' (tiret) or '_' (underscore). Les mots-clés et les noms de propriété commençant par -' ou '_' sont réservés pour des extensions propriétaires spécifiques. Celles-ci devraient respecter l'un des formats suivants :

'-' + identifiant du vendeur + '-' + nom significatif
'_' + identifiant du vendeur + '-' + nom significatif

[...]

Au moment où ceci est écrit, les préfixes suivants existent :

préfixe	organisation	notes
mso-	Microsoft Corporation	Créé avant que le Groupe de Travail [CSS2.1] n'ait établi une convention de nommage pour ces extensions.
-moz-	Mozilla Organization
-o-	Opera Software

Note : le validateur CSS du W3C ne reconnait pas actuellement ces extensions... dont le principe ne sera normalisé qu'avec CSS2.1

Implémentation dans Opera

Les extensions CSS d'Opera nous permet l'implémentation la plus immédiate de notre nouveau comportement des citations :

Opera 7 utilise des pseudo-propriétés CSS pour attacher une information aux éléments XML qui ne pourraient être représentés autrement. Trois propriétés étendues ont été implémentées pour permettre aux liens et aux images d'être inclus dans les documents XML [...]

Extensions CSS pour XML

Propriété :	-o-link
Valeurs :	none | attr(<attribute-name>)
Initiale :	none
Héritée :	non
Description :	cette propriété spécifie la valeur de la variable "link" qui peut ensuite être utilisée pour générer un lien grâce à la propriété -o-link-source.
Propriété :	-o-link-source
Valeurs :	none | current | next
Initiale :	none
Héritée :	non
Description :	Cette propriété transforme l'élément en ancre source, et, dans ce cas, déclare quelle valeur de la variable -o-link doit être utilisée : la valeur current ou next. [...]

Il suffit donc d'ajouter à notre CSS :

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

Où :

• q[cite] sélectionne les éléments q dotés d'un attribut cite ;
• -o-link: attr(cite) établit le contenu de l'attribut cite comme source (URL) du lien ;
• -o-link-source: current établit l'élément q comme support du lien ;
• cursor: pointer donne au curseur l'apparence usuelle correspondant au survol d'un hyperlien classique.

Le résultat, utilisable dans les pages de ce site avec Opera 7.x, est :

Note : au détriment d'Opera6.x, nous n'utilisons pas ici les extensions propres à celui-ci (-set-link-source et -use-link-source), non conformes au format défini par CSS2.1 (mais également supportées par Opera7.x pour des raisons de compatibilité).

Implémentation dans Mozilla - Firefox

L'implémentation dans Mozilla est un peu moins transparente que dans Opera, puisqu'elle nécessite le recours à l'extension -moz-binding pour modifier le comportement des éléments q et blockquote à l'aide d'une liaison (binding) XBL.

Les liaisons [Bindings] peuvent être attachées aux éléments soit à l'aide d'une feuille de style (CSS), soit en utilisant le document object model [DOM]. L'élément auquel la liaison est attachée, appelé élément lié, acquiert le nouveau comportement spécifié par la liaison. Les liaisons peuvent contenir des gestionnaires d'événements [...], l'implémentation de nouvelles méthodes et de nouvelles propriétés accessibles depuis l'élément lié, ou d'un contenu anonyme inséré autour de celui-ci.

Nous ajoutons à notre CSS :

q[cite], blockquote[cite] {
 -moz-binding:url(xbl.xml#cite);
}

Où -moz-binding attache aux élément q et blockquote la liaison définie dans le fichier xbl.xml et identifiée par l'id cite.

Le document XBL contient simplement :

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="cite">
    <implementation>
      <constructor><![CDATA[
        this.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:type", "simple");
        this.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:actuate", "onRequest");
        this.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", this.getAttribute('cite'));
        this.title="Le lien vers la source de cette citation est accessible par le menu contextuel (clic droit)";
      ]]></constructor>
    </implementation>
  </binding>
</bindings>

Où :

• bindings est l'élément racine du document XML dont l'attribut xmlns indique qu'il s'agit d'un document en dialecte XBL ;
• bindind déclare la liaison et l'identifie par son id="cite : comme notre document pourrait contenir d'autre liaisons différentes (pour traiter d'autres élements que q et blockquote), c'est cet identifiant unique qui permet de viser cette liaison précise grâce au xbl.xml#cite contenu dans la CSS ci-dessus ;
• implementation et constructor permettent de décrire le jeu de méthodes DOM qui seront appliquées à nos q et blockquote ;
• Ces méthodes exploitent simplement this.setAttributeNS qui crée les nouveaux attributs de q ou blockquote, dans l'espace de nom XLink (dialecte XML permettant de créer des liens). On définit ainsi un lien de type simple, activable à la suite d'un clic de la souris (onRequest), et ayant pour cible (href) l'URI donnée par l'attribut cite.

Le résultat, utilisable dans Mozilla et FireFox pour ce site, est :

Note : cette implémentation dans Mozilla-FireFox est naturellement dépendante de l'activation du javascript dans les options du navigateur...

Conclusion

Voilà qui permet d'attendre le futur et éventuel XHTML2.0 et son attribut href qui nous autoriseront un beaucoup plus direct mais redondant :

<quote
   cite="http://example.org/"
   href="http://example.org/">
      Exemple
</quote>

Certes, par souci d'accessibilité, il reste indispensable de faire figurer dans le document un lien en bonne et due forme vers la source des diverses citations. Mais ce petit exemple de traitement via CSS et XML donne les bases pour une exploitation plus avancée de cet attribut, par exemple via XSLT afin de constituer un index des sources citées ici...