Behaviour, ou comment piloter Javascript par les sélecteurs CSS
En attendant que s’impose un langage web qui réconcilie les développeurs, les marketeurs et les visiteurs (à mon avis, on en est très loin…), on est bien obligé de faire avec le HTML. Donc d’accepter un joyeux mélange dans le code d’une page web : contenu textuel et visuel, méta-données, informations de mise en page et de styles, appels à des comportements interactifs, paramètres d’objets externes, etc. Même avec la meilleure volonté du monde (par exemple, un site « 100% XHTML, 100% accessible, 100% CSS2 »), il est impossible de séparer totalement le contenu, sa présentation et son comportement.
Après avoir critiqué cette situation absurde, Ben Dolan nous propose une solution simple et astucieuse pour la partie interaction, grâce à son script Behaviour. Son objectif : éliminer tous les appels aux comportements Javascript dans le code HTML et les déclencher grâce au DOM et aux sélecteurs CSS.
Une idée toute bête, encore fallait-il y penser. Du coup, toutes les interactions peuvent être modifiées sans toucher au code HTML. Du pur bonheur !
Commentaires
Newtoon
J’aurais voulu savoir les défauts de la méthode aussi.
Ca peut pas par ex faire des problèmes avec les CSS justement ?
23 mars 2007, 3h01 ·Christophe
Il n’y a pas vraiment de défaut. La définition par sélecteurs CSS ne sert ici qu’à agir sur les éléments du DOM de la page. Elle n’a pas de conséquence sur les styles CSS (sauf à le demander explicitement dans le code Javascript).
Cette bibliothèque va dans le sens d’une meilleure utilisation de Javascript. Elle respecte notamment le principe de l’Unobstrusive Javascript, c’est-à-dire utiliser des comportements sans placer de code Javascript dans le code HTML.
Il y a bien sûr d’autres solutions pour y parvenir (j’adore Prototype par exemple), mais celle-ci a le mérite de reposer sur les sélecteurs CSS, ce qui facilite le travail d’intégration. On peut d’ailleurs la coupler à d’autres bibliothèques (comme Scriptaculous par exemple).
En résumé, aucun problème avec les CSS… sauf si on modifie les attributs id et class du code HTML sans modifier le code Javascript!
23 mars 2007, 11h13 ·