Forum du club des d�veloppeurs et IT Pro - Blogs - Bovino

D�couvrir l'API HTML5 Notification

Bovino — Tue, 02 Jun 2015 13:26:03 GMT

L'API Notification de HTML5 vous permet d'afficher � l'utilisateur des notifications (comme son nom l'indique :mrgreen:) � la mani�re des messages natifs du navigateur ou des extensions du navigateur.
Il s'agit d'une alternative �l�gantes aux abominables alert() ou aux fen�tres modales (:arrow: dont celles natives de HTML5 ;)).
Son utilisation est un peu particuli�re car elle requi�re une autorisation de l'utilisateur. On commence donc par v�rifier que le navigateur impl�mente cette API, puis on demande l'autorisation :
Code javascript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
if('Notification' in window){
    Notification.requestPermission(function (status) {
        // Reste du code de demande d'autorisation
    }
}
La m�thode requestPermission() prend en param�tre une fonction de rappel � laquelle sera pass� un argument dont la valeur correspond � l'autorisation accord�e par l'utilisateur.
Trois valeurs sont possibles pour Notification.status :
� granted, l'autorisation a �t� accord�e ;
� denied, l'autorisation a �t� refus�e ;
� default, l'utilisateur a ferm� la fen�tre de demande sans pr�ciser s'il acceptait ou non.
Seul la premi�re valeur permet d'afficher les messages.
La diff�rence entre les deux autres valeurs est que si l'utilisateur fait un choix (autorisation ou refus), l'appel � Notification.status ne demandera plus l'autorisation et gardera le choix d�j� fait, tant qu'aucun choix n'a �t� fait (default), la demande s'affichera.

Une fois l'autorisation obtenue, il est possible d'afficher des messages � l'aide du constructeur new Notification().
Ce constructeur prend deux param�tres : le titre du message et un objet d�finissant certaines propri�t�s du message. Cet objet peut contenir diverses propri�t�s pr�d�finies dont les plus utiles sont :
� body, qui correspond au texte du message ;
� icon, qui permet d'associer une ic�ne au message.
Code javascript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
var msg = new Notification('Mon titre', {
    body: 'Texte de mon message.',
    icon: 'chemin/de/limage.gif'
});
Et voil�, votre message s'affiche !

Plusieurs �v�nements sont associ�s � la notification :
� show, d�clench� lorsque le message s'affiche ;
� click, d�clench� lors du clic sur le message ;
� close, d�clench� lorsque le message se ferme ;
� error, d�clench� si une erreur survient.

:arrow: Voir un exemple d'utilisation en ligne.

Compatibilit�.
Cette API est impl�ment�e sur toutes les derni�res versions des navigateurs (pour les versions plus anciennes, un pr�fixe peut �tre requis) sauf Internet Explorer qui ne l'a pas encore impl�ment�e.

Comprendre la d�l�gation d'�v�nement en JavaScript

Bovino — Thu, 28 May 2015 14:57:56 GMT

La d�l�gation d'�v�nement, qu'est-ce que c'est ?

La d�l�gation d'�v�nement est une technique assez courante en JavaScript qui consiste � poser des �couteurs d'�v�nement non pas sur l'�l�ment HTML cibl�, mais sur l'un de ses anc�tres dans le DOM.

Comment �a marche ?

Le concept essentiel pour comprendre cette technique est la notion de bouillonnement d'un �v�nement. � de rares exceptions pr�t, quasiment tous les �v�nement bouillonnent.
Si l'on se repr�sente une page Web comme une feuille de papier sur laquelle on poserait d'autres feuilles de tailles diff�rentes et plac�es � des endroits pr�cis selon l'arborescence des balises et la mise en page CSS, on peut se repr�senter un �v�nement (un clic sur une balise par exemple) comme �tant intercept� par l'�l�ment le plus au-dessus de l'empilement (et inversement, le plus profond dans l'arborescence du DOM). C'est donc cet �l�ment qui va recevoir l'�v�nement. Le bouillonnement est le m�canisme qui va faire � remonter � cet �v�nement jusqu'au plus haut niveau de l'arborescence (la premi�re feuille de papier) en passant par tous les �l�ments se trouvant � l'emplacement o� l'�v�nement a �t� d�clench�, permettant ainsi � tous les gestionnaires d'�v�nements associ�s de se d�clencher.

