195
Bogues et correctifs
Rappelez-vous.que.le.validateur.n’est.qu’un.outil.automatisé.et.qu’il.n’est.pas.infaillible..
Un.nombre.sans.cesse.plus.important.de.bogues.ont.été.signalés.dans.le.navigateur ;.si.vous.
pensez.que.votre.code.est.correct.alors.que.le.validateur.est.d’un.autre.avis,.vérifiez.la.dernière.spécification.CSS..Par.exemple,.à.l’heure.où.ces.lignes.sont.écrites,.le.validateur.CSS.
affiche.toujours.des.erreurs.pour.les.extensions.spécifiques.des.éditeurs.comme.–moz-border-radius,.alors.qu’elles.sont.effectivement.autorisées.dans.la.spécification.CSS..En.cas.
de.doute,.validez.votre.code.en.utilisant.le.profil.CSS 3.et.vérifiez.la.spécification.
Problèmes liés à la spécificité et à l’ordre de tri
En.plus.des.erreurs.syntaxiques,.l’un.des.problèmes.les.plus.courants.concerne.la.spécificité.
et. l’ordre. de. tri.. Les. problèmes. de. spécificité. se. manifestent. généralement. lorsque. vous.
appliquez.une.règle.à.un.élément.et.que.vous.constatez.qu’elle.reste.sans.effet..Vous.appliquez.d’autres.règles,.qui.fonctionnent,.mais.certaines.ne.semblent.pas.fonctionner..Dans.ce.
cas,.le.problème.provient.généralement.du.fait.que.vous.avez.déjà.défini.des.règles.pour.cet.
élément.autre.part.dans.votre.document,.avec.un.sélecteur.plus.spécifique.
Dans.l’exemple.suivant,.les.développeurs.ont.passé.en.blanc.la.couleur.d’arrière-plan.de.tous.
les.paragraphes.dans.la.zone.de.contenu.(content)..Ils.souhaitent.cependant.que.le.paragraphe.d’introduction.soit.orange.et.ont.donc.appliqué.cette.règle.directement.au.paragraphe :
.content p {
background-color: white;
}
.intro {
background-color: orange;
}
Si.vous.testez.ce.code.dans.un.navigateur,.vous.verrez.que.le.paragraphe.d’introduction.est.
toujours.blanc..C’est.que.le.sélecteur.qui.cible.tous.les.paragraphes.dans.la.zone.de.contenu.
est.plus.spécifique.que.celui.qui.cible.le.paragraphe.d’introduction..Pour.parvenir.au.résultat.
désiré,.vous.devez.inverser.ces.propriétés..Ici,.le.meilleur.moyen.d’y.parvenir.est.d’ajouter.
la.classe.de.l’élément.de.contenu.au.début.du.sélecteur.de.paragraphe :
.content p {
background-color: white;
}
.content .intro {
background-color: orange;
}
Évitez.d’ajouter.des.sélecteurs.spécifiques.sans.réfléchir,.car.vous.risqueriez.de.provoquer.
des.problèmes.de.spécificité.dans.d’autres.parties.du.code..Au.lieu.de.cela,.il.est.souvent.
préférable.de.supprimer.les.sélecteurs.superflus,.de.les.rendre.aussi.génériques.que.possible.
et.de.n’ajouter.de.sélecteur.spécifique.que.lorsque.vous.souhaitez.un.contrôle.plus.fin.
Comme.indiqué.au.Chapitre 1,.l’extension.Firebug.pour.Firefox.(https://addons.mozilla.
org/en-US/firefox/addon/1843). est. un. outil. très. précieux. pour. le. débogage. des. CSS..
Bogues et correctifs
Rappelez-vous.que.le.validateur.n’est.qu’un.outil.automatisé.et.qu’il.n’est.pas.infaillible..
Un.nombre.sans.cesse.plus.important.de.bogues.ont.été.signalés.dans.le.navigateur ;.si.vous.
pensez.que.votre.code.est.correct.alors.que.le.validateur.est.d’un.autre.avis,.vérifiez.la.dernière.spécification.CSS..Par.exemple,.à.l’heure.où.ces.lignes.sont.écrites,.le.validateur.CSS.
affiche.toujours.des.erreurs.pour.les.extensions.spécifiques.des.éditeurs.comme.–moz-border-radius,.alors.qu’elles.sont.effectivement.autorisées.dans.la.spécification.CSS..En.cas.
de.doute,.validez.votre.code.en.utilisant.le.profil.CSS 3.et.vérifiez.la.spécification.
Problèmes liés à la spécificité et à l’ordre de tri
En.plus.des.erreurs.syntaxiques,.l’un.des.problèmes.les.plus.courants.concerne.la.spécificité.
et. l’ordre. de. tri.. Les. problèmes. de. spécificité. se. manifestent. généralement. lorsque. vous.
appliquez.une.règle.à.un.élément.et.que.vous.constatez.qu’elle.reste.sans.effet..Vous.appliquez.d’autres.règles,.qui.fonctionnent,.mais.certaines.ne.semblent.pas.fonctionner..Dans.ce.
cas,.le.problème.provient.généralement.du.fait.que.vous.avez.déjà.défini.des.règles.pour.cet.
élément.autre.part.dans.votre.document,.avec.un.sélecteur.plus.spécifique.
Dans.l’exemple.suivant,.les.développeurs.ont.passé.en.blanc.la.couleur.d’arrière-plan.de.tous.
les.paragraphes.dans.la.zone.de.contenu.(content)..Ils.souhaitent.cependant.que.le.paragraphe.d’introduction.soit.orange.et.ont.donc.appliqué.cette.règle.directement.au.paragraphe :
.content p {
background-color: white;
}
.intro {
background-color: orange;
}
Si.vous.testez.ce.code.dans.un.navigateur,.vous.verrez.que.le.paragraphe.d’introduction.est.
toujours.blanc..C’est.que.le.sélecteur.qui.cible.tous.les.paragraphes.dans.la.zone.de.contenu.
est.plus.spécifique.que.celui.qui.cible.le.paragraphe.d’introduction..Pour.parvenir.au.résultat.
désiré,.vous.devez.inverser.ces.propriétés..Ici,.le.meilleur.moyen.d’y.parvenir.est.d’ajouter.
la.classe.de.l’élément.de.contenu.au.début.du.sélecteur.de.paragraphe :
.content p {
background-color: white;
}
.content .intro {
background-color: orange;
}
Évitez.d’ajouter.des.sélecteurs.spécifiques.sans.réfléchir,.car.vous.risqueriez.de.provoquer.
des.problèmes.de.spécificité.dans.d’autres.parties.du.code..Au.lieu.de.cela,.il.est.souvent.
préférable.de.supprimer.les.sélecteurs.superflus,.de.les.rendre.aussi.génériques.que.possible.
et.de.n’ajouter.de.sélecteur.spécifique.que.lorsque.vous.souhaitez.un.contrôle.plus.fin.
Comme.indiqué.au.Chapitre 1,.l’extension.Firebug.pour.Firefox.(https://addons.mozilla.
org/en-US/firefox/addon/1843). est. un. outil. très. précieux. pour. le. débogage. des. CSS..