100
Maîtrise des CSS
la.zone.de.contenu.principal.de.votre.page,.mais.si.vos.liens.se.trouvent.dans.une.colonne.
latérale,.vous.pouvez.sans.doute.vous.contenter.de.définir.la.largeur.de.la.colonne.sans.vous.
préoccuper.de.la.largeur.des.liens.
Vous.vous.demandez.peut-être.pourquoi.j’utilise.line-height.pour.contrôler.la.hauteur.du.
bouton.au.lieu.de.la.propriété.height..Il.s’agit,.en.fait,.d’une.astuce.pour.centrer.verticalement.le.texte.dans.le.bouton..Si.vous.définissez.la.propriété.height,.vous.aurez.certainement.
besoin.d’utiliser.un.remplissage.pour."pousser ".le.texte.vers.le.bas.et.simuler.un.centrage.
vertical..Le.texte.est.en.revanche.toujours.centré.verticalement.dans.une.boîte.incorporée,.si.
bien.qu’en.modulant.line-height,.on.s’assure.qu’il.figure.toujours.au.milieu.de.la.boîte..
Il.y.a.un.inconvénient,.toutefois..Si.le.texte.du.bouton.s’étend.sur.deux.lignes,.il.devient.
deux.fois.plus.haut.qu’on.ne.le.souhaite..Le.seul.moyen.d’éviter.cela.est.de.redimensionner.
les.boutons.et.le.texte.de.manière.que.ce.dernier.ne.soit.pas.renvoyé.à.la.ligne.ou,.à.tout.le.
moins,.ne.le.fasse.pas.tant.que.le.texte.conserve.une.longueur.raisonnable..
Si. vous. choisissez. cette. technique,. assurez-vous. de. ne. l’utiliser. que. sur. des. éléments. de.
liens.simples.et.non.sur.des.éléments.qui.enclenchent.des.mises.à.jour.du.serveur..Sans.cela,.
vous.risqueriez.de.produire.quelques.effets.indésirables..Lorsque.l’accélérateur.de.Google.a.
été.lancé,.certains.utilisateurs.ont.constaté.que.le.contenu.dans.leurs.applications.web.et.de.
leurs.applications.de.gestion.de.contenu.disparaissait.mystérieusement..Parfois,.le.contenu.
entier.d’un.site.pouvait.se.volatiliser.pendant.la.nuit..Les.auteurs.de.ces.outils.avaient.en.fait.
utilisé.des.liens.d’ancre.au.lieu.d’éléments.de.formulaire.pour.leurs.boutons.de.suppression..
L’accélérateur.Google.suivait.ces.liens.afin.de.les.mettre.en.cache.et.supprimait.involontairement.le.contenu !.Les.robots.des.moteurs.de.recherche.peuvent.avoir.le.même.effet,.en.
supprimant.de.manière.récursive.de.vastes.pans.de.données..Voilà.pourquoi.vous.ne.devez.
jamais.utiliser.de.liens.pour.opérer.des.changements.sur.le.serveur..Ou.pour.le.dire.en.termes.
techniques,.les.liens.ne.doivent.être.utilisés.que.pour.des.requêtes.GET.et.jamais.pour.des.
requêtes.POST.
Survol simple
À.l’époque,.quand.on.vivait.à.la.dure,.il.fallait.programmer.de.grandes.et.complexes.fonctions.JavaScript.pour.créer.des.effets.de.survol..La.pseudo-classe.:hover.permet.maintenant.
de.s’épargner.ces.efforts..On.peut.ainsi.étendre.l’exemple.précédent.afin.d’inclure.un.effet.
de.survol.simple.en.définissant.la.couleur.d’arrière-plan.et.la.couleur.du.texte.du.lien.survolé.
(voir.Figure 5.9) :
a:hover,
a:focus {
background-color: #f7a300;
border-color: #ff7400;
}
Figure 5.9
Style de survol signalant
une zone réactive.
Maîtrise des CSS
la.zone.de.contenu.principal.de.votre.page,.mais.si.vos.liens.se.trouvent.dans.une.colonne.
latérale,.vous.pouvez.sans.doute.vous.contenter.de.définir.la.largeur.de.la.colonne.sans.vous.
préoccuper.de.la.largeur.des.liens.
Vous.vous.demandez.peut-être.pourquoi.j’utilise.line-height.pour.contrôler.la.hauteur.du.
bouton.au.lieu.de.la.propriété.height..Il.s’agit,.en.fait,.d’une.astuce.pour.centrer.verticalement.le.texte.dans.le.bouton..Si.vous.définissez.la.propriété.height,.vous.aurez.certainement.
besoin.d’utiliser.un.remplissage.pour."pousser ".le.texte.vers.le.bas.et.simuler.un.centrage.
vertical..Le.texte.est.en.revanche.toujours.centré.verticalement.dans.une.boîte.incorporée,.si.
bien.qu’en.modulant.line-height,.on.s’assure.qu’il.figure.toujours.au.milieu.de.la.boîte..
Il.y.a.un.inconvénient,.toutefois..Si.le.texte.du.bouton.s’étend.sur.deux.lignes,.il.devient.
deux.fois.plus.haut.qu’on.ne.le.souhaite..Le.seul.moyen.d’éviter.cela.est.de.redimensionner.
les.boutons.et.le.texte.de.manière.que.ce.dernier.ne.soit.pas.renvoyé.à.la.ligne.ou,.à.tout.le.
moins,.ne.le.fasse.pas.tant.que.le.texte.conserve.une.longueur.raisonnable..
Si. vous. choisissez. cette. technique,. assurez-vous. de. ne. l’utiliser. que. sur. des. éléments. de.
liens.simples.et.non.sur.des.éléments.qui.enclenchent.des.mises.à.jour.du.serveur..Sans.cela,.
vous.risqueriez.de.produire.quelques.effets.indésirables..Lorsque.l’accélérateur.de.Google.a.
été.lancé,.certains.utilisateurs.ont.constaté.que.le.contenu.dans.leurs.applications.web.et.de.
leurs.applications.de.gestion.de.contenu.disparaissait.mystérieusement..Parfois,.le.contenu.
entier.d’un.site.pouvait.se.volatiliser.pendant.la.nuit..Les.auteurs.de.ces.outils.avaient.en.fait.
utilisé.des.liens.d’ancre.au.lieu.d’éléments.de.formulaire.pour.leurs.boutons.de.suppression..
L’accélérateur.Google.suivait.ces.liens.afin.de.les.mettre.en.cache.et.supprimait.involontairement.le.contenu !.Les.robots.des.moteurs.de.recherche.peuvent.avoir.le.même.effet,.en.
supprimant.de.manière.récursive.de.vastes.pans.de.données..Voilà.pourquoi.vous.ne.devez.
jamais.utiliser.de.liens.pour.opérer.des.changements.sur.le.serveur..Ou.pour.le.dire.en.termes.
techniques,.les.liens.ne.doivent.être.utilisés.que.pour.des.requêtes.GET.et.jamais.pour.des.
requêtes.POST.
Survol simple
À.l’époque,.quand.on.vivait.à.la.dure,.il.fallait.programmer.de.grandes.et.complexes.fonctions.JavaScript.pour.créer.des.effets.de.survol..La.pseudo-classe.:hover.permet.maintenant.
de.s’épargner.ces.efforts..On.peut.ainsi.étendre.l’exemple.précédent.afin.d’inclure.un.effet.
de.survol.simple.en.définissant.la.couleur.d’arrière-plan.et.la.couleur.du.texte.du.lien.survolé.
(voir.Figure 5.9) :
a:hover,
a:focus {
background-color: #f7a300;
border-color: #ff7400;
}
Figure 5.9
Style de survol signalant
une zone réactive.