Dans le doute… validez :

Lorsque vous “débuguez”, vous pouvez éviter le mal de tête tout simplement en validant tout d’abord votre code. Du code XHTML/CSS incorrect peut créer des problèmes de mise en page.

Assurez-vous que l’effet désiré existe.

Il existe des extensions (propriétés) propres à certains navigateurs ne faisant pas partie de la norme. Si vous essayez d’appliquer des “filters” ou encore de modifier l’aspect des ascenceurs, vous travaillez avec du code propriétaire qui ne marchera que dans IE. Si le validateur vous indique que le code utilisé est undéfini, il y a de chances que ce soit du code propriétaire, et ne marche pas pour tous les navigateurs

Votre mise en page repose sur des “floats” ? Assurez vous qu’il soient proprement coupé (“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 pouvez vous avec des espaces la 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.

N’utlisez pas de guillemets pour annoter vos URLs

Lorsque vous appliquez un fond d’image, chargez un élément externe, resistez à la recommandation d’embaler vos chemins avec des guillemets. Elles ne sont pas nécessaires et IE5/Mac bloquerai.

Essayez d’éviter d’appliquer des bordures, des marges internes et une dimension fixe à un élément.

Le modèle de boîte d’IE5 est incorrect, ce qui met tout en l’air. Il y a des astuces pour résoudre ce problème, mais le meilleur moyen d’outre-passer ce problème est d’appliquer la marge interne à l’élément parent plutôt qu’à l’élémen enfant qui a une dimension fixe.

Évitez le flash de contenu non stylé

Si pour vos styles externes vous utilisez uniquement des imports de style (”@import”), un jour ou l’autre vous remarquerez dans IE, un flash rapide de contenu non mis en forme juste avant que a feuille de style soit appliquée. Ceci peut être évité.

Lorsque vous travaillez sur le style des liens, méfiez vous des ancres

Si vous utilisez une ancre classique dans votre code (<a name="ancre">), vous noterez que cette ancre capte les pseudo-classes “:hover” et “:active”. Afin d’éviter cela il vous sera nécessaire d’utiliser plutôt des “id” pour vos ancres, ou de travailler vos styles avec des détours de syntaxe : “link:hover, :link:active”.

Souvenez-vous LoVe|HAte pour vos liens

Pour spécifier vos pseudo-classes de liens (“:hover” etc.), utilisez l’ordre suivant: Link, Visited, Hover, Active. Aucun autre ordre ne fonctionnera correctement. Si vous souhaitez aussi utiliser “:focus”, il vous faut modifier l’ordre ainsi :LVHFA.

Souvenez-vous des bords TRouBLes

Les razccourcis de définition de bordures, marges et marges internes utilisent un ordre précis : Top, Right, Bottom, Left. Ainsi “margin: 0 1px 3px 5px;” donne pour résultat, pas de marge en haut, 1 pixel pour les marges bas et gauche, et ainsi de suite. (ndlt : je préfère, en ce qui me concerne utiliser le moyen mnémotechnique du sens des aiguilles d’une montre).

Spécifiez une unité pour les valeurs différentes de Ø

Les CSS requièrent que soit spécifié une unité pour chaque mesure, comme les polices, les marges, et les dimensions. Le comportement de certains navigateurs lorsqu’aucune dimensions n’est spécifiée ne doit pas être une référence. Ø = Ø que ce soit en “px”, en “em” ou en n’importe quoi d’autre. Aucune unité n’est nécessaire. Exemple : “padding: 0 2px 0 1em;”

Testez différentes tailles de polices

Les navigateurs évolués comme Mozilla et Opera permettent de redimmensionner le texte quelque soit l’unité utilisée. Certains utilisateurs peuvent utiliser une police par défaut plus grande que la vôtre; essayez de correspondre à la gamme la plus large possible.

Testez embarqué; publiez importé

Si vous travaillez avec un style embarqué dans votre source HTML, vous éliminez les erreurs potentielles de cache pour vos tests. Ceci est très important lorsque vous travaillez avec certains navigateurs sur Mac. Mais veillez à mettre vos CSS dans un fichier externe, importé par “@mport” ou “<link>” avant de publier.

Élaborez et testez vos CSS dans les navigateurs les plus avancés avant des les tester dans d’autres, mais pas après.

Si vous construisez un site dans un navigateur approximatif, votre code repose sur l’approximation de ce navigateur. Vous seriez alors frustré de tester dans un navigateur plus proche des standards, affichant un rendu incorrect. Plutôt que cela, commencez par la perfection et ajustez pour les navigateurs les moins capables. 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. Aujourd’hui cela signifie, Mozilla, Safari ou Opera.