231
Étude de cas : Roma Italia
en.2008.comme.une.propagande.virtuelle.discréditant.le.mythe.selon.lequel.tous.les.sites.
web.devaient.posséder.exactement.la.même.apparence.dans.tous.les.navigateurs..C’était.une.
invitation.lancée.à.la.communauté.du.développement.web.pour.qu’elle.adopte.une.méthode.
plus.progressive.du.balisage.au.lieu.de.se.contraindre.à.l’uniformité.absolue..En.un.mot,.
le.site.de.Dan.dénonçait.ce.réflexe.de.mépris.affiché.par.les.développeurs.à.l’encontre.des.
variations.visuelles..
Dans.le.site.Roma.Italia,.la.différence.visuelle.la.plus.frappante.concerne.la.fonctionnalité.
des.arrière-plans.multiples..Elle.permet.d’utiliser.plusieurs.images.d’arrière-plan.pour.un.
seul.élément,.alors.qu’actuellement.seule.une.image.est.autorisée.par.élément..Les.aficionados.des.bords.arrondis.s’en.frottent.les.mains.
À.l’heure.actuelle,.Safari.est.le.seul.navigateur.important.à.prendre.en.charge.les.arrièreplans. multiples. (c’est. intéressant. de. noter. qu’il. le. faisait. déjà. dès. sa. version 1.3,. soit. en.
2005 !)..Cela.signifie.que.dans.les.navigateurs.comme.Firefox.et.Internet.Explorer,.le.site.
possédera.une.apparence.légèrement.différente..C’est.non.seulement.intentionnel.pour.les.
besoins.de.cette.étude.de.cas,.mais.cela.démontre.aussi.qu’il.est.parfaitement.légitime.de.
proposer.un.affichage.distinct.dans.les.différents.navigateurs.sans.que.cela.ait.un.effet.négatif.sur.l’expérience.générale.de.l’utilisateur..
Les.arrière-plans.multiples,.que.les.professionnels.du.Web.célébreront.comme.une.aubaine.
dès.qu’ils.seront.bien.pris.en.charge,.sont.faciles.à.créer.en.CSS..Vous.devez.simplement.
séparer.chaque.image.et.ses.valeurs.par.une.virgule :
background: url(image1.png) no-repeat top left,
url(image2.png) no-repeat top right,
url(image3.png) no-repeat bottom left;
Les.propriétés.et.les.valeurs.peuvent.aussi.être.définies.séparément :
background-color: #000;
background-image: url(image1.png), url(image2.png), url(image3.png);
background-repeat: no-repeat;
background-position: top left, top right, bottom left;
Les.arrière-plans.multiples.sont.utilisés.dans.notre.site.d’exemple.à.plusieurs.endroits.(voir.
Figure 10.4)..Notez.les.différences.entre.Safari,.Firefox.et.Internet.Explorer.
Deux.images.d’arrière-plan.sont.utilisées.dans.l’élément.body.pour.donner.au.site.sa.texture.
d’arrière-plan :.la.grande.image.brun.foncé.et.la.bande.brun.clair.avec.un.dégradé.léger,.
respectivement.nommées.bg-dark.jpg.et.bg-light.jpg..Le.code.CSS.ressemble.à.ceci :
body {
background: url(../img/bg-dark.jpg) repeat-x top center,
url(../img/bg-light.jpg) repeat-x 239px left;
background-color: #f1efe8;
}
Étude de cas : Roma Italia
en.2008.comme.une.propagande.virtuelle.discréditant.le.mythe.selon.lequel.tous.les.sites.
web.devaient.posséder.exactement.la.même.apparence.dans.tous.les.navigateurs..C’était.une.
invitation.lancée.à.la.communauté.du.développement.web.pour.qu’elle.adopte.une.méthode.
plus.progressive.du.balisage.au.lieu.de.se.contraindre.à.l’uniformité.absolue..En.un.mot,.
le.site.de.Dan.dénonçait.ce.réflexe.de.mépris.affiché.par.les.développeurs.à.l’encontre.des.
variations.visuelles..
Dans.le.site.Roma.Italia,.la.différence.visuelle.la.plus.frappante.concerne.la.fonctionnalité.
des.arrière-plans.multiples..Elle.permet.d’utiliser.plusieurs.images.d’arrière-plan.pour.un.
seul.élément,.alors.qu’actuellement.seule.une.image.est.autorisée.par.élément..Les.aficionados.des.bords.arrondis.s’en.frottent.les.mains.
À.l’heure.actuelle,.Safari.est.le.seul.navigateur.important.à.prendre.en.charge.les.arrièreplans. multiples. (c’est. intéressant. de. noter. qu’il. le. faisait. déjà. dès. sa. version 1.3,. soit. en.
2005 !)..Cela.signifie.que.dans.les.navigateurs.comme.Firefox.et.Internet.Explorer,.le.site.
possédera.une.apparence.légèrement.différente..C’est.non.seulement.intentionnel.pour.les.
besoins.de.cette.étude.de.cas,.mais.cela.démontre.aussi.qu’il.est.parfaitement.légitime.de.
proposer.un.affichage.distinct.dans.les.différents.navigateurs.sans.que.cela.ait.un.effet.négatif.sur.l’expérience.générale.de.l’utilisateur..
Les.arrière-plans.multiples,.que.les.professionnels.du.Web.célébreront.comme.une.aubaine.
dès.qu’ils.seront.bien.pris.en.charge,.sont.faciles.à.créer.en.CSS..Vous.devez.simplement.
séparer.chaque.image.et.ses.valeurs.par.une.virgule :
background: url(image1.png) no-repeat top left,
url(image2.png) no-repeat top right,
url(image3.png) no-repeat bottom left;
Les.propriétés.et.les.valeurs.peuvent.aussi.être.définies.séparément :
background-color: #000;
background-image: url(image1.png), url(image2.png), url(image3.png);
background-repeat: no-repeat;
background-position: top left, top right, bottom left;
Les.arrière-plans.multiples.sont.utilisés.dans.notre.site.d’exemple.à.plusieurs.endroits.(voir.
Figure 10.4)..Notez.les.différences.entre.Safari,.Firefox.et.Internet.Explorer.
Deux.images.d’arrière-plan.sont.utilisées.dans.l’élément.body.pour.donner.au.site.sa.texture.
d’arrière-plan :.la.grande.image.brun.foncé.et.la.bande.brun.clair.avec.un.dégradé.léger,.
respectivement.nommées.bg-dark.jpg.et.bg-light.jpg..Le.code.CSS.ressemble.à.ceci :
body {
background: url(../img/bg-dark.jpg) repeat-x top center,
url(../img/bg-light.jpg) repeat-x 239px left;
background-color: #f1efe8;
}