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.

#web — #  #  #

3 commentaires

Jeremy dit :

Ca serai sympa si tu pouvais aussi mettre des exemple pour illustrer tes techniques.

Merci

Fabien dit :

Les exemples sont disponibles dans le billet original de Trevor Davis (en anglais), dont je ne fais ici que traduire l’essentiel. Vas jeter un coup d’oeil ici.

Ajouter un commentaire

Return button