176
Maîtrise des CSS
Mises en page élastiques
Si.les.mises.en.page.liquides.sont.utiles.pour.tirer.le.meilleur.parti.de.l’espace.disponible.
dans.la.page,.il.peut.néanmoins.arriver.que.les.longueurs.de.lignes.soient.excessives.sur.les.
moniteurs.à.haute.résolution..À l’inverse,.les.lignes.peuvent.devenir.trop.courtes.et.fragmentées.dans.les.fenêtres.étroites.ou.lorsque.la.taille.du.texte.est.augmentée.de.quelques.points..
Si.cela.pose.un.problème,.la.solution.peut.se.trouver.dans.une.mise.en.page.élastique.
Les.mises.en.page.élastiques.définissent.la.largeur.des.éléments.par.rapport.à.la.taille.de.la.
police.au.lieu.de.la.largeur.du.navigateur..Avec.des.largeurs.en.cadratins,.vous.avez.la.garantie.que,.lorsque.la.taille.de.police.augmente,.toute.la.mise.en.page.s’ajuste.en.fonction..Les.
longueurs.de.lignes.conservent.ainsi.une.taille.lisible,.un.ajustement.particulièrement.utile.
pour.les.personnes.à.vision.réduite.
Comme.toutes.les.techniques.de.mise.en.page,.celles-ci.ont.leurs.inconvénients..Elles.ont.
quelques. défauts. en. commun. avec. les. mises. en. page. à. largeur. fixe,. dont. celui. de. ne. pas.
exploiter. pleinement. l’espace. disponible.. En. outre,. elles. peuvent. devenir. beaucoup. plus.
larges.que.la.fenêtre.du.navigateur.–.comme.l’ensemble.de.la.mise.en.page.s’agrandit.quand.
la.taille.du.texte.augmente.–.ce.qui.contraint.à.faire.apparaître.les.barres.de.défilement.horizontales..Pour.éviter.cela,.on.peut.ajouter.une.propriété.max-width.fixée.à.100 %.de.la.div.
conteneur..max-width.n’est.pas.pris.en.charge.par.Internet.Explorer 6.et.ses.versions.antérieures,.mais.il.l’est.par.les.nouvelles.versions..Si.vous.souhaitez.rendre.max-width.opérant.
dans.Internet.Explorer 6,.vous.pouvez.utiliser.du.JavaScript.également.
Les.mises.en.page.élastiques.sont.plus.simples.à.créer.que.les.mises.en.page.liquides.car.
tant.de.changer.de.taille..Transformer.une.mise.en.page.à.largeur.fixe.en.mise.en.page.élastique.est.assez.simple..L’astuce.consiste.à.définir.la.taille.de.police.de.base.de.manière.qu’un.
cadratin.(1 em).corresponde.approximativement.à.10 pixels.
Dans.la.plupart.des.navigateurs,.la.taille.de.police.par.défaut.est.de.16 pixels..10 pixels.correspondent.à.62,5 %.de.16 pixels..Il.suffit.alors.de.définir.une.taille.de.police.pour.l’élément.
body.fixée.à.62,5 % :
body {
font-size: 62.5%;
text-align: center;
}
Comme.1 cadratin.vaut.maintenant.10 pixels.à.la.taille.de.police.par.défaut,.la.mise.en.page.
à.largeur.fixe.peut.assez.facilement.être.convertie.en.mise.en.page.élastique..Dans.les.précédentes.éditions.de.ce.livre,.j’ai.recommandé.de.définir.toutes.les.largeurs.en.cadratins..Ma.
collègue.et.relectrice.Natalie.Downe.a.cependant.suggéré.de.conserver.les.largeurs.internes.
sous.forme.de.pourcentages.et.de.ne.définir.que.la.largeur.du.conteneur.en.cadratins..De.cette.
manière,.les.largeurs.internes.se.redimensionnent.toujours.en.fonction.de.la.taille.de.police..Il.
est.ainsi.possible.de.modifier.la.taille.globale.de.la.mise.en.page.sans.avoir.à.changer.la.largeur.de.chaque.élément.individuel..Ce.système.est.donc.plus.flexible.et.plus.simple.à.gérer..
.wrapper {
width: 92em;
max-width: 95%;
Maîtrise des CSS
Mises en page élastiques
Si.les.mises.en.page.liquides.sont.utiles.pour.tirer.le.meilleur.parti.de.l’espace.disponible.
dans.la.page,.il.peut.néanmoins.arriver.que.les.longueurs.de.lignes.soient.excessives.sur.les.
moniteurs.à.haute.résolution..À l’inverse,.les.lignes.peuvent.devenir.trop.courtes.et.fragmentées.dans.les.fenêtres.étroites.ou.lorsque.la.taille.du.texte.est.augmentée.de.quelques.points..
Si.cela.pose.un.problème,.la.solution.peut.se.trouver.dans.une.mise.en.page.élastique.
Les.mises.en.page.élastiques.définissent.la.largeur.des.éléments.par.rapport.à.la.taille.de.la.
police.au.lieu.de.la.largeur.du.navigateur..Avec.des.largeurs.en.cadratins,.vous.avez.la.garantie.que,.lorsque.la.taille.de.police.augmente,.toute.la.mise.en.page.s’ajuste.en.fonction..Les.
longueurs.de.lignes.conservent.ainsi.une.taille.lisible,.un.ajustement.particulièrement.utile.
pour.les.personnes.à.vision.réduite.
Comme.toutes.les.techniques.de.mise.en.page,.celles-ci.ont.leurs.inconvénients..Elles.ont.
quelques. défauts. en. commun. avec. les. mises. en. page. à. largeur. fixe,. dont. celui. de. ne. pas.
exploiter. pleinement. l’espace. disponible.. En. outre,. elles. peuvent. devenir. beaucoup. plus.
larges.que.la.fenêtre.du.navigateur.–.comme.l’ensemble.de.la.mise.en.page.s’agrandit.quand.
la.taille.du.texte.augmente.–.ce.qui.contraint.à.faire.apparaître.les.barres.de.défilement.horizontales..Pour.éviter.cela,.on.peut.ajouter.une.propriété.max-width.fixée.à.100 %.de.la.div.
conteneur..max-width.n’est.pas.pris.en.charge.par.Internet.Explorer 6.et.ses.versions.antérieures,.mais.il.l’est.par.les.nouvelles.versions..Si.vous.souhaitez.rendre.max-width.opérant.
dans.Internet.Explorer 6,.vous.pouvez.utiliser.du.JavaScript.également.
Les.mises.en.page.élastiques.sont.plus.simples.à.créer.que.les.mises.en.page.liquides.car.
tant.de.changer.de.taille..Transformer.une.mise.en.page.à.largeur.fixe.en.mise.en.page.élastique.est.assez.simple..L’astuce.consiste.à.définir.la.taille.de.police.de.base.de.manière.qu’un.
cadratin.(1 em).corresponde.approximativement.à.10 pixels.
Dans.la.plupart.des.navigateurs,.la.taille.de.police.par.défaut.est.de.16 pixels..10 pixels.correspondent.à.62,5 %.de.16 pixels..Il.suffit.alors.de.définir.une.taille.de.police.pour.l’élément.
body.fixée.à.62,5 % :
body {
font-size: 62.5%;
text-align: center;
}
Comme.1 cadratin.vaut.maintenant.10 pixels.à.la.taille.de.police.par.défaut,.la.mise.en.page.
à.largeur.fixe.peut.assez.facilement.être.convertie.en.mise.en.page.élastique..Dans.les.précédentes.éditions.de.ce.livre,.j’ai.recommandé.de.définir.toutes.les.largeurs.en.cadratins..Ma.
collègue.et.relectrice.Natalie.Downe.a.cependant.suggéré.de.conserver.les.largeurs.internes.
sous.forme.de.pourcentages.et.de.ne.définir.que.la.largeur.du.conteneur.en.cadratins..De.cette.
manière,.les.largeurs.internes.se.redimensionnent.toujours.en.fonction.de.la.taille.de.police..Il.
est.ainsi.possible.de.modifier.la.taille.globale.de.la.mise.en.page.sans.avoir.à.changer.la.largeur.de.chaque.élément.individuel..Ce.système.est.donc.plus.flexible.et.plus.simple.à.gérer..
.wrapper {
width: 92em;
max-width: 95%;