Travailler avec CSS : conseils pratiques

Le site Mezzoblue.com publie une liste de conseils pratiques à propos de l'utilisation de CSS. J'ai abordé beaucoup des points traités dans la liste sur mon weblog qui est plus orienté technique que théorie. Je vous propose une adaptation plus ou moins libre en français de la liste pour ceux qui ne sont pas très à l'aise avec l'anglais.

Dans le doute, validez.

Lors du débogage, vous allez vous éviter pas mal de prises de tête en validant votre code en premier. Du code XHTML/CSS mal formé peut être la cause de problèmes de mises en page.

Soyez certains que les effets que vous souhaitez utiliser existent.

Il existe des extensions CSS spécifiques à certains navigateurs qui n'existent pas dans la recommandation officielle. Par exemple, si vous essayez de colorer la barre de navigation, vous allez utiliser du code propriétaire et ça ne fonctionnera que sous Internet Explorer Windows. Le validateur vous enverra un message pour vous signaler que le code que vous utilisez n'existe pas, il y a des chances que ce soit du code propriétaire et qui ne fonctionnera pas dans le reste des navigateurs.

Annulez le Flash of Unstyled Content dans IE Win

Le FOUC c'est-à-dire l'instant de contenu non stylé est un phénomène propre à IE Win qui se produit lorsque vous appelez une feuille de style externe via @import. Vous allez remarquer tôt ou tard que IE Win affiche votre page sans feuille de style CSS l'espace d'un court instant. Ce problème peut être fixé.

Spécifiez les unités pour les valeurs qui ne sont pas nulles

Il faut spécifier une unité pour toutes les valeurs que vous utilisez et qui ne sont pas égales à 0 (marges, remplissage, bordures, police de caractère, tailles, largeur, hauteur...), c'est requis par CSS. Zéro c'est zéro, aucune unité n'est nécessaire. Exemple : padding: 0 2px 0 1em;

Evitez les problèmes de cache des navigateurs

Travaillez avec des feuilles de style externes, importées avec @import ou <link>, cela vous évitera des problèmes de cache potentiels avec Safari entre autres (je pense à IE5 Mac).

Testez différentes tailles de caractères.

Les navigateurs avancés tels que Mozilla ou Opera laissent la possibilité à l'utilisateur de modifier la taille du texte. En conséquence, certains utilisateurs vont avoir un affichage des police plus grand ou plus petit que vous. Essayez de trouver un bon compromis pour contenter le plus de monde possible. N'oubliez pas qu'à l'heure actuelle une taille des caractères définie en pixels ne permet pas à l'utilisateur d'IE Win de redimensionner la taille des textes.

L'ordre des liens.

Lorsque vous définissez des pseudo-classes sur les éléments liens, faites le toujours dans cet ordre : Link, Visited, Hover, Active. Un autre ordre et c'est le drame, ca posera des problèmes à certains navigateurs.

Réalisez et testez vos CSS dans les navigateurs les plus avancés avant les autres, pas après.

Si vous réalisez un site et que vous le testez dans un navigateur qui a des bugs connus avec CSS, vous allez vous demander ce qui ne va pas et vous allez dire que finalement CSS ça marche pas et ça craint. Il est plus avisé de tester dans un navigateur qui se conforme aux standards et de la meilleure façon (aujourd'hui : Mozilla/Firebird, Safari, Opera 7) pour voir si vous obtenez ce que vous souhaitez. Ensuite vous pouvez utiliser des hacks et des adaptations mineures pour adapter votre code aux vieux navigateurs.

N'utilisez pas de guillemets autour des chemins/URLs.

Quand vous définissez une image de fond, ou que vous importez une feuille de style externe, n'utilisez pas de guillemets, ils ne sont pas nécessaires et ça vous évitera des problèmes avec IE5 Mac. Exemple : background-image: url(monpicture.jpg);

Essayez d'éviter d'appliquer des remplissage/bords combinés avec une largeur fixe d'un élément.

IE5 Win a un faux modèle de boîte qui casse les bonbons. Il y a une solution à ce problème, mais c'est mieux pour l'instant d'appliquer le remplissage (padding) sur l'élément parent plutôt que sur l'élément enfant qui dispose d'une largeur fixe.

Combinez les sélecteurs.

Garder votre feuille de style légère est important afin de minimiser les temps de chargement, d'obtenir plus de lisibilté et de faciliter la maintenance; utilisez le plus possible le regroupement, l'héritage et les raccourcis.

Encore quelques points théoriques :

Organisez vos fichiers CSS.

Commentez vos CSS et organisez les selon vos besoins. Faites en sorte que votre feuille de style soit la plus aisée à comprendre au cas où vous auriez à la passer à un autre développeur. Quand vous avez un grand nombre de sites à maintenir, avoir des conventions facilite la maintenance.

Utilisez des noms de classes et d'ID basés sur la fonction et pas sur l'apparence.

Si vous créez une classe .textebleu et que plus tard vous devez la passer en rouge, ça n'a plus de sens. Utilisez des classes descriptives comme .citation, .copyright, #pieddepage.

Débogage d'un layout

Pendant le débogage d'un layout, une astuce consiste à affecter temporairement aux éléments soit un fond de couleur (background), soit une épaisseur et une couleur aux bords, soit les deux. Cela permet de bien voir la limite des éléments.

A l'aide

Avant de demander de l'aide à quelqu'un pour le debogage de votre layout, soyez certain que vos fichier (x)html et css sont valide. Utilisez votre ami le validator. Consultez les sites qui font le point sur les bugs des navigateurs, genre Position is Everything.

Raccourcis pour les propriétés

margin: 0; s'applique à tous les côtés.

margin: 0 0 0 0; les valeurs s'appliquent respectivement aux marges du haut, de droite, du bas et de gauche. Sens des aiguilles d'une montre.

margin: 0 1px; correspond à margin: 0 1px 0 1px;

margin: 0 1px 2px; correspond à margin: 0 1px 2px 1px;

Le meilleur tutorial

Pour moi c'est clair, c'est la traduction des recommandation CSS2 du W3C en version française. Tout y est très bien expliqué. Rien qu'avec ce doc, vous pourrez tout réaliser. Après, il faut savoir si votre navigateur supporte toutes les propriétés, et s'il n'y a pas des bugs terribles.