Organisation de la feuille de style▲
De nombreux concepteurs et développeurs Web ne réfléchissent pas trop à la façon d'intégrer les feuilles de style dans leurs documents, mais c'est vraiment un art. Avec les bonnes méthodes, vous pouvez immédiatement obtenir de nombreux bénéfices de l'amélioration progressive.
Utiliser plusieurs feuilles de style▲
Il y a de nombreux avantages à faire de petites séparations dans vos styles. Il est évident que les feuilles de style qui ont plus de 1500 lignes sont un peu difficiles à maintenir et les séparer peut améliorer votre travail (et votre équilibre mental). Un autre bénéfice rarement pris en compte est la meilleure cohérence de présentation pour les types de médias ciblés que vous pourrez obtenir grâce à cette séparation.
Envisagez de prendre votre fichier main.css, qui contient toutes les règles de style pour votre site, et de le séparer en feuilles de style individuelles contenant les informations de typographie, de mise en page et de couleur. Nommez les fichiers en conséquence : type.css, layout.css, color.css.
Une fois que vous avez fait ça, vous pouvez d'un coup de baguette magique fournir automatiquement une présentation "bas-de-gamme" sur les anciens navigateurs (comme Internet Explorer 5 sur Mac) et sur de nombreux autres navigateurs sans support solide pour les mises en page CSS. Comment ? En fait, tout dépend de la façon dont vous ajoutez un lien vers les fichiers. Supposons que nous commençons avec un fichier main.css inclus à travers un élément link :
<link rel="stylesheet" type="text/css" href="main.css" />Tout d'abord, nous allons le séparer en plusieurs appels vers nos trois feuilles de style contextuelles :
<link rel="stylesheet" type="text/css" href="type.css" />
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="color.css" />Par le passé, nous sommes nombreux à avoir utilisé une valeur media "screen,projection" pour empêcher la récupération des styles de mise en page par Netscape 4.x, mais il y a une meilleure méthode. Pourtant, avant de regarder cette solution, pensez aux autres types de média.
Travailler avec d'autres types de médias▲
Puisque la mise à disposition du contenu est le principal centre d'intérêt de l'amélioration progressive et que vous souhaitez donner un résultat "amélioré" à tous les systèmes qui le supporteront, nous devons vraiment commencer à penser au delà du navigateur ; plus important, nous devons penser à l'impression et à la mobilité.
Malheureusement, le marché de la mobilité est toujours fragmenté et immature (ne me laissez pas embrayer sur tous les navigateurs de poche qui pensent qu'ils peuvent restituer les styles destinés au type de media "screen"). Par conséquent, un débat sur les tenants et aboutissants d'une gestion progressivement améliorée de ce média pourrait prendre plusieurs articles, si ce n'est un livre entier. Mais ne désespérez pas : les choses commencent à prendre forme dans le monde mobile et certaines personnes très intelligentes commencent à rassembler des ressources pour vous aider. Mais pour gagner du temps et dans l'intérêt de notre santé mentale collective, nous nous concentrerons sur l'impression.
Maintenant, normalement, nous pouvons ajouter des styles d'impression avec un autre élément link :
<link rel="stylesheet" type="text/css" media="print" href="print.css" />Classiquement, cette feuille de style devrait contenir toutes nos règles liées à l'impression, y compris les règles de typographie et de couleur. Dans le cas de la typographie en particulier, les règles de notre feuille de style d'impression reflètent très probablement celles de notre feuille de style principale. En d'autres termes, nous avons beaucoup de duplication.
C'est là que la séparation entre les styles de typographie et de couleur et les styles de mise en page montre son grand avantage : nous n'avons plus besoin de ces règles dans notre feuille de style d'impression. En plus de ça, nous pouvons utiliser une autre petite technique organisationnelle pour améliorer l'extensibilité de notre site et cacher certains styles de mise en page à des navigateurs problématiques.
Commençons par revisiter nos feuilles de style. Prenez ce qui suit :
<link rel="stylesheet" type="text/css" href="type.css" />
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="color.css" />Pour l'instant, puisque nous n'avons pas de type de média de déclaré, Netscape 4.x lira tous les styles de ces trois fichiers. Cependant nous pouvons utiliser sa compréhension vraiment basique du CSS contre lui et aller plus loin dans l'organisation de nos règles de style en déplaçant tous les styles que layout.css contient dans une nouvelle feuille de style, nommée judicieusement screen.css. Enfin, nous mettons à jour le contenu de layout.css pour importer screen.css et NS4.x et ses confrères n'iront pas plus loin (puisqu'ils ne comprennent pas la directive @import).
@import 'screen.css';Il reste encore une petite marge pour l'amélioration : il nous faut déclarer le média cible de la feuille de style. Nous le ferons en ajoutant un type de média à la déclaration @import :
@import 'screen.css' screen;Le problème est qu'IE7 et les versions précédentes ne comprendront pas cette syntaxe et ignoreront la feuille de style. Toutefois, si vous voulez fournir également ces styles pour ces navigateurs (ce que vous voudrez probablement), vous pouvez le faire assez facilement en utilisant les commentaires conditionnels que nous verrons plus loin. Ceux d'entre vous qui ont des yeux de lynx auront aussi remarqué l'utilisation des guillemets simples (') au lieu de guillemets doubles (") autour du nom de la feuille de style. C'est une astuce habile qui permet de faire ignorer une feuille de style à IE5/Mac. Et puisque la mise en page CSS de IE5/Mac est vraiment sommaire (particulièrement quand il s'agit de contenus flottants ou de positionnements), cacher des règles de mise en page est une façon tout à fait acceptable de le traiter. Après tout, il aura toujours les informations de couleur et de typographie, qui ne comptent pas pour rien.
En utilisant la même technique, nous pouvons importer notre fichier print.css (qui contient, vous l'avez deviné, les règles de mise en page spécifiques à l'impression).
@import 'screen.css' screen;
@import 'print.css' print;Non seulement à cette étape nous avons correctement organisé nos feuilles de style, mais nous avons aussi un moyen efficace d'améliorer progressivement la présentation de notre site.
Et maintenant la question à 10M $ : comment faire avec IE6 ?▲
Pour beaucoup de personnes, IE6 est le nouveau Netscape 4 : tout le monde souhaite simplement qu'il disparaisse.
Nous passerons la litanie des problèmes avec IE6 ; ces problèmes sont bien documentés et, honnêtement, pas si difficiles à contourner. En outre, l'adoption d'IE7 a été particulièrement rapide (spécialement dans le marché de consommation) et IE8 est déjà en béta, ce qui veut dire qu'un jour, nous pourrons vraiment dire adieu au 6 vieillissant.
Que ce soit volontaire ou pas, Microsoft a fourni un outil génial pour faciliter l'amélioration progressive quand il a sorti IE5 : les commentaires conditionnels. Ces ingénieux petits bouts de logique (qui deviennent de simples commentaires HTML dans tous les autres navigateurs) nous permettent non seulement de limiter certains morceaux de balises à IE, mais aussi de les limiter à des versions spécifiques d'IE.
En tant que développeurs conscients des standards Web, nous devrions toujours commencer par tester nos designs dans les navigateurs disponibles les plus respectueux des standards et ensuite apporter des corrections pour les navigateurs qui ont juste besoin d'un petit coup de pouce pour rentrer dans le droit chemin. Les organisations de chacun sont différentes, mais je trouve préférable de commencer chaque projet avec une série standard de fichiers. Ma série de base inclus les fichiers suivants :
- type.css
- layout.css
- screen.css
- print.css
- color.css
Ensuite, en fonction des besoins du projet, j'ajoute les fichiers CSS spécifiques d'un navigateur qui contiennnent les "coups de pouce". Dans la plupart des projets il s'agit de fichiers ie7.css et ie6.css, toutefois si le projet nécessite un support d'une version d'IE inférieure à 6, je crée le fichier correspondant de la même façon (ie5.5.css, etc.). Avec ces fichiers en place, je commence à ajouter mes règles de style à la feuille de style générale de ma série de base.
Je commence tous mes tests CSS dans Mozilla Firefox parce que j'écris la majeure partie de mon CSS en utilisant la barre latérale d'édition CSS. Dès que j'obtiens une présentation correcte dans Firefox, je fais chauffer les autres navigateurs pour y jeter un oeil. La plupart la traitent parfaitement, puisqu'ils gèrent intuitivement les standards Web. Et c'est au tour d'IE7. Le plus souvent, je ne rencontre pas beaucoup de problèmes, mais il y a parfois besoin de passer par hasLayout ou de réparer d'autres petits pépins de présentation. Plutôt qu'ajouter ces corrections dans ma série de base de feuilles de style, je les ajoute à ie7.css et lie ensuite ce fichier dans le HEAD du document, dans un commentaire conditionnel :
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->Ce commentaire conditionnel adresse cette feuille de style particulière à toute version d'IE inférieure ou égale à 7 (lte = less than or equal to). Donc, si quelqu'un visite cette page dans IE7, il aura les corrections qui y sont appliquées, mais s'il vient avec une version plus récente, qui peut avoir corrigé ces problèmes de restitution comme IE8 l'a fait en abolissant hasLayout, la feuille de style sera ignorée. Dans l'autre sens, si quelqu'un consulte cette page avec IE6, il aura les corrections de cette feuille de style, ce qui est parfait puisque les erreurs de restitution présentes dans IE7 sont probablement aussi présentes dans IE6. Un tel correctif permettrait de pallier l'incapacité d'IE (dans les versions 7 et inférieures) à comprendre un @import avec type de média (comme mentionné ci-dessus) en ajoutant un @import de screen.css au début d'ie7.css sans déclarer de type de média, ce qui permet d'importer les styles ratés au premier passage.
Une fois que j'ai terminé d'ajouter les correctifs pour IE7, j'ouvre IE6 et regarde s'il nécessite aussi un petit coup de pouce. Si le besoin se fait sentir, j'ajoute un autre commentaire conditionnel au document, dirgeant vers ie6.css.
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->J'ajoute alors simplement les corrections nécessaires pour IE6 à cette feuille de style et elles seront ignorées par IE7, mais seront toujours diffusées sur IE5.5.5, etc.
Utiliser les commentaires conditionnels de cette façon vous permet de gérer facilement les navigateurs ciblés pour votre projet et d'éviter les bidouilles dans vos fichiers CSS .
Autres considérations▲
Les améliorations progressives en CSS ne se limitent pas à la façon de lier nos feuilles de style à nos documents : nous pouvons aussi appliquer ce concept à notre façon d'écrire le CSS.
Etudions par exemple le contenu généré. Tous les navigateurs ne le supportent pas encore, mais c'est un excellent moyen d'ajouter des morceaux supplémentaires de design ou de texte qui ne sont pas nécessaires à l'utilisation de la page, mais qui fournissent un plus visuel ou une autre amélioration.
Par exemple, prenez ce simple formulaire de contact :
En le codant, vous avez été tenté d'ajouter les deux points (:) dans l'élément label. Pourquoi ? Ajoutent-ils quelque chose aux labels ? Non. Bien qu'ils servent un objectif, fournir un repère visuel supplémentaire aux utilisateurs, ils sont superflus pour le label et devraient être exclus :
<form id="contact-form" action="#" method="post">
<fieldset>
<legend>Contactez-nous</legend>
<p>Envoyez-nous un message. Tous les champs sont requis.</p>
<ol>
<li>
<label for="contact-name">Nom</label>
<input type="text" id="contact-name" name="name" />
</li>
<li>
<label for="contact-email">Email</label>
<input type="text" id="contact-email" name="email" />
</li>
<li>
<label for="contact-message">Message</label>
<textarea id="contact-message" name="message" rows="4" cols="30"></textarea>
</li>
</ol>
<button type="submit">Envoyer</button>
</fieldset>
</form>Le contenu généré est un moyen parfaitement approprié de les rajouter au document :
label:after {
content: " :";
}Une telle approche du formulaire nous donne la souplesse de supprimer ces décorations de l'ensemble de notre site simplement en modifiant le CSS sans avoir à toucher tous les formulaires (et oui, je l'ai fait). Cette technique se dégrade également bien, puisque le formulaire n'est pas inutilisable sans les deux points - un exemple parfait d'amélioration progressive.
Vous pourrez aussi trouver qu'écrire des règles avec des sélecteurs plus avancés aide à améliorer progressivement votre site en réservant certains styles à des navigateurs plus évolués. Un bon exemple est le sélecteur d'attribut, qui n'est pas compris (et donc ignoré) par IE6 et les autres navigateurs de cette génération et des précédentes. Egor Kloos joue magnifiquement avec ce concept dans sa contribution au CSS Zend Garden intitulée "Gemination".
Comment a-t-il fait ? Eh bien, ce qui suit est un échantillon légèrement modifié de son code :
/* <= IE 6 */
body {
margin: 0;
text-align: center;
background: #600 none;
}
/* IE 7, Mozilla, Safari, Opera */
body[id=css-zen-garden] {
margin: 100px 0 0;
padding: 0;
text-align: center;
background: transparent url(squidback.gif);
}Les différences sont frappantes et illustrent superbement une façon d'implémenter l'amélioration progressive dans vos CSS.
Dans la même veine, Andy Clarke s'est amusé avec IE6 sur son site. En exploitant les filtres disponibles dans IE et en utilisant certains commentaires conditionnels, il a été en mesure de vider son site de toute couleur et de fournir des images alternatives pour une véritable expérience "basse qualité".
La technique utilisée pour griser l'image passe par l'ajout de la déclaration suivante dans une feuille de style destinée à IE6 (et versions antérieures) en utilisant des commentaires conditionnels :
/* =img for Internet Explorer < 6 */
img {
filter: gray;
}Bien que ces deux exemples utilisent plus d'astuces que ce dont vous aurez besoin dans votre travail quotidien, ils servent assurément d'excellentes "preuves de concept" sur les possibilités d'utiliser l'amélioration progressive dans vos CSS.
Tout rassembler▲
Comme nous l'avons vu, il y a de nombreuses façons de commencer à implémenter l'amélioration progressive dans votre site en utilisant les CSS. Pour commencer, la plus simple et probablement la meilleure méthode est d'organiser vos feuilles de style et de prendre des décisions averties sur la façon de connecter ces feuilles de style à votre document. Gérer les particularités d'IE est un jeu d'enfant une fois que vous avez compris la puissance des commentaires conditionnels et vous pourrez réaliser des modifications plus granulaires dans le CSS lui-même si vous discernez les sélecteurs à choisir et les situations dans lesquelles les utiliser.
Fort de ces connaissances, vous devez être sur la bonne voie pour devenir un expert en amélioration progressive. Retrouvez-moi la prochaine fois, nous traiterons de l'amélioration progressive avec JavaScript.