Ordre d'écriture des règles de style pour les liens
Certains d'entre vous, s'ils "tombent" sur cet exposé, croiront sans doute à une blague ... et pourtant, il n'en est rien ! En effet, il n'est pas rare de lire des questions à ce propos dans les salons de discussion du Web (les mal nommés "news groups" par les adeptes de franglais). Elle font alors suite à un titre de message en forme d'appel au secours : "Mes liens ne répondent pas à ma feuille de styles : les couleurs ne changent pas !".
J'ai donc "pondu" cette petite page à leur intention.
Les variations de couleur, de fond, de taille et/ou de police des liens sont nombreuses et il est assez tentant d'en exploiter toutes les possibilités. Il ne faut toutefois pas, comme dans beaucoup d'autres domaines, abuser de telles fantaisies car elles risquent bien souvent de lasser.
Dans cet exposé, point besoin d'explications ou de démonstration spectaculaire comme vous en trouverez dans d'autres pages : deux exemples très simples suffiront pour comprendre l'origine de vos migraines (si tant est que vous ayiez été soumis aux affres de nuits blanches provoquées par ce douloureux (?!?) problème ...). Voyez plutôt :
Dans la 1ère série de règles, le comportement est normal : essayez ces 2 liens :
a.test1:link {color:red;background:yellow;font-size:16px;text-decoration:none}a.test1:visited {color:blue;background:lime;font-size:16px;text-decoration:line-through}
a.test1:hover {color:black;background:lightblue;font-size:16px;text-decoration:underline;padding:7px}
a.test1:active {color:lime;background:white;font-size:16px;text-decoration:underline overline}
Dans la 2ème série, l'ordre d'écriture non respecté provoquera un résultat inattendu :
a.test2:link {color:red;background:yellow;font-size:16px;text-decoration:none}a.test2:hover {color:black;background:lightble;font-size:16px;text-decoration:underline;padding:7px}
a.test2:active {color:lime;background:white;font-size:16px;text-decoration:underline overline}
a.test2:visited {color:blue;background:lime;font-size:16px;text-decoration:line-through}
... en vous rappelant toutefois qu'il est naturellement possible de créer des séries de règles pour des affichages de liens d'aspect différent. Il suffit pour cela d'ajouter une classe au sélecteur de base, comme ceci par exemple :
et
a.lien2:link puis a.lien2:visited, etc.
Cette technique a été utilisée ci-dessus pour donner un comportement différent aux deux exemples.
Il demeure un petit problème : l'éternelle interprétation différente de certains règles de styles par les navigateurs. Ici, le navigateur de Micro$oft réagit exactement comme on peut s'y attendre. Mozilla, quant à lui (du moins sur les versions 0.94 jusqu'à 1.0) refuse de réagir aux liens fictifs en "mémorisant" l'action et ne modifie pas l'aspect des liens lors de l'activation de ceux-ci ... : l'ordre d'écriture ne l'émeut aucunement ! Mais, comme le premier est utilisé par la majorité des adeptes du W.W.W., il est évidemment préférable de prendre une bonne habitude ...
Il n'y a rien d'autre à ajouter si ce n'est que, comme dans toute activité humaine, qu'elle soit technique ou non, l'organisation et l'ordre sont toujours importants ... ! Ne l'oubliez jamais !