En r�sum�, si l'on consid�re le code HTML suivant
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
<body>
    <div>
        <span>Cliquer icispan>
    div>
body>
et que vous placez un �couteur d'�v�nement clic sur la div, cliquer sur le texte du span d�clenchera l'�v�nement de la div bien que ce span � cache � cette derni�re. Ceci est possible gr�ce au bouillonnement.

Pour en revenir � notre d�l�gation d'�v�nement, nous pourrons savoir, avec l'objet Event associ� � tout �v�nement, quel �l�ment HTML a r�ellement d�clench� cet �v�nement (Event.target) et si ce dernier est bien celui que nous souhaitons cibler.

� quoi cela peut-il servir ?

Il y a deux cas typiques d'utilisation de la d�l�gation d'�v�nement.

� Lorsque l'on souhaite associer des �v�nements similaires � diff�rents �l�ments.
Par exemple, imaginons que l'on souhaite afficher un texte initialement masqu� en cliquant sur des items d'une liste ordonn�e. Plut�t que de d�finir autant d'�v�nement que d'�l�ments dans la liste, on pourra n'en utiliser qu'un seul plac� sur la balise <ul>
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
<ul id="maListe">
    <li class="element" data-texte="foo">Item 1li>
    <li class="element" data-texte="bar">Item 2li>
    <li class="element" data-texte="baz">Item 3li>
    <li class="element" data-texte="toto">Item 4li>
    <li class="element" data-texte="titi">Item 5li>
    <li class="element" data-texte="tata">Item 6li>
    <li>Item 7li>
    <li>Item 8li>
    <li>Item 9li>
    <li class="element" data-texte="42">Item 10li>
ul>
Code javascript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
document.getElementById('maListe').addEventListener('click', function(e){
    var initElem = e.target;
    if(initElem.className != 'element'){ // Si l'élément n'est pas un de ceux à traiter
        return;
    }
    alert(initElem.dataset.texte);
});
Voir l'exemple sur JSFiddle.

Dans ce code, on cherche � afficher le contenu de l'attribut data-texte pour tous les �l�ment ayant la classe element.
On commence d'abord par r�cup�rer l'�l�ment ayant re�u l'�v�nement. On v�rifie ensuite si cet �l�ment est bien du type que l'on cible, si ce n'est pas le cas, on stoppe l'ex�cution de la fonction, sinon, on affiche le message.

� Lorsque l'on veut pr�voir des gestionnaires d'�v�nements sur des �l�ments n'�tant pas encore pr�sents dans la page.
Il est de plus en plus fr�quent, avec les interfaces riches et AJAX, que le contenu d'une page �volue en fonction des actions de l'utilisateur.
On peut donc avoir � g�rer des �v�nements sur des �l�ments qui n'existent pas au chargement de la page mais qui sont susceptibles d'y apparaitre.
Seulement, lorsque l'on d�clare un gestionnaire, il ne peut s'appliquer qu'� des �l�ments effectivement pr�sents au moment de la d�claration de l'�couteur : JavaScript n'est pas devin ni pr�dictif.
Pour cela, on pourra facilement poser le gestionnaire sur un anc�tre connu (et existant) dans lequel seront ins�r�s les futurs �l�ments.
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
<div id="parent">div>
<button>Ajouter un élémentbutton>
Code javascript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
document.getElementById('ajout').onclick = function(){
    document.getElementById('parent').innerHTML = 'Elément enfant ajouté dynamiquement';
};
document.getElementById('parent').addEventListener('click', function(e){
    var initElem = e.target;
    if(initElem.id == 'enfant'){
        alert('Vous avez cliqué !');
    }
});
Voir l'exemple sur JSFiddle.

Au moment de d�clarer l'�v�nement, l'�l�ment enfant n'existe pas, pourtant, lorsqu'on l'ins�re dans la page et que l'on clique dessus, le message s'affiche.

