58
Maîtrise des CSS
Avec.la.méthode.CSS,.vous.utilisez.la.pseudo-classe.:after.en.combinaison.avec.la.déclaration. de. contenu. pour. ajouter. du. nouveau. contenu. à. la. fin. du. contenu. existant. spécifié..
Dans.le.cas.présent,.j’ajoute.un.point,.car.c’est.un.caractère.petit.et.discret..Il.ne.faut.pas.
que.le.nouveau.contenu.prenne.de.l’espace.vertical.ou.soit.affiché.dans.la.page..La.propriété.
height.doit.donc.prendre.la.valeur.0.et.la.propriété.visibility.la.valeur.hidden..Comme.
ces.éléments.dégagés.récupèrent.de.l’espace.pour.leur.marge.supérieure,.il.faut.que.la.propriété.display.du.contenu.généré.possède.la.valeur.block..Une.fois.cela.fait,.vous.pouvez.
dégager.votre.contenu.généré :
.clear:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
Cette.méthode.fonctionne.dans.la.plupart.des.navigateurs.web,.mais.elle.échoue.avec.Internet.Explorer 6.et.ses.versions.antérieures..Il.existe.plusieurs.solutions.de.contournement,.
dont.un.grand.nombre.sont.présentées.à.l’adresse.www.positioniseverything.net/easyclearing.html..La.plus.courante.nécessite.d’utiliser.le.Saint.Hack.(voir.Chapitre 8).pour.piéger.
Internet. Explorer 5. et 6. et. leur. faire. appliquer. une. "structuration". (voir. Chapitre 9). qui.
dégage.les.éléments.flottants.
.clear {
display: inline-block;
}
/* Le Saint Hack ne cible qu’Internet Explorer sous Windows \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* Fin du Saint Hack */
Cette.méthode,.parce.qu’elle.est.assez.complexe,.ne.convient.pas.nécessairement.à.tout.le.
monde..Nous.ne.l’avons.finalement.incluse.que.par.souci.d’exhaustivité..
La.méthode.JavaScript.sort.du.cadre.de.ce.livre,.mais.on.peut.la.mentionner.rapidement..
À la.différence.de.la.précédente,.elle.fonctionne.avec.tous.les.navigateurs.principaux.pourvu.
que.JavaScript.n’y.soit.pas.désactivé..Si.vous.l’utilisez,.vous.devez.cependant.vous.assurer.
que.le.contenu.ne.reste.pas.lisible.dans.les.navigateurs.où.les.fonctionnalités.JavaScript.sont.
désactivées.
En résumé
Vous.avez.découvert.le.modèle.de.boîte.et.vu.comment.le.remplissage,.les.marges,.la.largeur.
et.la.hauteur.changent.les.dimensions.d’une.boîte..Vous.avez.également.découvert.le.principe.d’effondrement.des.marges.et.vu.comment.il.peut.influer.sur.vos.mises.en.page..Vous.
avez.découvert.les.trois.modèles.de.mise.en.forme.CSS :.le.flux.normal,.le.positionnement.
et.le.flottement..Vous.avez.appris.la.différence.entre.les.boîtes.incorporées.et.les.boîtes.
de.bloc,.vous.avez.vu.comment.positionner.un.élément.de.manière.absolue.par.rapport.
Maîtrise des CSS
Avec.la.méthode.CSS,.vous.utilisez.la.pseudo-classe.:after.en.combinaison.avec.la.déclaration. de. contenu. pour. ajouter. du. nouveau. contenu. à. la. fin. du. contenu. existant. spécifié..
Dans.le.cas.présent,.j’ajoute.un.point,.car.c’est.un.caractère.petit.et.discret..Il.ne.faut.pas.
que.le.nouveau.contenu.prenne.de.l’espace.vertical.ou.soit.affiché.dans.la.page..La.propriété.
height.doit.donc.prendre.la.valeur.0.et.la.propriété.visibility.la.valeur.hidden..Comme.
ces.éléments.dégagés.récupèrent.de.l’espace.pour.leur.marge.supérieure,.il.faut.que.la.propriété.display.du.contenu.généré.possède.la.valeur.block..Une.fois.cela.fait,.vous.pouvez.
dégager.votre.contenu.généré :
.clear:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
Cette.méthode.fonctionne.dans.la.plupart.des.navigateurs.web,.mais.elle.échoue.avec.Internet.Explorer 6.et.ses.versions.antérieures..Il.existe.plusieurs.solutions.de.contournement,.
dont.un.grand.nombre.sont.présentées.à.l’adresse.www.positioniseverything.net/easyclearing.html..La.plus.courante.nécessite.d’utiliser.le.Saint.Hack.(voir.Chapitre 8).pour.piéger.
Internet. Explorer 5. et 6. et. leur. faire. appliquer. une. "structuration". (voir. Chapitre 9). qui.
dégage.les.éléments.flottants.
.clear {
display: inline-block;
}
/* Le Saint Hack ne cible qu’Internet Explorer sous Windows \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* Fin du Saint Hack */
Cette.méthode,.parce.qu’elle.est.assez.complexe,.ne.convient.pas.nécessairement.à.tout.le.
monde..Nous.ne.l’avons.finalement.incluse.que.par.souci.d’exhaustivité..
La.méthode.JavaScript.sort.du.cadre.de.ce.livre,.mais.on.peut.la.mentionner.rapidement..
À la.différence.de.la.précédente,.elle.fonctionne.avec.tous.les.navigateurs.principaux.pourvu.
que.JavaScript.n’y.soit.pas.désactivé..Si.vous.l’utilisez,.vous.devez.cependant.vous.assurer.
que.le.contenu.ne.reste.pas.lisible.dans.les.navigateurs.où.les.fonctionnalités.JavaScript.sont.
désactivées.
En résumé
Vous.avez.découvert.le.modèle.de.boîte.et.vu.comment.le.remplissage,.les.marges,.la.largeur.
et.la.hauteur.changent.les.dimensions.d’une.boîte..Vous.avez.également.découvert.le.principe.d’effondrement.des.marges.et.vu.comment.il.peut.influer.sur.vos.mises.en.page..Vous.
avez.découvert.les.trois.modèles.de.mise.en.forme.CSS :.le.flux.normal,.le.positionnement.
et.le.flottement..Vous.avez.appris.la.différence.entre.les.boîtes.incorporées.et.les.boîtes.
de.bloc,.vous.avez.vu.comment.positionner.un.élément.de.manière.absolue.par.rapport.