6 techniques CSS qu’il faut connaitre

Trevor Davis a publié un article très utile pour tous les designers web dans lequel il détaille, exemples à l’appui, 6 techniques CSS indispensables dont voici la liste:

1. Fixer la taille de base de votre police de caractère
   En positionnant votre font-size dans la balise body à 62.5% (soit 10px pour 1em), vous vous facilitez la vie: 1.2em = 12px, 1.4em = 14px, etc…
2. Supprimer toutes les marges par défaut
   Certaines balises ayant des marges (et/ou padding) pré-définies, le meilleur moyen pour contrôler totalement votre design est de toutes les ramener à 0 dans un premier temps.
3. Positionner un float pour clearer un float
   Technique indispensable pour bien gérer ses colonnes avec des div.
4. Remplacement d’un texte par une image
   Si vous utilisez une image en header par exemple, mais que vous souhaitez qu’un texte s’affiche à la place dans le cas où les images sont désactivées (ou lors d’un CSS naked day), alors cette technique est faite pour vous.
5. Fausses colonnes
   A utiliser en complément du point #3 pour donner l’impression que toutes les colonnes sont de la même hauteur.
6. CSS Sprites
   Permet de faire des rollovers d’images en n’appelant (donc ne chargeant) qu’une seule image depuis le serveur (le principe étant d’afficher des morceaux différents de la même image au passage de la souris).

J’utilisais déjà une bonne partie de ces techniques qui sont parmi les plus élémentaires lorsqu’on commence à jouer avec les CSS, mais c’est un bon mémo pour les habitués et une bonne base pour les débutants. N’hésitez pas à aller y jeter un coup d’oeil et consultez les exemples ainsi que les extraits de code, ça aide…

Et n’hésitez pas à partager en commentaire vos propres petits trucs.