Aller plus loin
Il est important, quand on utilise la d�l�gation d'�v�nement, de faire attention que si l'�l�ment cibl� poss�de des �l�ments enfants, alors Event.target peut ne pas correspondre � celui cibl�, il faudra dans ce cas remonter l'arborescence jusqu'� l'�l�ment sur lequel le gestionnaire est pos� en testant � chaque palier si l'�l�ment en cours est celui recherch�.
Code javascript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
var initElem = false, tmpElem = e.target;
do{
    if(tmpElem.id == 'id_recherche'){
        initElem = tmpElem;
    }
}
while(tmpElem = tmpElem.parentNode && tmpElem != this);
if(initElem){
    // tmpElem ne vaut pas false si on entre dans cette condition
    // donc l'élément recherché a été trouvé
    // on peut donc faire les traitement voulus
}
Il est aussi � noter que la plupart des biblioth�ques JavaScript permettent d'utiliser la d�l�gation d'�v�nement.
Par exemple pour jQuery, la syntaxe
Code javascript : S�lectionner tout - Visualiser dans une fen�tre � part
$('#elem1').on('click', '.elems2', callback);
permet de d�l�guer la gestion des �v�nements clic sur les �l�ments ayant la classe CSS elems2 sur l'�l�ment dont l'identifiant est elem1.
N'h�sitez pas � indiquer dans les commentaires les diff�rentes syntaxes pour les autres frameworks.

Modification d'un �l�ment du DOM : le m�connu insertAdjacentHTML()

Bovino — Wed, 13 May 2015 13:04:42 GMT

Lorsque l'on veut modifier le contenu d'un document Web (et c'est principalement la finalit� de JavaScript), certaines m�thodes ou propri�t�s sont largement connues et utilis�es.
En particulier, l'utilisation de la propri�t� innerHTML est tr�s r�pandue, au point que cette propri�t�, � l'origine � l'origine sp�cifique � Internet Explorer, s'est g�n�ralis�e � tous les navigateurs et a m�me fini par �tre int�gr�e aux sp�cifications HTML5.
On connait aussi les m�thodes createElement(), createTextNode(), appendChild ou insertBefore().
L'ensemble de ces fonctionnalit�s permettant de faire beaucoup de choses. Mais pas tout, comme s'en est r�cemment rendu compte l'un de nos visiteurs.
Il souhaitait ajouter des champs dans une zone de son formulaire. Pour cela, il eut l'id�e de r�cup�rer la valeur de innerHTML, de la concat�ner avec le champ suppl�mentaire puis affecter le nouveau contenu � innerHTML.
La technique est correcte en soi et fonctionne globalement bien. Globalement seulement car il y a un hic : en effet, si l'utilisateur avait d�j� rempli des champs de cette partie du formulaire, cela n'avait pas eu d'impact sur le HTML et donc la r�affectation par innerHTML vidait les champs pr�c�demment remplis.

Pour pallier ce d�sagr�ment, on aurait pu envisager deux alternatives possibles : soit faire une boucle sur les champs d�j� remplis, affecter l'attribut value (ou selected pour les <option>) avec setAttribute() et l�, l'utilisation de innerHTML aurait fonctionn� correctement, soit passer par des cr�ation / insertion d'�l�ment � l'aide de createElement() / appendChild.

Sauf que ces deux techniques sont un peu fastidieuses et verbeuses� surtout lorsque l'on dispose d'une m�thode permettant de faire la m�me chose en une seule instruction.
Cette m�thode, insertAdjacentHTML() est pourtant assez peu connue et on la rencontre rarement. Pourtant, elle est compatible tous navigateurs, y compris les versions anciennes d'Internet Explorer.

Son utilisation est simple :
Code javascript : S�lectionner tout - Visualiser dans une fen�tre � part
HTMLElement.insertAdjacentHTML(position, html);
Comme on peut le voir, elle s'applique � un objet HTMLElement et prend deux param�tres : la position de l'insertion par rapport � l'�l�ment sur lequel on l'appelle et la chaine de caract�re correspondant au code HTML � ins�rer.
Il existe quatre positions possible :

'beforebegin' : le HTML sera ins�r� avant la balise d'ouverture de l'�l�ment cibl� ;
'afterbegin' : apr�s la balise d'ouverture de l'�l�ment cibl� ;
'beforeend' : avant la balise de fermeture de l'�l�ment cibl� ;
'afterend' : apr�s la balise de fermeture de l'�l�ment cibl�.

Soit :
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
<div> (...) div>

Les m�thodes de r�cup�ration des �l�ments du DOM

Bovino — Thu, 07 May 2015 13:43:40 GMT

Dans le cadre d'une page Web, la finalit� de JavaScript est essentiellement de modifier les informations affich�es. Pour cela, il est n�cessaire de r�cup�rer puis manipuler les objets du Document Object Model ou DOM.

Pour r�cup�rer ce ou ces �l�ments, diverses m�thodes sont disponibles.

Diff�rence entre �l�ment DOM et collection
Les m�thodes de r�cup�ration d'�l�ments peuvent renvoyer deux types de valeurs : soit un �l�ment, soit une collection d'�l�ments.
Un �l�ment (ou HTMLElement) est un objet correspondant � la repr�sentation par JavaScript d'une balise HTML. Cet objet poss�de notamment diverses propri�t�s correspondant aux valeurs des divers attributs que cette balise peut contenir.
Une collection (ou HTMLCollection) est un objet (comparable en fait � un tableau) comprenant plusieurs �l�ments.
Cette diff�rence est importante, car JavaScript ne sait traiter qu'un �l�ment � la fois, si vous r�cup�rez une collection (y compris ne contenant qu'un seul �l�ment), il sera obligatoire de traiter les �l�ments qu'il contient individuellement en g�n�ral avec une boucle (une collection poss�de une propri�t� length correspondant au nombre d'�l�ments qu'elle contient).

