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 :
a[href^="http://fr.wikipedia.org/"], a[href^="http://en.wikipedia.org/"] { background:url(wikipedia.gif) 100% no-repeat; padding-right: 16px }
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 }