Notes

CSS 3 et liens externes

Date
cats
tags

La présentation du site est actuellement gérée par des feuilles de styles en cascade de niveau 3. Cette troisième version des CSS en est encore au stade d'ébauche et à l'heure actuelle, seule les recommendations css 2 ont fait l'objet d'une publication officielle (une version révisée 2.1 devrait être diffusée dans peu de temps).

Les propriétés css 3 sont principalement utilisées pour identifier les liens menant vers des documents extérieurs au site par une petite icône. Il s'agit d'une méthode parmi d'autres (voir les liens ci-dessous), et qui tient compte du fait que j'affiche aussi la langue de certains liens. Le code est le suivant :

a[href^='http://']():after {
  padding-right: 8px;
  content: "\0000a0";
  background: url(lien_ext.png) no-repeat 98% 50%;
}

Dans ce code CSS, c'est l'utilisation du sélecteur ^ qui appartient à la troisième version des feuilles de styles. Dans ce contexte, il permet d'identifier tous les liens dont l'adresse commence par http://. Comme les liens internes (menant vers d'autres pages du site) sont des liens relatifs, il identifie donc tous les liens externes (lire la recommendation candidate CSS 3 Selectors).

A ma connaissance, seuls les navigateurs Mozilla et Firefox comprennent ce code. Internet Explorer ne comprend même pas la pseudo-classe after (placer un contenu après l'élément désigné) qui est pourtant une spécification CSS 2. On pourrait cependant obtenir le même résultat visible par tout les navigateurs en définissant une classe particulière à associer aux liens, .ext par exemple:

a.ext {
  padding-right: 8px;
  background: url(lien_ext.png) no-repeat 98% 50%;
}

D'un point de vue sémantique, il ne serait pas illogique de différencier par une classe les liens externes des liens internes, tout comme il serait plus correct de spécifier la langue pour tous les liens (hreflang) et pas uniquement pour les liens non français. Donc, pourquoi choisir une spécification encore au stade expérimental (css 3) alors qu'une solution css 2 existe ? Pour plusieurs raisons :

  • Simplifier le code autant que faire ce peu. Si une technique - aussi experimentale soit-elle - est disponible, autant l'utiliser.
  • Parce ce site est aussi un lieu de tests et d'essais (d'un amateur s'entend).

Pour en savoir plus sur la personnalisation des liens :