Google a annoncé la disponibilité de la version stable de Chrome 53 sur les plateformes Windows, Mac, Linux et Android. L’une des principales fonctionnalités est la présence de Shadow DOM, une fonctionnalité à l’intention des développeurs qui était déjà proposée depuis la version bêta de Chrome 53. Comment fonctionne-t-il ? Le principe de Shadow DOM est simple : masquer en partie (encapsuler) le DOM interne d’un composant, mais aussi les styles pour ne pas avoir à travailler sur l’implémentation d’un composant. Shadow DOM peut s’avérer très pratique pour la maintenance d’applications disposant d’un grand nombre de lignes de code ou alors celles qui contiennent du code tiers (étant donné que vous devez vous assurer que ce code tiers n’affecte pas d’autres parties de votre application).
Par exemple, l’affichage d’un lecteur vidéo dont une partie du DOM a été encapsulée peut se résumer à :
| Code HTML : | Sélectionner tout |
<video controls src="/test/video"></video>
Ici l’affichage de l’élément encapsulé (en se servant de l’interface shadow root :
| Code HTML : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <video controls="" height="300" src="/test/video"> #shadow-root <div> <div> <div> <input type="button"> <input type="range" precision="float" max="548"> <div style="display: none;">0:00</div><div>8</div> <input type="button"> <input type="range" precision="float" max="1" style=""> <input type="button" style="display: none;"> <input type="button" style=""> </div> </div> </div> </video> |
La prise en main de shadow DOM est relativement simple.
Chrome disposait déjà d'un support de Shadow DOM V0, qui était une version très précoce de la norme que les éditeurs de navigateur web avaient implémentée de différentes manières. Google affirme que plusieurs d’entre ces éditeurs de navigateurs se sont mis d’accord sur la façon de gérer Shadow DOM, une volonté qui est manifestée dans la version V1 actuelle qui est utilisée par Chrome 53. Toutefois, Google a également maintenu le support de la version V0 au cas où des développeurs s’en servent encore. Le maintien de ces deux versions se fera jusqu’à ce que la plupart des développeurs aient migré vers la nouvelle version.
Autre point important : l’API PaymentRequest. Cette API, qui apporte une fonctionnalité d’autoremplissage, permet aux développeurs de faciliter la façon par laquelle les utilisateurs remplissent des formulaires de paiement. « Effectuer des paiements en ligne peut s’avérer un processus encombrant pour les utilisateurs. L’autoremplissage a facilité la saisie des informations. Mais essayer de remplir un formulaire de vérification sur mobile relève toujours du défi », explique Google. Aussi, Chrome 53 vient avec le support de l’API PaymentRequest et Google assure que son API fournit une méthode rapide et sécurisée pour sauvegarder les détails des utilisateurs dans le navigateur, que les utilisateurs se servent d’une carte de crédit ou toute autre méthode de paiement comme Android Pay. Les utilisateurs peuvent également fournir une adresse de facturation, une adresse de livraison et d’autres informations sans avoir à les écrire.
Notons également le support de l’API Web Bluetooth. Cette API est disponible à titre expérimental sur certaines plateformes et permet à quelques sites de communiquer avec des dispositifs à proximité via une connexion Bluetooth.
Parmi les autres changements, les développeurs seront en mesure de changer l’icône Chrome qui apparaît sur la barre de notification des utilisateurs lorsque le navigateur déclenche une alerte. La version Android de Chrome supporte l’attribut « autoplay » pour les vidéos HTML5. Toutefois, cet attribut va fonctionner si l’attribut « muted » est également utilisé. Ce qui signifie en clair que les vidéos pourront se lancer automatiquement si le développeur les a au préalable mises sur sourdine. Si le son est activé, par défaut, la vidéo ne va pas être lue automatiquement.
télécharger Chrome 53Source : blog Chrome, documentation shadow DOM
Envoyé par gCollin
