À temps perdu, je commence à explorer un peu ce qui se fait du côté du HTML 5 pour me préparer au jour où les fureteurs seront en majorité compatibles et supporteront les nouvelles capacités offertes.
De ce que j'ai vu, les formulaires présenteront des nouveaux types d'inputs : date, email, url, range et number, pour ne nommer que ceux-là. Voici un aperçu de 5 contrôles fonctionnels dans Opera 10 :
Qu'est-ce qu'on remarque ? Fini les "date pickers", un contrôle natif sera disponible (reste à voir si on pourra le styliser par CSS et forcer la langue/locale par programmation). Des inputs spécifiques pour le courriel et un url seront aussi disponibles, de même qu'un slider horizontal et un input pour un nombre avec les boutons pour incrémenter ou décrémenter la valeur selon un saut prédéfini.
Le code source utilisé pour générer cet exemple est le suivant :
<!DOCTYPE HTML>À ce stade-ci, pour vous assurer que cette démonstration marche bien, assurez-vous de la visualiser dans Opera 10. Même Chrome, qui est supposé être avancé au niveau de l'interprétation HTML 5, n'a pas pu l'afficher correctement.
<html lang="fr_CA">
<head>
<title>title</title>
<meta charset="UTF-8">
<style type="text/css" media="screen">
label{ posititon: relative; float:left; width: 150px; }
div{ height: 35px; }
</style>
</head>
<body>
<form>
<div style="height:200px;">
<label>Date de naissance :</label>
<input name="birthdate" type="date">
</div>
<div>
<label>Courriel :</label>
<input name="email" type="email">
</div>
<div>
<label>Site Web :</label>
<input name="website" type="url">
</div>
<div>
<label>Note :</label>
<input name="score"
type="range"
min="0"
max="100"
step="1"
value="60">
<span>60</span>
</div>
<div>
<label>Quantité :</label>
<input type="quantity"
min="0"
max="100"
step="1"
value="1">
</div>
</form>
</body>
</html>
Testé avec les dernières versions fraîchement téléchargées et installées d'aujourd'hui, j'obtiens les résultats suivants :
- Internet Explorer 8 : on n'en parle même pas
- Firefox 3.6.8 : aucun n'est pas rendu correctement
- Chrome 5 : seul le slider de range fonctionne. J'effectue la mise à jour la plus récente pour tester à nouveau.
- Chrome 6.0.472 : les contrôles testés s'affichent correctement mais celui de date est présenté comme un input number. Dès que j'essaie de changer la date avec les flèches, il m'affiche la date 1582-10-15!
- Safari 5.01 : comme Chrome 5, seul le slider est rendu correctement.
- Opera 10.61 : 100% fonctionnel. C'est le seul fureteur qui a rendu parfaitement les 5 contrôles testés.
Firefox 3.6
Avril 2010 : 101/160 (63,13%)
Firefox 3.6.8
Septembre 2010 : 139/300 (46,33%)
Chrome 4.1
Avril 2010 : 118/160 (73,75%)
Chrome 6.0.472
Septembre 2010 : 217/300 (72,33%)
Internet Explorer 8
Avril 2010 : 19/160 (11,88%)
Septembre 2010 : 27/300 (9%)
Safari 5.01
Septembre 2010 : 207/300 (69%)
Opera
Septembre 2010 : 159/300 (53%)
En date d'aujourd'hui, Chrome de Google est toujours en pôle position dans la course, suivi de près par Safari d'Apple. Les résultats pour Internet Explorer de Microsoft sont biaisés par le fait que je n'ai pas testé avec le beta de la version 9 encore. Quelqu'un peut me fournir le résultat ?
Voici une liste de 55 site web qui utilisent HTML5: http://tinyurl.com/2wn4jh5
J'ai fais le test HTML5 avec la Beta de Windows Internet Explorer 9 64 bit et j'ai obtenu seulement 96