- Chrome 62 rend l'API d'informations sur le réseau plus utile en fournissant des métriques de performances réelles plutôt que des résultats théoriques.
- Les polices de variables OpenType sont désormais compatibles.
- Vous pouvez capturer des flux multimédias à partir d'éléments multimédias HTML.
- J'ai un rappel spécial concernant un changement important qui arrivera dans Chrome 62.
Et ce n'est pas tout : beaucoup plus !
Je m'appelle Pete LePage. C'est parti pour découvrir les nouveautés de Chrome 62 pour les développeurs.
Vous souhaitez consulter la liste complète des modifications ? Consultez la liste des modifications apportées au dépôt source Chromium.
Indicateur de qualité du réseau
L'API Network Information est disponible dans Chrome depuis un certain temps, mais elle ne fournit qu'un débit réseau théorique compte tenu de la connexion de l'utilisateur. Imaginez que vous êtes connecté au Wi-Fi, mais connecté à un point d’accès mobile qui ne dispose que d’un débit 2G ? L'API signale une connexion Wi-Fi.
console.log(navigator.connection.type);
> wifi
Dans Chrome 62, l'API a été étendue pour fournir des métriques de performances réseau réelles au client. Ces signaux de qualité du réseau vous permettent d'adapter le contenu au réseau. Par exemple, sur les connexions très lentes, vous pouvez améliorer les performances de chargement des pages en diffusant une version réduite.
Pour simplifier la logique de votre application, l'API renvoie les performances réseau mesurées en termes de comparaison avec une connexion mobile. Par exemple, si vous êtes connecté à une connexion par fibre optique ultra rapide, l'API indique 4G.
console.log(navigator.connection.effectiveType);
> 4G
Ces signaux sont également disponibles en tant qu'en-têtes de requête HTTP et activés via des indications client. Consultez l'exemple et les spec pour en savoir plus.
Polices Variable OpenType
Traditionnellement, une police ne contenait qu'une seule instance d'une famille de polices, par exemple une épaisseur ou un étirement. Si vous souhaitez utiliser des polices normales, en gras et en italique, vous devez inclure trois polices distinctes, ce qui augmentera le poids de votre page.
Une police variable OpenType est l'équivalent de plusieurs polices individuelles qui peuvent être empaquetées de manière compacte dans un seul fichier de police. En ajustant la propriété CSS font-variation-settings, vous pouvez facilement ajuster l'étirement, le style, l'épaisseur et d'autres éléments pour offrir un nombre infini de variantes stylistiques. Ces trois polices peuvent désormais
être combinées en un seul fichier compact.
.heading {
font-family: "Avenir Next Variable";
font-size: 48px;
font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
font-family: "Avenir Next Variable";
font-size: 24px;
font-variation-settings: 'wght' 400;
}
Les polices variables OpenType constituent un nouvel outil puissant pour créer une typographie réactive et réduire la taille de la page. Pour en savoir plus, consultez le document Introducing OpenType Variable Fonts de John Hudson.
Capture multimédia à partir d'éléments DOM
Vous pouvez désormais capturer en direct du contenu dans un MediaStream directement à partir de HTMLMediaElements, comme l'audio et la vidéo, à l'aide de la capture multimédia à partir de l'API DOM Elements.
Après avoir appelé captureStream() sur un élément multimédia HTML, le contenu diffusé peut être manipulé, traité, envoyé à distance ou enregistré. Imaginez que vous utilisiez l'audio Web pour créer votre propre égaliseur ou vocodeur. Vous pouvez également diffuser le contenu sur un site distant à l'aide de WebRTC. Les possibilités sont presque infinies.
Libellés non sécurisés pour certaines pages HTTP
Comme nous l'avons annoncé précédemment, à partir de Chrome 62, lorsqu'un utilisateur saisit des données sur une page HTTP, Chrome la marque comme "Non sécurisé" à l'aide d'un libellé dans la barre d'adresse. Ce libellé s'affichera également en mode navigation privée pour toutes les pages HTTP.
Et bien plus !
Ce ne sont là que quelques-unes des modifications apportées à Chrome 62 pour les développeurs, bien sûr, mais il y en a bien d'autres.
- L'API Payment Request est désormais disponible sur Chrome pour iOS.
- Vous pouvez commencer à créer des expériences de réalité virtuelle enrichies expérimentales grâce à la phase d'évaluation de WebVR.
Ensuite, abonnez-vous à notre chaîne YouTube. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera mise en ligne.
Je m'appelle Pete LePage. Dès la sortie de Chrome 63, je serai là pour vous dire : les nouveautés de Chrome !