Mémo CSS

  • L’outil gratuit « DebugBar » sous IE est très pratique, et permet notamment d´afficher le DOM d´une page.
  • Sous Firefox, un bon outil de debug html/javascript/css : Firebug

Tips

    • Le « Hack CSS » est ce qui permet de contourner les bugs IE. Exemple :
      BODY { COLOR: red !important;
      COLOR: green;
      }
      Alors la page sera rouge QUE sous Firefox (ou autre, en tout cas pas sous IE6 qui ne reconnait pas la commande !important et appliquera donc le vert…). A noter que cette solution est à choisir en dernier recours lorsqu´on a à faire avec une vraie incomptatibilité Firefox / IE.
    • Les Z-INDEX ne marchent que pour les éléments explicitement positionnés (position: absolute) (IE6).
    • Rollover : Au passage de la souris, au lieu de faire deux images distinctes :A { BACKGROUND : url(« mon_image_1.gif »); }

      A:hover { BACKGROUND : url(« mon_image_2.gif »); }

      Il vaut mieux en faire qu´une seule (qui contient les deux images) qu´on fait « coulisser » :

      A { BACKGROUND : url(« mon_image.gif ») 0px 0px; }

      A:hover { BACKGROUND : url(« mon_image.gif »); -50px 0px; }

 

    • La pseudo classe :hover n´est associée qu´au tag A.

 

    • Un nom de classe ne doit pas commencer par un chiffre. Cela plantera sous Firefox.

 

    • Application d´un style avec un attribut particulier : input[type= »text »] {background-color: blue}.

 

    • Attention, pas d´espace entre la quantité et l´unité (« 25px » et non « 25 px »), ça plantera sous Firefox.

 

    • L´épaisseur de border est ajouté au width et height de la boite.

 

    • Font-color n´existe pas ! C´est  « color » qu´il faut utiliser.

 

    • Pour changer une background-color sur un mouseover, le plus simple et de faire une balise A qui n´est liée à aucune URL. Faire un style « A:hover » et le tour est joué.

 

    • Attention à bien utiliser la palette des 256 couleurs WEB pour ne pas avoir de surprises au rendu. Visiter le site Visibone (OBSOLETE)

 

  • Pour « Font-family », il est conseillé d´ajouter en dernier choix une police générique.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *