Une icône pour les liens vers Wikipédia
Par Olivier Mengué le samedi 3 novembre 2007, 19:31 - Code - Lien permanent
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 }
Commentaires
Excellente idée !
Il y a un truc qui me chiffonne dans ton affaire, c'est que tu affiches l'icone de Wikipedia [english] et renvoie sur son homologue française. C'est trompeur...
Je ne comprends pas. Les icônes de Wikipédia sont les mêmes pour la version française et la version anglaise, non ?
Non, dans ma barre Google, les pictogrammes sont différents. Le français n'est pas un W mais ressemble au puzzle sphérique.
La distinction peut être intéressante à faire. Bon je ne disais pas ça pour t'embêter ! Bravo en tout cas.
Pas mal! Sauf la fin où j'ai pas tout compris, mais je dois pas être le seul.
Le seul truc criticable (quand on est maniaque) avec l'astuce de Megan c'est que quand on fait tab-tab-tab jusqu'au lien, l'icône n'est pas dans le cadre en pointillé. Ah non, c'est que sous IE, pas grave.