J'ai juste ajouté une petite touche à la feuille de style de ce blog (dont j'ai déjà longuement parlé en anglais) : une petite icône pour signaler les liens vers Wikipédia.

J'ai récupéré l'icône du site en ligne de commande avec Wget :

$ wget -O wikipedia.ico http://fr.wikipedia.org/favicon.ico
--19:23:35--  http://fr.wikipedia.org/favicon.ico
           => `wikipedia.ico'
Résolution de fr.wikipedia.org... 145.97.39.155
Connexion vers fr.wikipedia.org|145.97.39.155|:80... connecté.
requête HTTP transmise, en attente de la réponse... 200 OK
Longueur: 318 [image/x-icon]

100%[====================================>] 318           --.--K/s             

19:23:35 (30.79 MB/s) - « wikipedia.ico » sauvegardé [318/318]

Je l'ai ensuite convertie à la taille 14x14 au format GIF avec l'outil convert d'ImageMagick :

$ convert wikipedia.ico -resize 14x14 wikipedia.gif

L'image résultante faisait 595 octets. L'utilisation de l'application en ligne Image Optimizer m'a permis de réduire le nombre de couleurs de l'image à 16 et de réduire la taille à 167 octets.

En suivant Megan McDermott, j'ai modifié ma feuille de style pour ajouter la ligne suivante :

Il peut être utile parfois de désactiver ce style localement ou pour les blocs de code :

pre.code a:link, pre.terminal a:link,
.no-link-icon a:link,
a:link.no-icon
{ background: inherit; padding-right: inherit }

Mise à jour 2007-11-05 à 22:25 : mes règles pour les exceptions ne fonctionnent pas ! Je me suis fait avoir par les règles de précédence des règles CSS ! Il va falloir que je corrige cela...

Mise à jour 2007-11-05 à 22:46 : voici, j'espère, la correction. Il faut que j'augmente le poids des règles d'exception en augmentant le nombre d'attributs ou de pseudo-classes dans le sélecteur.

pre.code a:link[href], pre.terminal a:link[href],
.no-link-icon a:link[href],
a:link.no-icon[href]
{ background: inherit; padding-right: inherit }