226
Maîtrise des CSS
terrain.de.jeu.neutre.et.uniforme.pour.tous.les.navigateurs.de.niveau A".(http://developer.
yahoo.com/yui/reset/)..Personnellement,.je.préfère.le.fichier.CSS.reset.d’Eric.Meyer,.qui.
est.utilisé.dans.cette.étude.de.cas..Vous.pouvez.télécharger.cette.feuille.de.styles.à.l’adresse.
suivante :.http://meyerweb.com/eric/tools/css/reset/.
J’utilise.une.seule.feuille.de.styles.(master.css).pour.importer.toutes.les.feuilles.de.styles.
utilisées.dans.mes.sites..Je.déclare.en.premier.la.feuille.de.styles.reset,.afin.que.toutes.les.
suivantes.puissent.redéfinir.les.styles.réinitialisés.comme.il.se.doit :.
@import url("reset.css");
@import url("screen.css");
@import ...
Tous.les.styles.pour.l’affichage.sur.écran.sont.listés.dans.screen.css..Dans.le.site.d’étude.de.
cas,.trois.feuilles.de.styles.supplémentaires.sont.utilisées :
•. . autocomplete.css.contient.des.styles.pour.la.fonctionnalité.de.recherche.en.direct..
•. . datepicker.css.contient.des.styles.pour.le.calendrier.sélecteur.de.date.
•. . ie.css,.qui.est.référencée.à.l’aide.de.commentaires.conditionnels.(voir.la.section.suivante),.contient.des.styles.propres.à.Internet.Explorer.
Nous. aurions. facilement. pu. insérer. les. styles. des. fichiers. autocomplete.css. et. datepicker.
css.dans.screen.css,.mais.afin.de.mieux.vous.guider.dans.cette.étude.de.cas,.je.préfère.les.
séparer..
La mise en page et la grille à 1 080 pixels
En. 2006,. j’ai. posté. un. message. concernant. un. dilemme. relatif. à. la. largeur. optimale. des.
moniteurs.dotés.d’une.résolution.de.1 024 × 768 pixels.ou.plus.(voir.http://www.cameronmoll.com/archives/001220.html).. C’est. vers. cette. époque. qu’un. certain. nombre. d’entre.
nous,.alors.que.nous.avions.l’habitude.de.développer.des.sites.optimisés.pour.un.affichage.
en.800 × 600 pixels.depuis.un.certain.temps,.ont.commencé.à.explorer.des.options.pour.les.
résolutions.à.1 024 pixels.
Dans.cet.article,.j’ai.proposé.une.largeur.idéale.de.960 pixels.pour.le.passage.au-delà.des.
800 × 600..Elle.tenait.compte.du.chrome.des.navigateurs.ainsi.que.du.fait.que.bien.des.utilisateurs.ne.naviguent.pas.en.mode.plein.écran..Plus.important.encore,.elle.partait.du.constat.
que.960.est.un.nombre.assez.magique :.il.est.divisible.par.2,.3,.4,.5,.6,.8,.10,.12,.15.et.16..
Imaginez.donc.toutes.les.possibilités.de.quadrillages.(nous.reviendrons.sur.ce.sujet.dans.un.
instant) !
Suite.à.la.publication.de.cet.article,.la.largeur.de.960 pixels.est.quasiment.devenue.le.standard.de facto.pour.les.mises.en.page.à.largeur.fixe.sur.le.Web..Des.plug-ins.Photoshop,.des.
extensions.de.navigateur.et.de.systèmes.d’exploitation.l’adoptent.même.par.défaut..Il.existe.
aussi.un.framework.CSS.complet.établi.sur.une.grille.à.960,.appelé.960.gs.(http://960.gs/)..
Plus.de.trois.ans.plus.tard,.une.nouvelle.question.se.pose :.est-il.temps.d’aller.au-delà.des.
960 pixels ?.Je.ne.suis.pas.certain.de.la.réponse,.mais.cette.étude.de.cas.est.l’occasion.rêvée.
d’explorer.l’une.des.voies.possibles.qui.s’ouvrent.devant.nous..
Maîtrise des CSS
terrain.de.jeu.neutre.et.uniforme.pour.tous.les.navigateurs.de.niveau A".(http://developer.
yahoo.com/yui/reset/)..Personnellement,.je.préfère.le.fichier.CSS.reset.d’Eric.Meyer,.qui.
est.utilisé.dans.cette.étude.de.cas..Vous.pouvez.télécharger.cette.feuille.de.styles.à.l’adresse.
suivante :.http://meyerweb.com/eric/tools/css/reset/.
J’utilise.une.seule.feuille.de.styles.(master.css).pour.importer.toutes.les.feuilles.de.styles.
utilisées.dans.mes.sites..Je.déclare.en.premier.la.feuille.de.styles.reset,.afin.que.toutes.les.
suivantes.puissent.redéfinir.les.styles.réinitialisés.comme.il.se.doit :.
@import url("reset.css");
@import url("screen.css");
@import ...
Tous.les.styles.pour.l’affichage.sur.écran.sont.listés.dans.screen.css..Dans.le.site.d’étude.de.
cas,.trois.feuilles.de.styles.supplémentaires.sont.utilisées :
•. . autocomplete.css.contient.des.styles.pour.la.fonctionnalité.de.recherche.en.direct..
•. . datepicker.css.contient.des.styles.pour.le.calendrier.sélecteur.de.date.
•. . ie.css,.qui.est.référencée.à.l’aide.de.commentaires.conditionnels.(voir.la.section.suivante),.contient.des.styles.propres.à.Internet.Explorer.
Nous. aurions. facilement. pu. insérer. les. styles. des. fichiers. autocomplete.css. et. datepicker.
css.dans.screen.css,.mais.afin.de.mieux.vous.guider.dans.cette.étude.de.cas,.je.préfère.les.
séparer..
La mise en page et la grille à 1 080 pixels
En. 2006,. j’ai. posté. un. message. concernant. un. dilemme. relatif. à. la. largeur. optimale. des.
moniteurs.dotés.d’une.résolution.de.1 024 × 768 pixels.ou.plus.(voir.http://www.cameronmoll.com/archives/001220.html).. C’est. vers. cette. époque. qu’un. certain. nombre. d’entre.
nous,.alors.que.nous.avions.l’habitude.de.développer.des.sites.optimisés.pour.un.affichage.
en.800 × 600 pixels.depuis.un.certain.temps,.ont.commencé.à.explorer.des.options.pour.les.
résolutions.à.1 024 pixels.
Dans.cet.article,.j’ai.proposé.une.largeur.idéale.de.960 pixels.pour.le.passage.au-delà.des.
800 × 600..Elle.tenait.compte.du.chrome.des.navigateurs.ainsi.que.du.fait.que.bien.des.utilisateurs.ne.naviguent.pas.en.mode.plein.écran..Plus.important.encore,.elle.partait.du.constat.
que.960.est.un.nombre.assez.magique :.il.est.divisible.par.2,.3,.4,.5,.6,.8,.10,.12,.15.et.16..
Imaginez.donc.toutes.les.possibilités.de.quadrillages.(nous.reviendrons.sur.ce.sujet.dans.un.
instant) !
Suite.à.la.publication.de.cet.article,.la.largeur.de.960 pixels.est.quasiment.devenue.le.standard.de facto.pour.les.mises.en.page.à.largeur.fixe.sur.le.Web..Des.plug-ins.Photoshop,.des.
extensions.de.navigateur.et.de.systèmes.d’exploitation.l’adoptent.même.par.défaut..Il.existe.
aussi.un.framework.CSS.complet.établi.sur.une.grille.à.960,.appelé.960.gs.(http://960.gs/)..
Plus.de.trois.ans.plus.tard,.une.nouvelle.question.se.pose :.est-il.temps.d’aller.au-delà.des.
960 pixels ?.Je.ne.suis.pas.certain.de.la.réponse,.mais.cette.étude.de.cas.est.l’occasion.rêvée.
d’explorer.l’une.des.voies.possibles.qui.s’ouvrent.devant.nous..