L'effet que nous souhaitons obtenir est d'ajouter une petite icône à tous les liens pointant vers un site autre que ce site pour indiquer aux utilisateurs que cliquer sur ce lien vous fera quitter ce site. Bien sûr, cela peut être réalisé via un JavaScript plus complexe, mais nous pouvons désormais réaliser cette fonction via les sélecteurs d'attributs CSS 3.
a[href^="http:"] {
background:url(images/externalLink.gif) sans répétition en haut à droite ;
remplissage à droite : 10 px ;
}
La signification du code ci-dessus est la suivante : Tous les liens commençant par http : seront ajoutés avec une petite icône en forme de flèche pour rappeler à l'utilisateur qu'il s'agit d'un lien externe, et l'utilisateur quittera le site lorsqu'il cliquera. On peut dire que cette fonction est très conviviale et met en évidence la facilité d’utilisation de la conception Web.
Bien entendu, cela est dû au fait que tous les liens pointant vers ce site utilisent des adresses relatives. Que se passe-t-il si le lien vers ce site commence également par http : ou utilise à la fois des adresses absolues et relatives ? On peut utiliser le code suivant :
a[href^="http:"] {
background:url(images/externalLink.gif) sans répétition en haut à droite ;
remplissage à droite : 10 px ;
}
une [href*="www.dudo.org"] {
arrière-plan : aucun ;
remplissage : 0 ;
}
Les deux règles ci-dessus sont : tous ceux commençant par http : sont ajoutés avec l'icône de lien externe, et ceux qui commencent par http://www.dudo.org/ ne sont pas utilisés. Les adresses relatives naturelles ne commencent pas par http. l'icône de flèche n'apparaîtra pas.
Source de l'article : http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm