258
Maîtrise des CSS
Feuilles de styles Internet Explorer utilisant
des commentaires conditionnels
Cette. méthode. qui. permet. de. cibler. les. versions. de. navigateur. propres. à. Microsoft. a. été.
introduite. au. départ. avec. Internet. Explorer 5 . et. ses. versions. à. point.. En. utilisant. le. balisage.XHTML.enveloppé.dans.une.instruction.conditionnelle.à.l’intérieur.d’un.commentaire.
XHTML,.vous.pouvez.utiliser.cette.combinaison.syntaxique.spéciale.n’importe.où.dans.un.
document.XHTML.et.vous.en.servir.pour.transmettre.des.informations.bien.précises.à.des.
navigateurs.ciblés..
Dans.l’exemple.suivant,.nous.utilisons.donc.cette.combinaison.de.syntaxe.pour.appeler.trois.
feuilles.de.styles.supplémentaires.si.l’utilisateur.observe.le.site.avec.Internet.Explorer 6, 7.
ou 8.
L’intérêt. de. cette. approche. tient. à. ce. que. l’on. peut. éviter. d’ajouter. des. hacks. caractéristiques.d’Internet.Explorer.aux.règles.CSS.existantes.dans.screen.css.(qui.seront.appliquées.
par.tous.les.autres.navigateurs).et.créer.à.la.place.des.règles.propres.au.navigateur.dans.les.
feuilles.de.styles.Internet.Explorer..C’est.ce.que.nous.faisons.pour.la.maquette.du.site.CTM,.
car.nous.appelons.certains.ajouts.spécifiques.d’Internet.Explorer.dans.les.CSS,.comme.nous.
allons.le.voir.un.peu.plus.loin..
Flexibilité de la grille
Une.grille.agit.à.la.manière.d’une.fondation.solide.pour.n’importe.quelle.page.dans.n’importe.quel.site.web..Le.fait.d’y.recourir.doit.vous.libérer.et.non.vous.restreindre..N’ayez.
jamais. peur. de. sortir. des. lignes. et. de. risquer. quelques. essais.. La. grille. est. un. rappel,. un.
guide –.en.quelque.sorte,.une.présence.qui.rassure.
En. général,. de. largeur. prédéterminée. et. dotée. d’un. nombre. de. colonnes. et. de. gouttières.
optionnelles,.la.grille.est.un.appui,.un.guide.tranquillisant..Elle.a.une.fonction.intermédiaire.
entre. Photoshop. et. les. CSS.. Elle. livre. les. informations. concernant. vos. choix. de. mise. en.
page.initiaux.pour.ce.qui.concerne.les.éléments.flottants,.le.positionnement,.les.marges,.le.
remplissage,.les.bordures, etc.
Comme.bien.d’autres.concepteurs,.quand.je.réalise.mes.prototypes.dans.Photoshop,.sous.
Fireworks.ou.dans.le.navigateur.lui-même,.je.travaille.avec.un.calque.de.grille.que.j’active.
et.désactive.à.volonté.(voir.Figure 11.3).
Maîtrise des CSS
Feuilles de styles Internet Explorer utilisant
des commentaires conditionnels
Cette. méthode. qui. permet. de. cibler. les. versions. de. navigateur. propres. à. Microsoft. a. été.
introduite. au. départ. avec. Internet. Explorer 5 . et. ses. versions. à. point.. En. utilisant. le. balisage.XHTML.enveloppé.dans.une.instruction.conditionnelle.à.l’intérieur.d’un.commentaire.
XHTML,.vous.pouvez.utiliser.cette.combinaison.syntaxique.spéciale.n’importe.où.dans.un.
document.XHTML.et.vous.en.servir.pour.transmettre.des.informations.bien.précises.à.des.
navigateurs.ciblés..
Dans.l’exemple.suivant,.nous.utilisons.donc.cette.combinaison.de.syntaxe.pour.appeler.trois.
feuilles.de.styles.supplémentaires.si.l’utilisateur.observe.le.site.avec.Internet.Explorer 6, 7.
ou 8.
L’intérêt. de. cette. approche. tient. à. ce. que. l’on. peut. éviter. d’ajouter. des. hacks. caractéristiques.d’Internet.Explorer.aux.règles.CSS.existantes.dans.screen.css.(qui.seront.appliquées.
par.tous.les.autres.navigateurs).et.créer.à.la.place.des.règles.propres.au.navigateur.dans.les.
feuilles.de.styles.Internet.Explorer..C’est.ce.que.nous.faisons.pour.la.maquette.du.site.CTM,.
car.nous.appelons.certains.ajouts.spécifiques.d’Internet.Explorer.dans.les.CSS,.comme.nous.
allons.le.voir.un.peu.plus.loin..
Flexibilité de la grille
Une.grille.agit.à.la.manière.d’une.fondation.solide.pour.n’importe.quelle.page.dans.n’importe.quel.site.web..Le.fait.d’y.recourir.doit.vous.libérer.et.non.vous.restreindre..N’ayez.
jamais. peur. de. sortir. des. lignes. et. de. risquer. quelques. essais.. La. grille. est. un. rappel,. un.
guide –.en.quelque.sorte,.une.présence.qui.rassure.
En. général,. de. largeur. prédéterminée. et. dotée. d’un. nombre. de. colonnes. et. de. gouttières.
optionnelles,.la.grille.est.un.appui,.un.guide.tranquillisant..Elle.a.une.fonction.intermédiaire.
entre. Photoshop. et. les. CSS.. Elle. livre. les. informations. concernant. vos. choix. de. mise. en.
page.initiaux.pour.ce.qui.concerne.les.éléments.flottants,.le.positionnement,.les.marges,.le.
remplissage,.les.bordures, etc.
Comme.bien.d’autres.concepteurs,.quand.je.réalise.mes.prototypes.dans.Photoshop,.sous.
Fireworks.ou.dans.le.navigateur.lui-même,.je.travaille.avec.un.calque.de.grille.que.j’active.
et.désactive.à.volonté.(voir.Figure 11.3).