Photo de Bensonkua depuis Flickr

Définition

Vous en avez peut être déjà vues sur certains sites officiels, souvent présentées au format PDF, sur une ou plusieurs pages, les cheat sheets, ou antisèches en français, sont un condensé des informations pas forcément facile à retenir, ou des informations que l’on se doit de connaître.

Ou les trouver ?

Plutôt que de les trouver par hasard ou de les rechercher pendant des heures, plutôt que de faire un aide-mémoire pour noter les urls de ces cheat sheets, je vous conseille de chercher à la source, puisque quelques sites en recensent plusieurs centaines triées par thèmes :

• Cheat Sheets
• Tech cheat sheets

Bien sûr ces différents sites présentent pour la plupart les mêmes contenus, à vous de voir celui qui vous convient le mieux. Pour ma part j’utilise Pushing Buttons.

Les mémentos

Très utiles aussi, la collection de mémentos chez Eyrolles, c’est l’équivalent des cheat sheets sur support physique, dans un format réduit et plastifié, ces fiches de très bonne qualité sont rédigées par des experts en la matière. En voici quelques uns :

• Mémento PHP5 & SQL de Cyril Pierre de Geyer et Guillaume Ponçon
• Mémento XHTML de Raphaël Goetter
• Mémento CSS de Raphaël Gotter

Il en existe d’autres sur les sujets suivants :

• Unix/Linux de Isabelle Hurbain
• Ergonomie web d’Amélie Boucher
• Sites web, les bonnes pratiques, d’Elie Sloïm
• MySQL de Rodolphe Rimelé

Conclusion

Avec toutes ces fiches vous voilà paré pour vos prochains développements. Avez vous vous aussi quelques sites de références pour les antisèches ?

Sur le même thème

• Bien écrire HTML & XHTML
• Bien utiliser les feuilles de style (CSS)
• Livre : Pro Git
• Bien développer en PHP (partie 1)
• Veille techno Web de A à F (partie 1)

Définition

• Définition de CSS

Photo de Courambel depuis Flickr

Historique

Les feuilles de style sont nées dès l’invention du web, mais elles étaient à l’origine destinées à l’internaute lui même qui pouvait ainsi faire sa propre mise en page pour son confort de lecture personnel. Plusieurs implémentations ont ensuite été proposées par les différents éditeurs de navigateurs web, puis à la création du W3C, La norme CSS1 est créée dès 1996. Les différents navigateurs de l’époque l’implémentent de manière partielle et faussée.
En 1998, le W3C publie la recommandation CSS2, elle aussi ne sera que partiellement utilisable et buggée notamment dans Internet Explorer 6.
A partir de 2001 une version CSS2.1 corrige les problème de la version précédente en intégrant les usages réels des navigateurs.

Aujourd’hui la norme 3.0 est en cours d’écriture, mais depuis 1999 ! Aucun module n’est fini et les navigateurs n’appliquent les nouvelles fonctionnalités que de manière expérimentale.

Pour plus d’information lisez l’historique complet des feuille de style en cascade sur Wikipédia.

A quoi ca sert

Les feuilles de style en cascade, souvent abréviées CSS, sont un langage informatique normalisé par le W3C qui permet de mettre en forme les document HTML et XML et donc XHTML de façon simple et homogène.

Le principe réside dans la séparation entre le contenu et la mise en forme. Il est ainsi très simple de changer la mise en forme sans toucher au contenu ou d’appliquer une même mise en forme sur une multitude de contenus. On peut ainsi écrire le contenu sans se soucier de la mise en forme et changer la mise en forme uniformément sur toutes les pages d’un site en ne modifiant que le fichier CSS.

Les styles peuvent être définis dans un fichier séparé du contenu HTML, au début d’un fichier HTML, ou directement dans les balises HTML. La première solution est la meilleure et permet une bonne séparation du contenu et de la mise en forme. L’héritage, permet aussi de définir des propriétés générales et d’autres plus précises qui héritent des propriétés générales de leurs parents, ainsi pas besoin de tout redéfinir pour chaque balise.

Les feuilles de style sont définissables par média. Ainsi vous pouvez définir une image pour un affichage sur un écran et ne pas l’afficher pour une impression sur papier. L’internaute vous en sera reconnaissant.

