Code 18: Nouveaux contrôles HTML 5

À 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>
<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>

À 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.

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.

Ce qui m'a donné l'idée de voir où en étaient l'évolution des fureteurs en leur faisant subir à nouveau le test de compatibilité HTML 5 (le premier test avait eu lieu en avril 2010). Donc 5 mois plus tard, le test n'est plus comptabilisé sur 160 points mais sur 300 :

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 ?

Code 18

vendredi 3 septembre 2010

Nouveaux contrôles HTML 5

2 commentaires: