Éducation, société et technologie
Points de contrôle

CSS - Conseils pratiques

jeudi 8 janvier 2004 par André Vincent

MarcArea.com - Conseils CSS

Le site Mezzoblue.com publie une liste de conseils pratiques à propos de l’utilisation des feuilles de styles CSS. Les sites français Shinze et MacArea en ont traduit une bonne partie. Je me permet de les reprendre ici avec de très légères modifications.

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 mise en page.

Réalisez et testez vos CSS dans les navigateurs les plus conformes aux standards 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 ou un rendu incorrect, vous allez vous demander ce qui ne va pas alors que votre code valide bien. Il est plus avisé de tester dans un navigateur qui se conforme aux standards et de la meilleure façon (aujourd’hui : à peu près tous les navigateurs, sauf Internet Explorer) pour voir si vous obtenez ce que vous souhaitez. Votre code sera alors plus proche des standards dès le départ, et vous n’aurez pas autant d’ajustement à faire pour supporter d’autres navigateurs. Ensuite vous pourrez utiliser des bidouilles (hacks) et des adaptations mineures pour adapter votre code à Internet Explorer.

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 valideur 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.

Votre mise en page repose sur des “floats” ? Assurez vous qu’il soient proprement annulés (“cleared”)
Les “floats” sont facétieux, et ne font pas toujours ce que vous en attendez. Si vous êtes dans une situation ou un “float” sort de son contenant ou ne semble pas se comporter comme bon vous semble, assurez-vous que ce que vous souhaitez est correct. Passez voir le tutoriel d’Eric Meyer à ce sujet.

Vos marges se croisent ?(“Margins collapse”) ; essayez les marges internes (“padding”) ou les contours (“border”) pour l’éviter.
Vous pourriez vous battre avec des espaces indésirables là ou vous n’en vouliez aucun, et aucun espace là ou vous en souhaitiez. Si vous utilisez des marges (“margins”), le croisement (“collapsing”) est probablement le coupable. Andy Budd vous dit quoi en attendre.

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 (ou le très désuet 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 a, 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.

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 marges internes et bordures combinés avec une largeur fixe pour un élément.
IE5/Win a un faux modèle de boîte qui casse les bonbons. Voici pourquoi. Il existe heureusement des solutions à ce problème. Mais il est préférable, pour l’instant, d’appliquer l’espacement (padding ou border) sur l’élément parent plutôt que sur l’élément enfant auquel on a définit une dimension fixe (width ou height) - ou l’inverse, selon le cas.

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 de margin, padding et border
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
Il existe des centaines de tutoriaux sur les CSS, mais la meilleure documentaion sur le sujet demeure 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. Disponible au format PDF.

Sources :

Source : MarcArea.com

Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 13460 / 1816296

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site CSS - Feuilles de styles   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 7