détecter les features HTML5

Je suis tombé par hasard sur un site franchement utile : http://diveintohtml5.org/detect.html

Pour résumer :

• non seulement il ne faut pas chercher à détecter le browser, mais détecter le support de HTML5 en lui même est inutile, il faut détecter feature par feature
• globalement le site ne fait référence qu'à une seule librairie JS : modernizr. De fait elle permet pas mal d'abstraction quand à la détection des features, car il y a 4 manières différentes de les tester

Les features HTML5 exotiques dont j'ai appris l'existence (et pour la plupart implémentées par FF3.5!)

• détection du format de vidéo supporté par le tag <video> !

  var v = document.createElement("video");
  return v.canPlayType('video/ogg; codecs="theora, vorbis"');

• détection de la possibilité du mode offline (je ne sais pas si c'est compatible GEARS)

  return !!window.applicationCache;

• de nouveaux types <input> sont apparus, comme date, url ou email. Logiquement ils devraient permettre de remplacer les checks JS que l'ont réimplémente à chaque fois ou de faire apparaitre un calendrier à côté du champs... mais seul Opéra en tire parti, et encore sans validation des données. Quoi qu'il en soit, la détection du support est un peu plus sioux :

  var i = document.createElement("input");
  i.setAttribute("type", "email");
  return i.type !== "text"; // on détecte que le browser N'A PAS appliqué la modif demandée

• le "placeholder" d'un <input> : on a tous implémenté un bout de JS qui met un texte par défaut sur un input et qui l'enlève ou le remet si on clique dans ou en dehors du champs. C'est inclus dans HTML5, et un peu spécial à détecter :

  var i = document.createElement('input');
  return 'placeholder' in i;

• j'en rajoute une pour l'upload multiple de fichier :

  function doesSupportMultipleFileUpload() {
  	var i = document.createElement('input');
  	i.type = 'file';
  	return 'multiple' in i;
  }

Voila, quelques découvertes (pour moi du moins), mais pas sur que ça soit la peine dès aujourd'hui d'implémenter ces détections car il faudra encore quelques années avant de se passer de leur équivalent javascript ou flash. IE6 nous aura tous.