232
Maîtrise des CSS
Figure 10.4
Les différences dans les
images d’arrière-plan
entre Safari (à gauche)
et Firefox et Internet
Explorer (à droite).
Les arrière-plans multiples
affichés par Safari
Comme.Firefox.et.Internet.Explorer.ne.prennent.pas.encore.en.charge.les.arrière-plans.multiples,.si.nous.conservons.le.code.CSS.en.l’état,.aucune.image.ne.s’affiche..On.obtient.alors.
un.arrière-plan.complètement.vide,.ce.qui.n’est.pas.souhaitable..Pour.pouvoir.afficher.au.
moins.l’image.sombre,.nous.insérons.donc.la.propriété.dupliquée.suivante.au-dessus.de.la.
première :
background: #f1efe8 url(../img/bg-dark.jpg) repeat-x;
Firefox.lit.cette.propriété.et.ignore.l’autre..Nous.répétons.la.même.propriété.dans.ie.css.car.
Internet.Explorer.n’aime.pas.trop.ce.petit.hack.que.nous.venons.de.fomenter..Le.CSS.final.
dans.screen.css.est.le.suivant :.
body {
background: #f1efe8 url(../img/bg-dark.jpg) repeat-x;
background: url(../img/bg-dark.jpg) repeat-x top center,
url(../img/bg-light.jpg) repeat-x 239px left;
background-color: #f1efe8;
}
Soyons.clairs :.ce.n’est.pas.le.moyen.le.plus.efficace.d’aboutir.au.résultat.présenté..Pour.
commencer,. nous. aurions. pu. prendre. une. unique. image. combinant. les. deux. graphismes,.
ce.qui.aurait.tout.simplement.évité.d’avoir.à.utiliser.des.images.d’arrière-plan.multiples..
Ensuite,.nous.ajoutons.du.code.supplémentaire.pour.forcer.Firefox.et.Internet.Explorer.à.
afficher.au.moins.une.image..Mais.le.but.de.ces.inefficacités.est.uniquement.d’éliminer.les.
incohérences. visuelles. insignifiantes. d’un. navigateur. à. l’autre. et. de. présenter. les. arrièreplans.multiples..Pour.le.bien.de.la.collectivité.des.professionnels.du.Web,.espérons.que.nous.
sommes.plus.près.du.but.qu’il.n’y.paraît..
Sélecteur d’attribut
Le.sélecteur.d’attribut.évite.d’avoir.à.ajouter.une.classe.ou.un.ID.à.un.élément.en.permettant.
de. faire. référence. à. n’importe. quel. attribut,. ou. valeur. d’attribut,. contenu. dans. l’élément..
Il.peut.être.utilisé.sur.presque.tous.les.éléments.qui.possèdent.des.attributs..Par.exemple,.
but..En.outre,.des.valeurs.d’attribut.similaires.peuvent.être.ciblées.à.l’aide.de.chaînes.syntaxiques.comme.img[src^="sm"],.qui.vise.toutes.les.valeurs.qui.commencent.par.le.préfixe.
Maîtrise des CSS
Figure 10.4
Les différences dans les
images d’arrière-plan
entre Safari (à gauche)
et Firefox et Internet
Explorer (à droite).
Les arrière-plans multiples
affichés par Safari
Comme.Firefox.et.Internet.Explorer.ne.prennent.pas.encore.en.charge.les.arrière-plans.multiples,.si.nous.conservons.le.code.CSS.en.l’état,.aucune.image.ne.s’affiche..On.obtient.alors.
un.arrière-plan.complètement.vide,.ce.qui.n’est.pas.souhaitable..Pour.pouvoir.afficher.au.
moins.l’image.sombre,.nous.insérons.donc.la.propriété.dupliquée.suivante.au-dessus.de.la.
première :
background: #f1efe8 url(../img/bg-dark.jpg) repeat-x;
Firefox.lit.cette.propriété.et.ignore.l’autre..Nous.répétons.la.même.propriété.dans.ie.css.car.
Internet.Explorer.n’aime.pas.trop.ce.petit.hack.que.nous.venons.de.fomenter..Le.CSS.final.
dans.screen.css.est.le.suivant :.
body {
background: #f1efe8 url(../img/bg-dark.jpg) repeat-x;
background: url(../img/bg-dark.jpg) repeat-x top center,
url(../img/bg-light.jpg) repeat-x 239px left;
background-color: #f1efe8;
}
Soyons.clairs :.ce.n’est.pas.le.moyen.le.plus.efficace.d’aboutir.au.résultat.présenté..Pour.
commencer,. nous. aurions. pu. prendre. une. unique. image. combinant. les. deux. graphismes,.
ce.qui.aurait.tout.simplement.évité.d’avoir.à.utiliser.des.images.d’arrière-plan.multiples..
Ensuite,.nous.ajoutons.du.code.supplémentaire.pour.forcer.Firefox.et.Internet.Explorer.à.
afficher.au.moins.une.image..Mais.le.but.de.ces.inefficacités.est.uniquement.d’éliminer.les.
incohérences. visuelles. insignifiantes. d’un. navigateur. à. l’autre. et. de. présenter. les. arrièreplans.multiples..Pour.le.bien.de.la.collectivité.des.professionnels.du.Web,.espérons.que.nous.
sommes.plus.près.du.but.qu’il.n’y.paraît..
Sélecteur d’attribut
Le.sélecteur.d’attribut.évite.d’avoir.à.ajouter.une.classe.ou.un.ID.à.un.élément.en.permettant.
de. faire. référence. à. n’importe. quel. attribut,. ou. valeur. d’attribut,. contenu. dans. l’élément..
Il.peut.être.utilisé.sur.presque.tous.les.éléments.qui.possèdent.des.attributs..Par.exemple,.
but..En.outre,.des.valeurs.d’attribut.similaires.peuvent.être.ciblées.à.l’aide.de.chaînes.syntaxiques.comme.img[src^="sm"],.qui.vise.toutes.les.valeurs.qui.commencent.par.le.préfixe.