La boite à outils du codeur de site web

Javascript »

Quelque soit le projet, il y a toujours un moment où il faut définir des classes ou des identifiants sur lesquels on a déjà travaillés. Or, nous ne sommes pas obligé de réécrire le même code CSS ou (X)HTML encore et encore. Pour éviter les erreurs il est préférable de démarrer avec un fichier reprenant les éléments récurrents plutôt que de réinventer la roue à chaque fois.

C’est là que les framework et les reset CSS pointent le bout de leur nez. En les utilisant, vous avez une feuille de style par défaut et un marquage impeccable, vous gagnez du temps et vous êtes assurés d’avoir un code de bonne qualité dès le départ. Mais qu’est-ce vraiment qu’un framework ? Et en quoi la remise à zéro des styles CSS est-elle utile ?

Jettons un oeil sur les principes sous-jacents aux frameworks CSS, sur leurs avantages et inconvénients, sur les frameworks CSS les plus populaires et la douzaine de feuille de style par défaut que l’on peut utiliser lorsqu’on travaille sur le design d’un nouveau site web.

• Cet article ne couvre pas l’ensemble des outils et techniques concernant les grilles de mise en pages. Vous pouvez approfondir la question du design web basé sur l’utilisation d’une grille en lisant l’article Designing With Grid-Based Approach.
• Vous trouverez des centaines de templates CSS dans l’article Free CSS Layouts and Templates.
• Merci de noter que cet article traite des frameworks CSS, pas des frameworks de développement côté serveur comme CakePHP et encore moins des frameworks de développement web tels que Coda ou Dreamweaver.

Qu’est-ce qu’un framework CSS ?

• Un framework peut être défini comme un environnement ou un cadre de travail fournissant une structure conceptuelle que vous utiliserez pour démarrer vos projets de sites web. Par exemple, au lieu de définir une remise à zéro globale, une ligne de base cohérente pour vos textes, des règles typographiques ou encore des styles de base pour les formulaires à chaque fois que vous commencez un nouveau projet, vous pouvez mettre en place un style par défaut une fois pour toute et vous en servir pour tous vos futurs projets. C’est ce que nous appellons un environnement de travail CSS.
• Un framework CSS n’a pas besoin d’être compliqué ou de tout prendre en charge. Il peut ne contenir qu’un simple jeu de feuilles de style CSS tel que :
  • typography.css pour les règles typographiques de base,
  • grid.css pour la mise en page par grille ou
  • layout.css pour des maquette générales,
  • form.css pour des styles de formulaires basiques,
  • general.css pour tout autre style supplémentaire.
• et ainsi de suite… Vous pouvez aller plus loin dans la segmentation de votre code, par exemple : structure, typographie, présentation, sections spécifiques (menus, navigations), impression, web mobile, contournements spécifiques pour certains navigateurs (via les commentaires conditionnels pour Internet Explorer). Toute la segmentation du code des frameworks CSS les rend généralement pratiques à utiliser, mais peut entrainer une réelle charge serveur supplémentaire à cause du nombre de requêtes http par pages vues [Treading Lightly With CSS Frameworks, par Gary Barber].
• En bref, les frameworks sont un jeu d’outils, de bibliothèques, de conventions et de bonnes pratiques qui tentent de convertir les tâches répétitives en modules génériques réutilisables. Le but est de permettre au designer ou au développeur de se concentrer sur les tâches propres au projet en cours, plutôt que de l’obliger à réinventer la roue à chaque fois. [Framework For Designers, par Jeff Croft].

Les avantages du framework CSS

• Vous augmentez votre productivité et évitez les erreurs les plus courantes. Si vous développez de nombreux sites similaires, un code CSS générique peut radicalement améliorer votre productivité, vous aider à éviter les erreurs communes et simplifier la gestion du code CSS.
• Vous normalisez votre code et vos classes. Vous avez un code CSS et (X)HTML par défaut, ce qui vous permet d’utiliser les mêmes identifiants et noms de classes dans vos projets. Cette permanence du code à travers l’ensemble de vos projets rend vos sites web plus faciles à maintenir sans avoir à vous replonger dans le code source pour savoir comment il fonctionne.
• Vous avez un meilleur flux de production au sein de l’équipe. Si le framework CSS est bien documenté, il peut être utilisé dans l’équipe comme base de travail commune, évitant ainsi les incompréhensions tout en optimisant les flux de production. Par ailleurs, en évitant les erreurs, vous vous donnez les moyens de rendre votre travail dans les temps sans sacrifier à la qualité et sans coût supplémentaire.
• Vous optimisez la compatibilité entre les différents navigateurs. Si votre frameworks CSS est à l’épreuve des balles, vous n’avez pas à vous soucier d’éventuels problèmes de compatibilité avec les navigateurs présents sur le marché. Vous pouvez commencer à coder droit devant !
• Vous avez un code finalisé, propre et bien structuré. Les frameworks CSS fournissent des fondations bien pensées pour vos sites ; en les utilisant vous avez un style de base pour tous vos éléments HTML. N’avez-vous jamais oublié l’élément code ou abbr ? CQFD.

Les inconvénients des frameworks CSS

