HTML5 pour les développeurs

A quoi voit-on que le HTML 5, malgré tous ces défauts, est tout de même un language qui facilite la vie des développeurs ? Quand on s'apperçoit que des techniques que l'on utilise depuis des années sont dorénavant intégrées aux spécifications. Petit exemple avec la manipulation de l'attribut class.

Depuis la création de ma librairie javascript rnb en 2005, j'ai une collection de méthodes qui permettent de manipuler l'attribut class d'un élément (c'est même principalement pour ça que la librairie a été créée) :

  • addClass : ajouter une classe.
  • removeClass : supprimer une classe.
  • hasClass : un élément possède-t-il une classe ?
  • toggleClass : ajouter ou supprimer une classe.
  • replaceClass : remplacer une classe par une autre.
  • switchClass : Remplacer une classe par une autre en fonction de celle qui est présente.
  • switchClassPosition : Passer une classe d'un élément à un autre.

HTML 5 introduit une nouvelle interface et l'API qui va avec, DOMTokenList, pour travailler avec une chaîne de caractères constituée d'items séparés par un espace :

  • length : Nombre d'items dans la chaîne de caractères.
  • item(index) : Récupérer l'item positionné à l'index index.
  • contains(item) : La liste possède-t-elle un item particlier ?
  • add(item) : ajouter un item à la liste.
  • remove(item) : supprimer l'item de la liste.
  • toggle(item) : ajouter ou supprimer un item à/de la liste.

Cette API est parfaitement indiquée pour manipuler l'attribut HTML le plus couramment utiliser en développement web, l'attribut class. C'est pourquoi les éléments HTML possèdent, en HTML 5, une nouvelle propriété : classList. Un code comme el.classList.contains("toto") nous indiquera donc si l'élément el possède la classe « toto ».

On peut dés lors intégrer la propriété classList dans nos développements via un lazy pattern ; dans le cas qui nous occupe, cela se traduira par un simple test : si le navigateur implémente la nouvelle API HTML 5, on utilisera la liste classList, sinon on applique une méthode alternative. Voici par exemple une fonction pour savoir si un élément possède une classe particulière :

// placer les fonctions dans un espace de nom pour ne pas polluer 
// l'espace global
var dom = {};

/**
 * Vérifier si un élément porte une classe.
 * @param {Element} node Elément à traiter
 * @param {string} className Nom de la classe
 * @return {boolean}
 */
dom.hasClass = function (node, className) {
    if (document.documentElement.classList) {
        // Si le navigateur implémente l'API HTML5, utiliser la 
        // collection classList
        dom.hasClass = function (n, c) {
            return n.classList.contains(c);
        };
    } else {
        // Sinon, utiliser une recherche par exepression régulière.
        dom.hasClass = function (n, c) {
            return new RegExp(' ' + c + ' ').test(' ' + n.className + ' ');
        };
    }
    return dom.hasClass(node, className);
};

Pour le moment, seul Firefox 3.6 semble implémenter cette API.

HICKSON, Ian ; BERJON, Robin ; FAULKNER, Steve, et al.. HTML 5. W3C, . 2.8.3. DomTokenList

ROUGET, Paul. ClassList in Firefox 3.6. Hacks Mozilla,