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.