28
Maîtrise des CSS
Il.n’existe.cependant.aucun.moyen.de.savoir.que.ces.informations.supplémentaires.existent.
si.l’on.ne.survole.pas.l’élément..Pour.résoudre.ce.problème,.vous.pouvez.utiliser.le.sélecteur.
d’attribut.afin.d’appliquer.une.mise.en.forme.différente.aux.éléments.d’acronyme.qui.possèdent.des.titres.et.à.ceux.qui.n’en.ont.pas.–.ici,.en.les.soulignant.avec.une.bordure.en.pointillé..
Vous.pouvez.fournir.d’autres.informations.contextuelles.en.transformant.le.curseur.en.point.
d’interrogation.pendant.le.survol.de.l’élément,.afin.d’indiquer.que.celui-ci.a.quelque.chose.
de.particulier.par.rapport.aux.autres.
acronym[title] {
border-bottom: 1px dotted #999;
}
acronym[title]:hover, acronym[title]:focus {
cursor: help;
}
En.plus.de.mettre.en.forme.un.élément.en.fonction.de.l’existence.d’un.attribut,.vous.pouvez.
appliquer.des.styles.en.fonction.d’une.valeur.particulière..Par.exemple,.les.sites.qui.sont.
liés.à.l’utilisation.d’un.attribut.rel.avec.la.valeur.nofollow.n’offrent.aucun.avantage.en.
termes.de.classement.sur.Google..La.règle.suivante.affiche.une.image.à.côté.de.ces.liens,.par.
exemple.pour.signaler.que.le.site.cible.est.déconseillé :
a[rel="nofollow"] {
background: url(nofollow.gif) no-repeat right center;
padding-right: 20px;
}
Tous.les.navigateurs.web.modernes,.Internet.Explorer 7.y.compris,.prennent.en.charge.ces.
sélecteurs..Comme.Internet.Explorer 6.ne.les.reconnaît.pas,.vous.pouvez.les.utiliser.justement.pour.appliquer.un.style.à.Internet.Explorer 6.et.un.autre.aux.navigateurs.mieux.lotis.en.
termes.de.fonctionnalités..Par.exemple,.Andy.Clarke.utilise.cette.technique.en.proposant.une.
version.en.noir.et.blanc.de.son.site.aux.utilisateurs.d’Internet.Explorer 6.(voir.Figure 2.3).et.
une.version.en.couleur.pour.tous.les.autres.navigateurs.(voir.Figure 2.4).
#header {
background: url(branding-bw.png) repeat-y left top;
}
[id="header"] {
background: url(branding-color.png) repeat-y left top;
}
Certains.attributs.peuvent.posséder.plusieurs.valeurs.séparées.par.des.espaces..Le.sélecteur.
d’attribut. permet. de. cibler. un. élément. en. fonction. de. l’une. de. ces. valeurs.. Par. exemple,.
le.microformat.XFN.permet.de.définir.la.relation.avec.un.site.en.ajoutant.des.mots-clés.à.
l’attribut.rel.du.lien.d’ancre..On.peut.ainsi.faire.savoir.qu’un.site.appartient.à.l’un.de.ses.
collègues.de.travail.en.ajoutant.le.mot-clé.co-worker.aux.liens.de.sa.liste.de.blogs..
Maîtrise des CSS
Il.n’existe.cependant.aucun.moyen.de.savoir.que.ces.informations.supplémentaires.existent.
si.l’on.ne.survole.pas.l’élément..Pour.résoudre.ce.problème,.vous.pouvez.utiliser.le.sélecteur.
d’attribut.afin.d’appliquer.une.mise.en.forme.différente.aux.éléments.d’acronyme.qui.possèdent.des.titres.et.à.ceux.qui.n’en.ont.pas.–.ici,.en.les.soulignant.avec.une.bordure.en.pointillé..
Vous.pouvez.fournir.d’autres.informations.contextuelles.en.transformant.le.curseur.en.point.
d’interrogation.pendant.le.survol.de.l’élément,.afin.d’indiquer.que.celui-ci.a.quelque.chose.
de.particulier.par.rapport.aux.autres.
acronym[title] {
border-bottom: 1px dotted #999;
}
acronym[title]:hover, acronym[title]:focus {
cursor: help;
}
En.plus.de.mettre.en.forme.un.élément.en.fonction.de.l’existence.d’un.attribut,.vous.pouvez.
appliquer.des.styles.en.fonction.d’une.valeur.particulière..Par.exemple,.les.sites.qui.sont.
liés.à.l’utilisation.d’un.attribut.rel.avec.la.valeur.nofollow.n’offrent.aucun.avantage.en.
termes.de.classement.sur.Google..La.règle.suivante.affiche.une.image.à.côté.de.ces.liens,.par.
exemple.pour.signaler.que.le.site.cible.est.déconseillé :
a[rel="nofollow"] {
background: url(nofollow.gif) no-repeat right center;
padding-right: 20px;
}
Tous.les.navigateurs.web.modernes,.Internet.Explorer 7.y.compris,.prennent.en.charge.ces.
sélecteurs..Comme.Internet.Explorer 6.ne.les.reconnaît.pas,.vous.pouvez.les.utiliser.justement.pour.appliquer.un.style.à.Internet.Explorer 6.et.un.autre.aux.navigateurs.mieux.lotis.en.
termes.de.fonctionnalités..Par.exemple,.Andy.Clarke.utilise.cette.technique.en.proposant.une.
version.en.noir.et.blanc.de.son.site.aux.utilisateurs.d’Internet.Explorer 6.(voir.Figure 2.3).et.
une.version.en.couleur.pour.tous.les.autres.navigateurs.(voir.Figure 2.4).
#header {
background: url(branding-bw.png) repeat-y left top;
}
[id="header"] {
background: url(branding-color.png) repeat-y left top;
}
Certains.attributs.peuvent.posséder.plusieurs.valeurs.séparées.par.des.espaces..Le.sélecteur.
d’attribut. permet. de. cibler. un. élément. en. fonction. de. l’une. de. ces. valeurs.. Par. exemple,.
le.microformat.XFN.permet.de.définir.la.relation.avec.un.site.en.ajoutant.des.mots-clés.à.
l’attribut.rel.du.lien.d’ancre..On.peut.ainsi.faire.savoir.qu’un.site.appartient.à.l’un.de.ses.
collègues.de.travail.en.ajoutant.le.mot-clé.co-worker.aux.liens.de.sa.liste.de.blogs..