Mieux exploiter les CSS, même avec IE

Je suis en train de lire le dernier livre d’Eric Meyer (More Eric Meyer On CSS) et il est tout simplement fabuleux. C’est une petite merveille pour tous ceux d’entre vous qui souhaitent apprendre et progresser dans l’utilisation des CSS. Au travers de 10 mini-projets, l’auteur nous décrit pas à pas comment séparer de façon magistrale le contenu de la présentation.

Un des projets consiste à réaliser un menu déroulant sans javascript, le tout en CSS. Et là vous me dites : ça a déjà été fait, en plus ça ne marche que sous Mozilla. Et là je vous répond : Et bien non ! ça marche également sous IE et en toute légalité, pas de hacks !. L’explication est toute simple : pour réaliser des menus déroulant tout en CSS sans une seule ligne de javascript, il faut exploiter la pseudo-classe :hover qu’IE ne sais pas gérer en dehors des liens. L’auteur nous propose donc d’utiliser une particularité d’IE : les behaviors. Ces derniers se présentent sous la forme de fichiers .htc que l’on peut attacher à une page Web ou à une feuille de style et qui permettent de décrire des comportements spécifiques au travers d’instructions javascript. Concrètement, vous attacher le fichier à votre feuille de style à l’aide d ‘une instruction du type behavoir: url(csshover.htc); et voilà, le tour est joué, IE sait maintenant gérer la pseudo-classe :hover comme les grands (Mozilla, Firefox, Opera…). Pour voir cette fonction en action : List-Based CSS-Driven Menus.

Je trouve cette solution particulièrement élégante et géniale parcequ’elle est bénéfique à tous :

  • les personnes utilisant des navigateurs récents ne sont pas pénalisées par le poids des instructions javascript (3 Ko) puisque la déclaration behavoir est ignorée ;
  • les personnes utilisant IE bénéficient des même raffinements graphiques que les autres ;
  • les personnes utilisant des navigateurs alternatifs (Lynx…) ne sont ni pénalisées par le poids du fichier behavoir ni par celui de la feuille de style, le contenu s’affiche correctement (du moment que la sémantique est respectée).

Vous pourrez trouver plus d’explications sur le site de Peter Nederlof : whatever:hover. De même, un certain Dean Edwards a carrément décidé de pallier à un ensemble de défaillances d’IE et propose un fichier behavoir qui répond au doux nom d’IE7.htc (tout un programme). Je vais tester tout ça en profondeur et vous en reparlerai bientôt…

Un commentaire sur “Mieux exploiter les CSS, même avec IE

  1. Ce qui me gêne avec le fameux hack de Dean Edwards… c’est que ça reste un hack. Les behaviors d’IE fonctionnent grâce à javascript… comment faire pour les 8% de gens qui n’ont pas javascript actrivé ? Pire : comment peut-on faire un menu déroulant sans javascript s’il faut javascript pour que le hack fonctionne ?!

  2. Tout l’intérêt des hacks, c’est de ne pas pénaliser les utilisateurs qui ne peuvent en bénéficier. L’important aussi est de considérer les menus déroulant (ou menus surgissant) comme des "accélerateurs" à disposition des utilisateurs avancés. Pour les autres, il est conseillé de prévoir une alternative. Et puis de toute façon je ne suis pas un fan de javascript…

  3. Je trouve le procédé fort intéressant, je l’ai d’ailleurs utilisé. Sauf que l’instruction behavior s’insère comme un attribut dans la CSS. Or si la commande fonctionne, cet attribut n’existe pas en CSS et rend donc la feuille invalide ! c’est dommage…

  4. sont super ces hacks, mais apparmement il ne marche pas pour des données récupérées via AJAX J’ai un tableau avec des lignes sur lequel je voulais faire un tr:hover (en gros …)ça marche impec si je suis en html normal, mais éds que je met dans une div des infos venant d’une requete AJAX, bah ça marche plus, j’ai bien essayé dans le fichier lancé par ajax de mettre un body et de charger le fichier .htc mais ça marche pas .. si quelqu’un a une idée. Merci d’avance

Répondre à scool Annuler la réponse.