Les propri�t�s de l'objet document
L'objet document dispose de propri�t�s r�f�ren�ant divers �l�ments et collections utiles (les collections obsol�tes ne sont pas list�es).

document.head (�l�ment) : repr�sente la balise HTML <head>.
document.body (�l�ment) : repr�sente la balise HTML <body>.
document.anchors (collection) : repr�sente toutes les ancres du document (sont consid�r�es comme ancres toutes les balises <a> ayant un attribut name bien qu'une ancre puisse aussi �tre atteinte par son attribut id).
document.embeds (collection) : repr�sente tous les �l�ments correspondants aux balises HTML <embed>.
document.forms (collection) : repr�sente tous les formulaires du document.
document.images (collection) : repr�sente toutes les images du document (balises HTML <img /> uniquement).
document.links (collection) : repr�sente tous les liens hypertexte du document (balises HTML <area> et <a> ayant un attribut href).
document.scripts (collection) : repr�sente toutes les images du document (balises HTML body> html> Voir cet exemple en ligne.

Support des navigateurs
� l'heure actuelle, seule Chrome Canari semble proposer un support correct pour cette balise en activant l'option "Activer les fonctionnalit�s exp�rimentales de Web Platform" dans chrome:flags. Chrome en version standard reconnait la balise (toujours en activant l'option) mais l'affichage est bogu�.

Sources : HTML5 Rocks, page d'exemple document�e, Sp�cifications WHATWG.

�volution de la propri�t� CSS position : la valeur sticky

Bovino — Thu, 05 Feb 2015 10:58:19 GMT

Tous les d�veloppeurs Web sont suppos�s conna�tre la propri�t� CSS position.
Pour rappel, cette propri�t� permet de d�terminer comment un �l�ment HTML sera int�gr� dans le document.

Cette propri�t� accepte quatre valeurs :

static : c'est la valeur par d�faut, un �l�ment avec cette valeur sera int�gr� dans le flux normal ;
relative : permet de positionner l'�l�ment en fonction de l'emplacement qu'il aurait d� avoir dans le flux ;
absolute : permet de positionner l'�l�ment par rapport � son anc�tre positionn� (dont la valeur de position est diff�rente de static) le plus proche ;
fixed : permet de positionner l'�l�ment � un emplacement fixe de la fen�tre d'affichage (l'�l�ment ne se d�place pas lors du scroll).

Si ces quatre valeurs sont largement suffisantes pour la plupart des pages Web, certaines pratiques apparaissent et se g�n�ralisent qui justifieraient d'�tendre les valeurs possibles.

Parmi ces pratiques, celle consistant � int�grer un �l�ment dans la page qui suit le d�filement tant qu'il est visible puis se bloque � une position limite est de plus en plus r�pandue (sticky elements). Pour en voir un exemple, regardez comment se comporte la table des mati�res dans les articles de developpez.com.
Pour r�aliser cela, nous sommes actuellement oblig�s d'utiliser JavaScript et de modifier la propri�t� position en fonction de la valeur du scroll.

C'est pour cela que les d�veloppeurs de Chrome ont eu l'id�e d'ajouter une valeur possible pour la propri�t� position, la valeur sticky.

Exemple :
Code css : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
#sticky_element{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 15px;
}
:arrow: Voir un exemple sur JS Fiddle.

Dans cet exemple, l'�l�ment dont l'id est sticky_element va se d�placer en m�me temps que la page tant qu'il sera � plus de 15 pixels du haut de la page, puis se figera pour rester toujours visible.
Notez l'utilisation des pr�fixes vendeurs et leur ordre. Les pr�fixes vendeurs permettent d'utiliser des fonctionnalit�s (CSS ou JavaScript) qui sont encore exp�rimentales. Comme le comportement de ces fonctionnalit�s est susceptible d'�voluer en fonction de leur impl�mentation, on d�clare toujours la propri�t� non pr�fix�e (donc d�finitive et suppos�e conforme � la sp�cification) en dernier afin que celle-ci �crase les pr�c�dentes si elle est disponible.

Malheureusement, le support navigateur est quasiment inexistant � l'heure actuelle et elle ne fait pas partie des sp�cifications du W3C.
La propri�t� est bien reconnue en version pr�fix�e pour Chrome et Safari sur iOS 6, mais pour le reste, elle n'est support�e que par les versions de d�veloppement de Chrome (Canary) et Firefox (Nightly).
Cependant, cela reste une belle perspective pour un futur relativement proche.

Sources : RedTeamDesign - HTML5Rocks

D�sactiver vos champs de formulaires HTML5 par groupes

Bovino — Thu, 05 Feb 2015 10:56:29 GMT

:salut:

Comme vous le savez certainement, pour d�sactiver qu'un champ de formulaire soit inactif, vous devez lui attribuer un attribut disabled.
Notez qu'il s'agit d'un attribut de type bool�en. Ces attributs bool�ens ont la particularit� que leur seule pr�sence suffit � activer la fonctionnalit�.

Si vous optez pour une syntaxe XHTML (c'est-�-dire conforme aux r�gles XML), vous devez lui attribuer une valeur (la seule autoris�e pour que le document soit valide est "disabled", mais n'importe qu'elle autre valeur aura le m�me effet si ce n'est que le document ne sera plus valide) :
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
<input name="total" disabled="disabled" />
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
<input name="total" disabled="foo" />
Si au contraire vous optez pour une syntaxe HTML, alors seul l'attribut est n�cessaire :
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
<input name="total" disabled>
Le probl�me que vous pouvez rencontrer, c'est dans le cas o� vous ayez plusieurs champs � d�sactiver de la sorte. Bien entendu, multiplier les attributs disabled est faisable, mais un peu lourd.
Heureusement, HTML5 arrive � votre secours.
En effet, il est d�sormais possible d'affecter l'attribut � une balise
. Cette balise a pour but de regrouper des champs ayant une finalit� commune.
Ainsi, en affectant l'attribut disabled � cette balise, tous les champs enfants seront d�sactiv�s sans avoir besoin de le pr�ciser pour chacun d'eux :

Code html : S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
<fieldset id="groupe" disabled="disabled"> <input name="foo" /> <input type="checkbox" name="bar" /> <select name="toto"> <option value="1">Valeur 1option> <option value="2">Valeur 2option> <option value="3">Valeur 3option> <option value="4">Valeur 4option> select> fieldset>

Enfin, vous aurez peut-�tre besoin d'activer ou de d�sactiver ces champs en fonction des actions de l'utilisateur. Vous pourrez le faire uniquement en JavaScript puisque ni HTML ni CSS ne pr�voient d'interaction permettant d'influer sur cet attribut.
De la m�me mani�re, la propri�t� JavaScript disabled d'un objet de type HTMLElement correspondant � cet attribut est de type bool�enne.
Notez que cette propri�t� prend comme valeur true ou false mais que le transtypage dynamique de JavaScript permet un comportement similaire � celui de HTML : si vous affectez � cette propri�t� n'importe qu'elle valeur non �quivalente � false (par exemple la chaine 'disabled'), l'�l�ment sera d�sactiv�, sinon, il sera activ�.
Dans notre exemple pr�c�dent, il est donc possible de cr�er un bouton permettant d'activer ou non un groupe de champs de formulaire :

Code html : S�lectionner tout - Visualiser dans une fen�tre � part

<button id="switchActif">Activer / désactiver le groupebutton>

Code javascript : S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
document.getElementById('switchActif').onclick = function(){ var $groupe = document.getElementById('groupe'); $groupe.disabled = !$groupe.disabled; };

Voir un exemple en ligne.

HTML Media Capture : prenez des photos depuis un champ de formulaire

Bovino — Thu, 05 Feb 2015 10:54:34 GMT

HTML Media Capture et l'attribut capture
Mettez � profit les p�riph�riques de votre mobile pour remplir les champ file

HTML5 apporte de nombreuses nouvelles fonctionnalit�s, notamment concernant les formulaires.

Nous allons voir dans ce billet la sp�cification HTML Media Capture.
Celle-ci permet d'�largir les capacit�s des champs de formulaires de type file.
Jusqu'� pr�sent, les champs de formulaires de type file permettaient juste d'ouvrir une fen�tre pour r�cup�rer dans le syst�me de fichiers celui (ou ceux) � envoyer avec le formulaire.
Il est dor�navant possible d'utiliser ces m�mes champs pour utiliser l'un des p�riph�riques de capture (audio, vid�o ou image) pour cr�er le fichier � envoyer.

Comment le mettre en �uvre ?
La mise en place d'un tel syst�me est particuli�rement simple.
Il suffit d'ajouter au champ un attribut capture et le tour est jou� ! Cet attribut �tant de type bool�en, c'est-�-dire que sa seule pr�sence (sans valeur ou quelle que soit sa valeur) suffit � indiquer au navigateur le comportement souhait�.

Enfin... il suffit... pas tant que �a en fait.
En r�alit�, l'attribut capture n'est pas suffisant, en effet, ce seul attribut ne permet pas de savoir quel type de media est demand�, donc quel p�riph�rique utiliser.
Il est donc n�cessaire de pr�ciser aussi l'attribut accept avec une valeur correspondant au type mime souhait�.

Notez que l'attribut capture n'oblige pas l'utilisateur � utiliser un p�riph�rique : il lui est demand� s'il veut envoyer un fichier existant ou s'il veut utiliser le p�riph�rique appropri�.

Exemples.
Voici les trois cas possibles d'utilisation � l'heure actuelle :
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
<form action="..." method="post" enctype="multipart/form-data">
    
    <input type="file" name="image" accept="image/*" capture>
    
    <input type="file" name="video" accept="video/*" capture>
    
    <input type="file" name="son" accept="audio/*" capture>
    <input type="submit" value="Upload">
form>
Compatibilit�.
� l'heure actuelle, seuls les navigateurs pour mobiles et tablettes semblent supporter cette fonctionnalit�.
:arrow: Voir la table de compatibilit� pour mobiles.
Mais gageons que les versions desktop des navigateurs vont l'impl�menter rapidement.

:arrow: Voir les sp�cifications du W3C (comprenant des exemples plus avanc�s).