Le HTML5 commence à envahir les sites, et c'est tant mieux ! Je vous propose ici de découvrir quelques trucs et astuces qui pourront vous aider à concevoir de belles pages en HTML5 (et aussi vous simplifier la vie ;))

Expressions régulières

Fini l'appel au javascript pour valider une saisie utilisateur ! Autoriser ou nom la soumission d'un formulaire n'a jamais été aussi facile grâce à l'attribut pattern des INPUT :

<input type="text" name="phone-number" pattern="\[0-9\]*" value=""/>

La ligne ci dessus n'autorise que les chiffres. Pas d'autres caractères superflus ! (mais cela ne vous empêche pas de valider la saisie côté serveur, en PHP par exemple)

Download

Avant, lorsque vous vouliez forcer le téléchargement d'un élément à partir d'une page (un PDF par exemple) vous n'aviez pas trop de solutions. Soit vous jouiez avec un .htaccess pour ce fichier en question, soit vous le serviez via PHP, pour modifier les headers de la page.

HTML5 vous permet de contourner ce problème. Il est désormais possible de forcer le téléchargement d'une ressource (et même de spécifier son nom) via l'attribut download de la base A :

<a href="http://www.eskuel.net/imgblog/2013/05/danoquette-coupable.jpg" download="danoquette.jpg">Télécharger ici la photo de danoquette</a>

Prefetch

Il est possible de dire au navigateur de charger automatiquement certains éléments qui ne sont pas présents sur la page grâve à prefetch.Imaginez sur un blog, vous pourriez charger automatiquement le dernier article en date, vos visiteurs ayant une très forte chance de vouloir le lire. Ainsi, en cliquant sur son lien, la page sera déjà chargée, et votre site aura l'air encore plus rapide !

<link rel="prefetch" href="http://www.eskuel.net/la-danoquette-quest-ce-que-cest-1508" />

A noter que pour Chrome, la manipulation est légèrement différente. Il faut non pas utiliser prefetch mais prerender, qui a pour but de préparer le rendu de la page en amont :

<link rel="prerender" href="http://www.eskuel.net/la-danoquette-quest-ce-que-cest-1508" />

DNS Prefetch

Par défaut, votre navigateur ne fait la résolution DNS que lorsque vous cliquez sur un lien, ou vous chargez une image. La résolution DNS peut prendre un peu de temps, surtout sur une connexion avec une forte latence (en 3G par exemple).

Le DNS prefetch marche un peu comme le prefetch ci-dessus, mais il ne charge pas de ressource. Il opère juste la résolution DNS en arrière plan, et met le résultat en cache. Ainsi lorsque la ressource située sur ce domaine devra être chargée, le lookup sera déjà fait, et la navigation fluidifiée.

<link rel="dns-prefetch" href="//www.google-analytics.com">

Datalist

Grâce aux Datalist, vous pouvez proposer sur un champ texte une suggestion de valeurs prédéfinies. Pas besoin de jQuery ou de requêtes en AJAX pour proposer la suggestion. Bien entendu, si votre liste est trop longue, il sera peut être plus judicieux de faire appel à un peu de javascript pour aller demander la liste à une base de données au fur et à mesure de la frappe.

<label for="choix_voiture">Indiquez la marque de votre voiture :</label>
<input list="liste-voitures" type="text" id="choix_voiture">
<datalist id="liste-voitures">
<option value="Peugeot">
<option value="Renault">
<option value="Citroën">
<option value="Danoquette">
</datalist>

Avec ça, vous êtes parés pour faire de superbes pages en HMTL5.

A vous de jouer !