12
juin
2013

5 fonctionnalités HTML5 que vous devez connaître

Fonctionnalités HTML 5 à connaßtre

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 !

PostĂ© par Mathieu LESNIAK Ă  21:42 dans la catĂ©gorie Développement
Tag(s) associé(s) :
Partager cet article :
Romuald
12/06/2013 23:56:04
Attention, le dns-prefetch ne fait pas encore parti de la norme HTML5 :p
(d'après http://www.w3.org/html/wg/drafts/html/master/links.html )

Ajouter un commentaire




Les champs obligatoires sont marqués d'une *

A table !



Derniers commentaires