Le design à la mode web 2.0, c’est un design 100% CSS et sans tableaux (sauf pour les tableaux de données évidemment). Mais avec les CSS, si on ne prend pas les mesures nécessaires dés le début, on rencontre beaucoup de problèmes et à chaque étapes du design. Tout d’abord quand on règle la mise en page globale ensuite quand on règle les styles de texte et enfin quand on contrôle la compatibilité entre navigateurs.Pour éviter beaucoup de ces problèmes, il existe quelques petites astuces qui vous feront gagner un temps précieux.

Réinitialisation des valeurs CSS W3C

Malheureusement, les navigateurs ne respectent pas parfaitement les règles CSS établies par le W3C. La taille par défaut des polices, les polices par défaut, la hauteur des lignes, les marges, … Autant de différences qui pourront facilement s’avérée gênantes.

Pour corriger ça, quelques styles supplémentaires au début de votre feuille de style permettront d’homogénéiser les valeurs par défaut aux normes W3C.

Pour cela, la feuille de style préconisez par le W3C est idéale : http://www.w3.org/TR/CSS21/sample.html

Commencer par les styles globaux

Si vous attendez d’avoir fini votre design pour modifier les marges de vos titres, vous risquez d’avoir de mauvaises surprises. Commencez toujours par définir les styles des tags avant tout et surtout avant de définir les styles de classes. Les classes ne sont là que pour modifier les styles globaux déjà définis.

Clearfix

L’horreur absolu quand vous réaliser votre design, ce sont les interactions entre float et clear. Et selon votre design, vous pourrez rencontrer deux problèmes assez gênants.

Le premier problème est qu’un élément en flottant à gauche ou à droite ne redimensionne pas son parent. Un exemple simple :

Dans cet exemple, le flottant dépasse du cadre du parent. Pas très esthétique… Heureusement, le simple ajout d’une classe CSS au parent peut arranger ça.

Contexte de formatage

La notion de contexte est méconnue et pourtant rapidement indispensable. En CSS, le contrôle des positions avec float et clear est absolu, cela veut dire que quelque soit votre code HTML, définir un clear:left renverra l’élément à gauche du document et non seulement à gauche de son parent. Encore un exemple :

Pour définir qu’un élément devient la nouvelle limite, il suffit de lui appliquer un des styles suivants :

• float:left ou float:right
• position:absolute ou position:fixed
• overflow:auto, overflow:hidden ou overflow:scroll
• display:table-cell ou display:inline-block

Dans l’ultra majorité des cas, les overflow s’avèrent être le plus pratique. Si votre zone n’a pas de dimension fixe, les deux fonctionneront, si vous fixer les dimensions, à vous de choisir si en cas de dépassement vous préférez que le texte disparaisse (overflow:hidden) ou si vous préférez voir des scrollsbars (overflow:auto);

Malheureusement Internet Explorer ne l’entend pas comme ça. Mais heureusement, il suffit d’ajouter zoom:1.

Conclusions

Voilà, avec ces quelques conseils et lignes de codes, vous devriez pouvoir aborder le CSS avec beaucoup plus de facilité.

Il existe surement d’autres techniques du genre et je serais ravi de les connaître. Donc n’hésitez pas à les laisser en commentaire, A plusieurs on devrait réussir à se rendre le CSS aussi simple qu’il est sensé l’être.