• Vous aurez besoin de temps pour comprendre le framework. Pour l’utilisateur moyen, [...] le temps requis pour comprendre l’architecture d’un framework l’emporte de loin sur les menus tâches nécesssaires pour partir de rien. [Why I don't use frameworks]
• Vous devrez avoir une connaissance approfondie de l’architecture de votre code. En utilisant un framework CSS externe, vous ne serez pas dispensé d’une profonde connaissance de votre code. Vous devrez savoir exactement comment fonctionne votre environnement de travail. En construisant un site depuis les fondations, vous bénéficiez d’une bonne connaissance de l’architecture de votre site que vous ne pouvez pas apprendre par l’étude ou la documentation. [Why I don't use frameworks]
• Vous héritez des bugs ou des erreurs de quelqu’un d’autre. Si vous utilisez un framework CSS, vous pouvez être amené à corriger les bugs du concepteur du framework en question, ce qui est toujours plus chronophage que de régler ses propres erreurs.
• Vous développez des sites grâce au framework et non pas d’après une solide connnaissance des CSS. Un des grands problèmes posés par les frameworks, c’est que les développeurs finissent par s’attacher au framework lui-même au lieu du code qu’il y a derrière. La connaissance qui en résulte n’est pas réutilisable, ce qui limite fortement les compétences du développeur. [Please Do Not Use CSS Frameworks, par Jonathan Christopher].
• Vous avez du code inutile. Qu’il s’agisse des frameworks pour les langages côté serveur ou des bibliothèques Javascript, il y a souvent une grande partie du code qui ne sera pas utilisée. Si ce n’est pas un souci majeur côté serveur, ceci peut dégrader fortement les performances quand il s’agit d’un framework qui agit côté client. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
• Les CSS peuvent ne pas être sémantiquement correctes. CSS et (X)HTML travaillent main dans la main. (X)HTML est un langage sémantique par nature qu’il est impossible d’englober dans un framework. Chaque projet est unique et entraine une structure de document unique en terme de classes ou d’identifiants. Les frameworks CSS suppriment la grande majorité des valeurs sémantiques dans le document, et à mon avis, ne devraient pas être utilisés. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
• Ignore les spécificités de vos projets web. Le design devrait être basé sur le contenu et non sur un template standardisé réutilisable à volonté.

Les frameworks CSS en détail

YAML (Yet Another Multicolumn Layout)

Le framework (X)HTML/CSS de Dirk Jesse offre toute la panoplie de templates par défaut pour un nombre considérable de projets web du plus simple au plus complexe. YAML est basé sur les standards web et s’accomode de tous les navigateurs web modernes. Tous les bugs de rendu d’Internet Explorer ont été éliminés. YAML est totalement compatible avec toutes les versions d’IE, de la version 5.x/Win à la version 7.0.

A côté des différents templates conformes aux standards, ce framework offre également une feuille de style pour le débuggage, une pour l’impression, ainsi que des outils aussi robustes que variés pour faciliter le développement web avec YAML. Tous les composants CSS du framework ainsi que les différentes méthodes de mise en page sont parfaitement documentés (en Anglais et en Allemand) et agrémentés de nombreux exemples.

Vous avez aussi la possibilité d’utiliser l’interface visuelle YAML Builder pour créer vos maquettes en WYSIWYG dans votre navigateur web. Vous pouvez choisir le Doctype, les éléments de base de votre maquette (#header, #footer, …), le nombre de colonnes et l’ordre dans lequel vous voulez les voir apparaitre dans le code ainsi que leurs largeurs. Le glissé-déposé est possible pour imbriquer à la fois des sous-templates et du contenu factice. Le framework offre la possibilité d’afficher le code complet (marquage XHTML et CSS) et de passer du mode brouillon à la prévisualisation de la maquette finale et vice-versa.

Blueprint

Le framework Blueprint, créé par l’étudiant norvégien Olav Frihagen Bjørkøy, semble très prometteur. Ce framework propose : des fondations solides pour la typographie ; une grille de mise en page facilement personnalisable ; une gestion pratique de la typographie et des lignes de base pour le texte ; une feuille de style pour l’impression. Il utilise notamment des tailles de caractère relatives, un Reset CSS et est supposé ne pas contenir de code inutile. Ce dernier point n’est pas toujours vrai.

Par ailleurs, vous pouvez utiliser le générateur de grille CSS Blueprint pour obtenir des versions plus souples des templates inclus au départ. Que vous ayez besoin de 8, 10, 16 ou 24 colonnes pour votre design, ce générateur autorise désormais plus de flexibilité dans l’utilisation de Blueprint que l’on peut considérer comme le nouveau standard à venir dans l’approche du design web basé sur une grille de mise en page.

Yahoo! UI Library CSS Foundation

Yahoo! UI Library propose un jeu de fichier CSS faisant office de framework. Le noyau YUI CSS inclut notamment : Reset CSS, Base CSS, Fonts CSS et Grids CSS.

Alors que le Reset CSS supprime et neutralise les différences d’affichage des éléments HTML, Base CSS sert de fondation pour un affichage cohérent des éléments HTML sur les navigateurs modernes.

Fonts CSS normalise et permet de contrôler la typographie sans se soucier du rendu entre les navigateurs ; le framework fournit des tailles de caractères et des hauteurs de ligne cohérents, permet à l’utilisateur d’ajuster la taille des polices en gardant une consistance d’un navigateur à l’autre. Fonctionne à la fois en Quirks Mode et Standards Mode.

Grids CSS fournit une sélection de quatre largeurs de page et six modèles prédéfinis avec la possibilité d’empiler ou d’imbriquer des zones subdivisées en deux, trois ou quatre colonnes. Le fichier de 4 kb propose des combinaisons de plus de 1000 maquettes différentes. Le framework autorise la modification de la largeur pour les pages de largeur fixe ; il permet également de gérer les maquettes avec des largeurs exprimées en pourcentage (100%) aussi bien que les largeurs les plus courantes comme 750px, 950px et 974px, tout en permettant de modifier ces chiffres. YUI offre aussi YUI Grids Builder, une interface simple pour personnaliser ses grilles de mise en page.

Vous devez savoir que ces frameworks sont souvent critiqués : leur code est truffé de code inutile et leur marquage est peu sémantique ; par ailleurs, ils génèrent trop de classes, d’ID et de div faisant office de containers pas toujours nécessaires. A noter que Yahoo! UI Library est livré avec une documentation détaillée accompagnée de nombreux exemple, tutoriels, pense-bête (cheat sheet), modèles et outils.

Reset Global CSS

• Le Reset global est nécessaire pour donner à votre site web une allure plus ou moins identique quelque soit le navigateur utilisé. Par défaut, les navigateurs utilisent différentes valeurs de margin, de padding ou de line-height. Le Reset Global assure que tous les navigateurs (du moins, la plupart) afficheront le site de manière identique.
• *{margin:0;padding:0} est une mauvaise pratique. Malheureusement, ce n’est pas une bonne pratique. C’est très difficile pour les agents utilisateurs d’appliquer ces règles pour chaque élément présent dans le document, surtout si ce dernier est très long. Cette pratique peut aussi supprimer de nombreux styles par défaut qui ont leur raison d’être, en particulier quand vous voulez garder les styles par défaut des boutons submit. [CSS Techniques I Use All The Time par Christian Montoya]
• Tripoli Tripoli est un standard CSS générique pour le rendu HTML. En se substituant à la feuille de style par défaut des navigateurs, Tripoli forme une fondation stable pour vos projets web pour uniformiser le rendu entre les navigateurs. Un jeu de fichiers CSS est censé vous donner des fondations solides pour vos designs CSS. Toutes les valeurs par défaut, incluant des douzaines d’éléments (tables, listes, typographie, mais aussi les en-têtes (h1 – h6), les abréviations, les citations, et les formulaires ont été pris en compte pour leur donner une lisibilité optimale et assurer aux textes une présentation bien structurée.
  
• Reset CSS Reloaded d’Eric Meyer. Une remise à zéro qui ne serait pas basée sur le sélecteur universel. Comme Eric Meyer le dit, Les styles devraient lister tous les éléments candidats à la neutralisation et les remettre à zéro exactement comme ils devraient l’être, chacun selon leur nature.
• Reset CSS de Yahoo! UI Library Les fichiers compris dans YUI Reset CSS suppriment et neutralisent le rendu des éléments HTML qui manquent de consistance d’un navigateur à l’autre, en créant un terrain de jeu réservé aux navigateurs modernes et en fournissant des bases à partir desquels vous pourrez déclarer explicitement vos intentions.
• CSS Global Styles Reset par Kyle Neath. Un simple Reset CSS accompagné de classes additionnelles pour améliorer le débuggage.
• CSS Global Reset par Christian Montoya – css L’idéal est d’avoir une liste complète des réglages par défaut à appliquer dès le départ pour pallier les insuffisances de chaque navigateur.
• CSS Global Reset par Mike Rundle.
• Master Stylesheet Cette feuille de style par défaut prend quelques règles typographiques en considération, comme l’espacement entre les niveaux de titres, les paragraphes et blocs de citation (blockquote).

Styles de base CSS

Web Typography: bottom margins of paragraphs and lists par Marko Dugonjic.

Compose To A Vertical Rhythm L’unité de base de l’espace vertical est la hauteur de ligne (line-height). En établissant une hauteur de ligne qui puisse être appliquée à l’ensemble du texte de la page, qu’il s’agisse des titres, du corps du texte ou des notes de bas de page, on obtient un rythme vertical sur laquelle s’appuyer, qui guide le lecteur à travers le contenu.

Baseline Stylesheets par Darren Hoyt.

One clean HTML markup, many layouts… par TJKDesign.

Mike Stenhouse’s CSS Framework Il est possible de séparer les éléments d’une feuille de style en composants réutilisables pour d’autres projets. La suite logique est d’étendre ce principe pour mettre en place un framework CSS, autorisant des développements rapides avec des composants déjà testés. Tout ce qu’il faut pour y parvenir est de créer un jeu de convention de nommage et un template de base assez souple…

Développez votre propre framework CSS !

Garder à votre framework CSS un degré d’abstraction aussi élevé que possible. Habituellement le Reset Global et le formatage de base sont un compromis judicieux qui vous donnera un bon point de départ sans pour autant vous lier à la structure rigide d’un framework.

En développant vos propres styles par défaut, pensez à réduire au maximum le nombre de classes, d’identifiants et d’éléments HTML ; garder à l’esprit l’importance de la signification sémantique des classes que vous utilisez.

Des idées ? Faites-le nous savoir, et partager vos connaissances dans les commentaires !

Article original écrit par Sven Lennartz et Vitaly Friedman de Smashing Magazine.

Fondé en septembre 2006, Smashing Magazine fournit des informations utiles aux webdesigners et aux développeurs. Notre but est d’informer nos lecteurs sur les dernières tendances et techniques dans le monde du développement web, de manière claire, précise et régulière. Nous n’essayons pas de vous convaincre avec la quantité, mais en vous présentant des informations de qualité. C’est ce qui nous rend différent. En fait, nous frappons vos esprit avec l’information qui vous rendra la vie plus facile. Vraiment.

Notes sur la traduction. J’ai essayé de suivre au mieux les intentions de l’auteur et le déroulement de l’article, mise en forme comprise afin de permettre une comparaison rapide avec l’original en cas de doute sur la pertinence de tel ou tel parti pris dans la traduction.

Alors, ces frameworks, on les utilise ou pas ? (notes personnelles en guise de conclusion)

Les frameworks CSS ont le vent en poupe et c’est globalement mérité. Toutefois, si de nombreux arguments militent en leur faveur, ils ne sont pas dépourvus de défauts. En ce qui me concerne, je leur trouve une utilité pédagogique certaine : en les étudiant, on se fait une idée des bonnes pratiques en matière d’organisation des CSS. Pour ce qui est de les utiliser en production, je distingue deux types d’utilisation :

1. Vous savez ce que vous voulez comme structure HTML en terme d’éléments et de colonnes pour adapter les éléments graphiques en conséquence. Pas de souci particulier, dans ce cas de figure les frameworks CSS vous feront gagner beaucoup de temps.
2. Vous commencez par créer votre mise en page pour la découper ensuite en créant uniquement les éléments HTML dont vous avez besoin. Là, l’utilisation des frameworks est déjà moins évidente et vous risquez de passer beaucoup de temps à caler les éléments entre eux.

Après, c’est comme beaucoup de choses, j’imagine qu’avec de la motivation et de l’huile de coude on finit par maitriser le framework et faire face à tous les cas de figure en matière d’intégration CSS.

Finalement, et je trouve celà assez amusant, si le framework est la suite logique du Reset CSS, la suite logique du framework existe déjà depuis longtemps : c’est Dreamweaver avec le respect des standards en plus et la possibilité de gérer le multi-colonnage, pied de page compris…

Stay tuned and mind the gap!

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

En attendant que Mozilla se lance dans la chasse au gaspi, j’ai décidé de changer mes habitudes de travail ; ce qui est toujours une bonne chose. D’autant plus que je ne me suis pas limité à Firefox. J’ai regardé d’un peu plus près les logiciels que j’utilise tout les jours, et voilà le résultat :

Dreamweaver, les rêves ont un prix

Moi :

Quoi ? plus de 60 mo pour faire des pages web ? C’est quoi ton problème ?

Dreamweaver :

En fait c’est plutôt toi qui a un problème. Tu veux créer des pages web avec tout le confort, et bien ça se paie aussi en barrette mémoire…

Moi :

Oui, mais non… même après toutes ces années de vie commune, je te dis « au revoir » et je te remplace par Notepad++ et FileZilla en attendant de trouver un éditeur HTML un peu plus trendy.

FileZilla et Notepad++ ? ça roxe !

Heureusement que je suis habitué à FileZilla depuis pas mal de temps, parce que je regrette déjà le transfert FTP de Dreamweaver. Notamment la mise en cache de l’arborescence d’un site pour placer un fichier sur le site distant sans se soucier de sa destination. Si quelqu’un connait une alternative…

En attendant, et pour éviter d’avoir trop de fenêtres et de logiciels ouverts, J’utilise FileZilla comme explorateur ; Je l’ai configuré pour qu’il ouvre mes fichiers avec Notepad++. L’est pas belle, la vie ?

Par ailleurs, pour me déplacer plus vite dans l’arborescence, j’utilise le gestionnaire de site en dupliquant le site d’origine, puis en spécifiant des dossiers par défaut différents. Pour ce faire, placez-vous dans le répertoire local qui vous intéresse, cliquez sur Fichier -> Copier la connexion dans le Gestionnaire de Site. Il ne vous reste plus qu’à renseigner le répertoire distant en cliquant sur Avancé, et the cat’s in the bag!

Firefox, je t’aimais bien, tu sais…

Moi :

Quoi ? plus de 170 mo pour afficher du html ?

Firefox :

Heu.. c’est à dire que normalement je prends toute la place dans le lit dès que je peux.

Moi :

Qu’est-ce qui t’empêche de te pousser quand d’autres applis débarquent ?

Firefox :

Ouais, heu… au fait, tu sais que je peux te proposer toute une farandole d’extensions géniales, que je suis un gentil panda roux très rare et qu’il faut me protéger ?

Moi :

Évidemment dans ces conditions, je te laisse une chance. Mais attention, à partir de maintenant, pour le surf quotidien je fais un bout de chemin avec Opera ! Allez, fait pas la tête, je t’aime bien quand même :)

Sur un air d’Opera…

Opera semble plus rapide pour afficher les pages, même lorsque plusieurs onglets sont ouverts. Le scrolling sur les longues pages est également plus réactif !

Je redécouvre avec plaisir les notes dans la barre latérale qui me permettront de rédiger mes brouillons sans passer par les Post-It ou le Bloc-notes de Google que j’utilisais d’ailleurs avec l’extension Firefox Google Bloc-Notes…

Du côté de Firefox, on met souvent en avant la Developer Toolbar, qui comme le fait remarquer xuxu, existe aussi sur Opera, avec même l’équivalent du CSS Viewer qui gère en plus l’affichage du code source de l’élément survolé lorsqu’on clique dessus.

Je ne détaillerais pas toutes les fonctions d’Opera, mais le navigateur comporte entre autre :

• Un client mail bien conçu avec une gestion des filtres particulièrement efficace et complète,
• Une gestion des flux RSS,
• Une gestion des contacts,
• L’intégration de composants externes (widget),
• Pléthore de petites attentions ergonomiques qui me font regretter de ne pas avoir écouté IndicaDesBois plus tôt ;)
• Et last but not least, je viens de remarquer que lorsqu’on copie l’adresse d’un lien avec le clic droit, il est possible de la coller et aller dans la barre d’adresse, en une seule opération (c’est plus facile à faire qu’à écrire…). je suis conquis !

… ou sur un air d’operette ?

Opera n’est pas sans problème, et bien qu’il offre des fonctionnalités intéressantes, j’ai commencé une petite liste de défauts qui vont de l’anecdotique au plus embarrassant :

• Les clics sur les cases à cocher ne sont pas toujours pris en compte du premier coup,
• Dans certains cas, il semble que la manipulation du DOM par les scripts présents sur les pages provoque un comportement erratique de l’affichage et du fonctionnement. Notamment en ce qui concerne :
  • Le glissé-déposé dans la gestion des liens de Dotclear,
  • L’utilisation du Bloc-Note de Google,
  • L’affichage de données dans Google Analytics
• La consommation mémoire se rapproche parfois de celle de Firefox lorsque de nombreux onglets sont ouverts…

Alors, Firefox ou Opera ?

Les deux, mon capitaine ! Finalement, ce combat entre Firefox et Opéra aura fait une victime du côté de Dreamweaver ;) Concernant les navigateurs, les défaillances que j’ai rencontrées en utilisant Opéra diminuent mon enthousiasme et ma confiance dans le produit. je dis ça avec quand même quelques réserves de principe car il peut s’agir d’un problème de configuration ou d’un bug qui serait difficilement reproductible ailleurs.

En supposant que les problème rencontrés sur Opera soient passagers, et au vu des différences de rendu CSS entre les deux navigateurs qui persistent, il me semble difficile de ne pas les utiliser tous les deux pour tester les pages en cours d’intégration, comme je le fais avec Internet Explorer d’ailleurs. De toutes manières, quand on fait des sites web, on peut difficilement ne pas lancer le maximum de navigateurs.

Ce qui me fait penser qu’en comptant tous les logiciels nécessaires à la création de pages web (sans même compter Photoshop ou Illustrator qui peuvent faire l’objet d’une session de travail à part), c’est quand même un peu ahurissant d’utiliser autant de logiciels et donc de ressources (mémoire, processeur, espace disque) pour créer des pages web légères…