Un très bon exemple de l’utilisation que l’on peut faire des feuilles de style est sans conteste le site caméléon CSS Zen Garden, qui change complètement de style au gré des propositions de mise en page de contributeurs aux goûts divers et variés.

Comment apprendre ?

Bien sûr il faut connaître la référence française en la matière depuis déjà quelques années : Alsacréations, vous y trouverez toutes les informations nécessaires, des tutoriels, et un forum accueillant ou l’on vous aidera volontiers.

Je vous conseille aussi un bon tutoriel CSS de Joe Gillespie traduit par Pompage

Les normes

Les normes sont toutes accessibles sur le site du W3C, certaines sont traduites en français, je vous livre ici les principales à connaître ou à découvrir.

• La Voir norme CSS 2.1 officielle en anglais
• La norme CSS 2 traduite en français
• Voir les documents de travail de la norme CSS 3 en anglais

Les bonnes pratiques

• Utilisez tout le temps des feuilles de style, ne définissez jamais vos styles directement dans une page
• Valider les fichiers afin d’être sûr qu’il respectent les normes
• Utiliser les hacks avec parcimonie, respectez les standards, les navigateurs suivront
• Essayer d’avoir un seul fichier CSS par média sur un site en production, afin d’optimiser le temps de chargement des pages
• Utilisez une feuille de style par média afin de définir des propriétés spécifiques à chaque rendu
• Utilisez un framework ou un fichier « reset » pour gagner du temps, ne réinventez pas la roue à chaque nouveau site

Les outils

Validateur

Comme pour HTML, il est parfois bien utile d’avoir un avis rapidement sur la validité du code, afin de traquer les petites imperfections que l’on a pu laisser passer.

• Valider des feuilles de style

Frameworks

Pour vous faciliter la tâche, les frameworks CSS vous permettent aujourd’hui de gérer la base de votre feuille de style. Ils permettent d’initialiser les styles afin de les rendre similaires d’un navigateur à l’autre, ils définissent un layout générique utilisable facilement, le mot clé est la simplicité et la réutilisabilité.

• Blueprint
• Yahoo library CSS tools

A noter que pour les librairies Yahoo, vous pouvez faire un lien directement vers les serveurs de Yahoo et en pas héberger les scripts. Ainsi le fichier étant le même que celui de Yahoo et une multitude d’autres sites, il est probable que l’internaute visitant votre site l’ai déjà en cache dans son navigateur.

Extensions Firefox

• Web developper toolbar
• Firebug

La barre d’outil « developper toolbar » est un incontournable du développeur, elle permet bien plus que la manipulation des CSS, mais sur ce point qui nous intéresse, elle
autorise par exemple la désactivation des styles, ou le changement de feuille de style à la volée.
Firebug permet d’inspecter au plus profond des feuilles de style et d’ajouter, modifier ou supprimer des propriétés, de les visualiser graphiquement, là aussi cet outil vous réserve bien d’autre utilisations pour le code HTML et Javascript principalement.

Ces outils feront l’objet de prochains articles plus détaillés.

Bibliographie

Encore un excellent mémento, et un livre référence indispensable pour creuser le sujet.

• Mémento CSS de Raphaël Gotter
• CSS par Éric Meyer

Vous pourrez aussi approfondir le sujet avec un livre sur l’utilité des standards

• Design web : Utiliser les standards, CSS et XHTML

Ce dernier livre date peu être un peu, et est en rupture de stock, mais on le trouve d’occasion, et à la vitesse ou avancent HTML et CSS, et pour les principes qu’il défend, il est loin d’être dépassé.

Les sites de référence

• Alsacréations
• Tutoriel CSS sur Pompage.net

Pour aller plus loin avec les CSS

Une nouvelle approche des CSS fait désormais son apparition, CSS Orienté Objet ou OOCSS. Je vous laisse vous faire votre propre idée…

Vous avez vous aussi certainement des astuces et de bons outils pour travailler les CSS, j’attends vos remarques avec impatience pour partager avec vous sur ce sujet très intérressant.

Sur le même thème

• Bien écrire HTML & XHTML
• Les plugins Firefox : XRefresh
• Les générateurs de sprites CSS
• Livre : CSS3 pour les webdesigners
• Optimiser son site web