Les CSS d'abord, le javascript ensuite

Quand on construit des applications ou des sites web, on associe toujours très étroitement CSS et javascript, a tel point qu'on oublie parfois que la présentation graphique peut être utile en dehors même de son utilisation dans un objet javascript...

Prenons l'exemple du composant rnb.gc.Tree de la librairie javascript rnb qui permet de gérer des listes à puces hiérarchisées. Il modifie pour cela le rendu de la liste en y ajoutant notamment des icônes illustrant l'état du noeud (plié ou déplié). Il était intéressant d'avoir ces styles applicables à des listes sans pour autant utiliser le javascript.

Jusqu'à maintenant, c'était la présence d'une classe rnb_tree qui indiquait qu'un code HTML devait être géré avec rnb/ui/Tree. Dissocier l'utilisation des CSS et celle du javascript implique dorénavant l'utilisation de deux classes. La première, list-style-tree, s'occupera de la presque totalité du rendu en lui-même :

<ul class="list-style-tree">
    <!-- contenu de la liste -->
</ul>
Ajout de la classe list-style-tree pour appliquer des styles à la liste.
  • Item 1
    • Item 1.1
    • Item 1.2
    • Item 1.3
  • Item 2
    • Item 2.1
    • Item 2.2
    • Item 2.3
  • Item 3
Rendu d'une liste avec uniquement les règles CSS appliquées.

Maintenant, si l'on souhaite géré ce code HTML avec un objet javascript rnb/ui/Tree pour plier / déplier les noeuds, on lui ajoute une classe spécifique tree :

<ul class="tree list-style-tree">
    <!-- contenu de la liste -->
</ul>
Ajout de la classe tree pour gérer la liste en javascript.
  • Item 1
    • Item 1.1
    • Item 1.2
    • Item 1.3
  • Item 2
    • Item 2.1
    • Item 2.2
    • Item 2.3
  • Item 3
Liste gérée par un objet rnb/ui/Tree : les noeuds sont (dé)pliables.

Cela implique certaines adaptations, à la fois lorsque le CSS agit seul et lorsqu'il est associé au javascript, mais cela permet d'assurer un rendu même lorsque la javascript n'est pas utilisé.

Il est donc parfois intéressant de penser la présentation graphique indépendamment des fonctionnalités et/ou des comportements qui y seront associés. La technique n'est cependant pas utilisable dans tout les cas : on voit mal quel serait l'intérêt d'appliquer à un contenu un rendu sous forme d'onglets s'il n'y a pas de javascript permettant de passer d'une page à l'autre, sauf à utiliser certaines règles CSS 3 avec un code HTML un peu trop particulier.

(2013-08-08) Mise à jour pour tenir compte du changement dans la déclaration des classes CSS portant les styles et la classe induisant la gestion de la liste par le javascript.