97
Mise en forme des liens
Figure 5.5
Mise en forme des liens
externes.
Cette.méthode.fonctionne,.mais.elle.n’est.pas.particulièrement.intelligente.ni.élégante,.car.
vous.devez.ajouter.manuellement.cette.classe.à.chaque.lien.externe..Ne.serait-il.pas.intéressant.que.les.CSS.puissent.déterminer.à.votre.place.ce.qui.est.ou.n’est.pas.un.lien.externe ?.
En.fait,.c’est.parfaitement.possible,.grâce.aux.sélecteurs.d’attribut.
Comme.vous.l’avez.appris.au.Chapitre 1,.les.sélecteurs.d’attribut.permettent.de.cibler.un.
élément.en.fonction.de.l’existence.ou.de.la.valeur.d’un.attribut..La.spécification.CSS 3.étend.
cette. capacité.à. la. mise. en. correspondance.de.sous-chaînes..Avec. ces.sélecteurs,.on.peut.
cibler.un.élément.en.établissant.la.correspondance.entre.un.fragment.de.texte.choisi.et.une.
partie.de.la.valeur.d’un.attribut..La.CSS 3.n’est.pas.encore.une.spécification.officielle,.aussi.
l’utilisation.de.ces.sélecteurs.avancés.peut-elle.invalider.votre.code..Cependant,.la.majorité.
des.navigateurs.compatibles.avec.les.standards.les.prennent.en.charge.
Cette.technique.fonctionne.en.ciblant.d’abord.tous.les.liens.qui.commencent.par.le.texte.
http:.avec.le.sélecteur.d’attribut.[att^=val] :
a[href^="http:"] {
background: url(/img/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
Ce.code.doit.mettre.en.valeur.tous.les.liens.externes..Il.sélectionne.cependant.aussi.tous.les.
liens.internes.qui.utilisent.des.URL.absolues.et.non.relatives..Pour.éviter.cela,.vous.devez.
redéfinir.tous.les.liens.vers.votre.site.ainsi :.supprimez.l’icône.de.lien.externe,.retrouvez.les.
liens.qui.pointent.vers.votre.nom.de.domaine,.supprimez.l’icône.de.lien.externe.et.redéfinissez.le.remplissage.droit.(voir.Figure 5.6).
a[href^="http://www.yoursite.com"],
a[href^="http://yoursite.com"] {
background-image: none;
padding-right: 0;
}
Figure 5.6
Cette page affiche
les liens externes
différemment des liens
internes.
Mise en forme des liens
Figure 5.5
Mise en forme des liens
externes.
Cette.méthode.fonctionne,.mais.elle.n’est.pas.particulièrement.intelligente.ni.élégante,.car.
vous.devez.ajouter.manuellement.cette.classe.à.chaque.lien.externe..Ne.serait-il.pas.intéressant.que.les.CSS.puissent.déterminer.à.votre.place.ce.qui.est.ou.n’est.pas.un.lien.externe ?.
En.fait,.c’est.parfaitement.possible,.grâce.aux.sélecteurs.d’attribut.
Comme.vous.l’avez.appris.au.Chapitre 1,.les.sélecteurs.d’attribut.permettent.de.cibler.un.
élément.en.fonction.de.l’existence.ou.de.la.valeur.d’un.attribut..La.spécification.CSS 3.étend.
cette. capacité.à. la. mise. en. correspondance.de.sous-chaînes..Avec. ces.sélecteurs,.on.peut.
cibler.un.élément.en.établissant.la.correspondance.entre.un.fragment.de.texte.choisi.et.une.
partie.de.la.valeur.d’un.attribut..La.CSS 3.n’est.pas.encore.une.spécification.officielle,.aussi.
l’utilisation.de.ces.sélecteurs.avancés.peut-elle.invalider.votre.code..Cependant,.la.majorité.
des.navigateurs.compatibles.avec.les.standards.les.prennent.en.charge.
Cette.technique.fonctionne.en.ciblant.d’abord.tous.les.liens.qui.commencent.par.le.texte.
http:.avec.le.sélecteur.d’attribut.[att^=val] :
a[href^="http:"] {
background: url(/img/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
Ce.code.doit.mettre.en.valeur.tous.les.liens.externes..Il.sélectionne.cependant.aussi.tous.les.
liens.internes.qui.utilisent.des.URL.absolues.et.non.relatives..Pour.éviter.cela,.vous.devez.
redéfinir.tous.les.liens.vers.votre.site.ainsi :.supprimez.l’icône.de.lien.externe,.retrouvez.les.
liens.qui.pointent.vers.votre.nom.de.domaine,.supprimez.l’icône.de.lien.externe.et.redéfinissez.le.remplissage.droit.(voir.Figure 5.6).
a[href^="http://www.yoursite.com"],
a[href^="http://yoursite.com"] {
background-image: none;
padding-right: 0;
}
Figure 5.6
Cette page affiche
les liens externes
différemment des liens
internes.