Par Simon Collison
Dans. la. précédente. édition. de. Maîtrise des CSS,. j’ai. présenté. mon. étude. de. cas. "More.
Than.Doodles".en.parlant.de.la."palette.très.riche".à.l’aide.de.laquelle.les.concepteurs.web.
pouvaient.peindre..À cette.époque,.nous.atteignions.une.phase.critique.où.les.standards.du.
Web.avaient.opéré.une.avancée.significative.dans.le.secteur..C’était.excitant.et.nous.nous.
amusions. beaucoup. avec. les. CSS 2.1,. en. créant. d’incroyables. mises. en. page. malgré. les.
problèmes.que.nous.posaient.certains.parmi.les.anciens.navigateurs..
Plus.de.trois.ans.après,.nous.voilà.déjà.sérieusement.engagés.à.implémenter.des.techniques.
de.la.spécification.CSS 3..Nous.pouvons.remplacer.des.images.d’arrière-plan.décoratives.
par. des. combinaisons. de. règles. CSS 3. comme. border-radius. et. box-shadow. et. nous.
sommes.capables.de.mieux.contrôler.la.transparence.des.calques.sans.avoir.recours.à.des.
images.d’arrière-plan.semi-transparentes.grâce.à.la.propriété.RGBa..Plus.important.encore,.
malgré.ces.améliorations.progressives,.il.est.possible.de.proposer.un.affichage.très.soigné.
aux.navigateurs.qui.ne.prennent.pas.en.charge.les.CSS 3.et.leurs.outils.et.techniques..
Dans.cette.étude.de.cas,.vous.en.apprendrez.plus.sur :
•. les.conventions.et.l’organisation.du.HTML.et.des.CSS ;.
•. la.flexibilité.de.la.grille ;.
•. la.mise.en.valeur.de.la.page.actuelle.en.fonction.de.la.classe.de.l’élément.body ;
•. le.ciblage.des.éléments.avec.des.pseudo-classes.et.des.sélecteurs.de.frères.adjacents ;.
•. la.combinaison.de.classes.pour.plus.d’efficacité.et.de.flexibilité ;.
•. les.propriétés.RGBa,.border-radius.et.box-shadow ;
•. le.positionnement.des.éléments.de.liste.et.l’affichage.de.leur.contenu.
À propos de cette étude de cas
Cette.étude.de.cas.est.bâtie.sur.une.structure.XHTML.en.béton –.aussi.épurée,.organisée.et.
puissante.que.possible..En.particulier,.le.code.XHTML.ne.contient.aucune.balise.superflue.
qui.aurait.été.ajoutée.dans.le.simple.but.de.pouvoir.donner.prise.aux.mécanismes.de.mise.
en.forme.CSS..Tout.ce.qui.se.trouve.dans.le.code.y.est.nécessaire.et.rien.d’autre.n’y.figure..
Le.but.de.ce.chapitre.est.donc.de.partir.de.ce.qu’on.a.et.d’utiliser.des.sélecteurs.CSS.véritablement.astucieux.pour.cibler.des.éléments.XHTML.spécifiques.sans.devoir.ajouter.de.div.
supplémentaires,.de.div.de.dégagement.ou.quoi.que.ce.soit.d’autre.qui.n’aurait.pas.sa.propre.
raison. d’être.. Le. site. Climb. the. Mountains. (grimper. les. montagnes),. auquel. nous. ferons.
référence.à.l’aide.de.l’acronyme.CTM,.est.une.application.web.fictive.dédiée.aux.randonneurs,.passionnés.d’escalade.et.autres.fondus.de.la.montagne.qui.ne.pensent.qu’à.quitter.le.
nid.douillet.de.leur.paisible.maison.pour.passer.des.heures,.des.jours.ou.même.des.semaines.
Étude de cas :
Climb the Mountains
11
Dans. la. précédente. édition. de. Maîtrise des CSS,. j’ai. présenté. mon. étude. de. cas. "More.
Than.Doodles".en.parlant.de.la."palette.très.riche".à.l’aide.de.laquelle.les.concepteurs.web.
pouvaient.peindre..À cette.époque,.nous.atteignions.une.phase.critique.où.les.standards.du.
Web.avaient.opéré.une.avancée.significative.dans.le.secteur..C’était.excitant.et.nous.nous.
amusions. beaucoup. avec. les. CSS 2.1,. en. créant. d’incroyables. mises. en. page. malgré. les.
problèmes.que.nous.posaient.certains.parmi.les.anciens.navigateurs..
Plus.de.trois.ans.après,.nous.voilà.déjà.sérieusement.engagés.à.implémenter.des.techniques.
de.la.spécification.CSS 3..Nous.pouvons.remplacer.des.images.d’arrière-plan.décoratives.
par. des. combinaisons. de. règles. CSS 3. comme. border-radius. et. box-shadow. et. nous.
sommes.capables.de.mieux.contrôler.la.transparence.des.calques.sans.avoir.recours.à.des.
images.d’arrière-plan.semi-transparentes.grâce.à.la.propriété.RGBa..Plus.important.encore,.
malgré.ces.améliorations.progressives,.il.est.possible.de.proposer.un.affichage.très.soigné.
aux.navigateurs.qui.ne.prennent.pas.en.charge.les.CSS 3.et.leurs.outils.et.techniques..
Dans.cette.étude.de.cas,.vous.en.apprendrez.plus.sur :
•. les.conventions.et.l’organisation.du.HTML.et.des.CSS ;.
•. la.flexibilité.de.la.grille ;.
•. la.mise.en.valeur.de.la.page.actuelle.en.fonction.de.la.classe.de.l’élément.body ;
•. le.ciblage.des.éléments.avec.des.pseudo-classes.et.des.sélecteurs.de.frères.adjacents ;.
•. la.combinaison.de.classes.pour.plus.d’efficacité.et.de.flexibilité ;.
•. les.propriétés.RGBa,.border-radius.et.box-shadow ;
•. le.positionnement.des.éléments.de.liste.et.l’affichage.de.leur.contenu.
À propos de cette étude de cas
Cette.étude.de.cas.est.bâtie.sur.une.structure.XHTML.en.béton –.aussi.épurée,.organisée.et.
puissante.que.possible..En.particulier,.le.code.XHTML.ne.contient.aucune.balise.superflue.
qui.aurait.été.ajoutée.dans.le.simple.but.de.pouvoir.donner.prise.aux.mécanismes.de.mise.
en.forme.CSS..Tout.ce.qui.se.trouve.dans.le.code.y.est.nécessaire.et.rien.d’autre.n’y.figure..
Le.but.de.ce.chapitre.est.donc.de.partir.de.ce.qu’on.a.et.d’utiliser.des.sélecteurs.CSS.véritablement.astucieux.pour.cibler.des.éléments.XHTML.spécifiques.sans.devoir.ajouter.de.div.
supplémentaires,.de.div.de.dégagement.ou.quoi.que.ce.soit.d’autre.qui.n’aurait.pas.sa.propre.
raison. d’être.. Le. site. Climb. the. Mountains. (grimper. les. montagnes),. auquel. nous. ferons.
référence.à.l’aide.de.l’acronyme.CTM,.est.une.application.web.fictive.dédiée.aux.randonneurs,.passionnés.d’escalade.et.autres.fondus.de.la.montagne.qui.ne.pensent.qu’à.quitter.le.
nid.douillet.de.leur.paisible.maison.pour.passer.des.heures,.des.jours.ou.même.des.semaines.
Étude de cas :
Climb the Mountains
11