Dans Chrome 71, nous avons ajouté la prise en charge des éléments suivants:
- L'affichage d'heures relatives fait désormais partie de l'API
Intl. - Spécifier l'extrémité du texte qui doit être soulignée pour le texte qui s'affiche verticalement.
- L'activation de l'utilisateur est requise avant d'utiliser l'API de synthèse vocale.
Et ce n'est pas tout : beaucoup plus !
Je m'appelle Pete LePage. C'est parti pour découvrir les nouveautés de Chrome 71 pour les développeurs !
Journal des modifications
Cet article ne présente que certains des points forts. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 71.
- Liste des modifications du dépôt source Chromium
- Mises à jour du site ChromeStatus.com pour Chrome 71
- Abandons et suppressions de Chrome 71
Afficher les heures relatives avec Intl.RelativeTimeFormat()
De nombreuses applications Web utilisent des expressions telles que "hier", "dans deux jours" ou "il y a une heure" pour indiquer quand quelque chose s'est passé ou va se produire, au lieu d'afficher la date et l'heure complètes.
L'affichage des heures relatives est devenu si courant que la plupart des bibliothèques de date et d'heure courantes fournissent des fonctions localisées pour gérer cela à notre place. D'ailleurs, presque toutes les applications Web que je crée, Moment JS est l'une des premières bibliothèques que j'ajoute, expressément à cette fin.
Chrome 71 introduit Intl.RelativeTimeFormat(), qui transfère le travail au moteur JavaScript et permet la mise en forme localisée des durées relatives. Cela nous permet d'améliorer légèrement les performances et de n'avoir besoin de ces bibliothèques sous forme de polyfill que lorsqu'un navigateur n'est pas encore compatible avec les nouvelles API.
const rtf = new Intl.RelativeTimeFormat('en');
rtf.format(3.14, 'second');
// → 'in 3.14 seconds'
rtf.format(-15, 'minute');
// → '15 minutes ago'
Son utilisation est simple : créez une instance et spécifiez les paramètres régionaux, puis appelez simplement le format avec l'heure relative. Pour en savoir plus, consultez l'article de Mathias The Intl.RelativeTimeFormat API.
Spécification de l'emplacement de soulignement pour le texte vertical
Lorsque du texte chinois ou japonais est affiché dans un flux vertical, les navigateurs ne sont pas cohérents avec l'emplacement du soulignement. Il peut se trouver à gauche ou à droite.
Dans Chrome 71, la propriété text-underline-position accepte désormais left ou right dans les spécifications de décoration de texte CSS3. La spécification de décoration de texte CSS3 ajoute plusieurs nouvelles propriétés qui permettent de spécifier le type de ligne à utiliser, le style, la couleur et la position.
.left {
text-underline-position: left;
}
.right {
text-underline-position: right;
}
La synthèse vocale nécessite l'activation de l'utilisateur
Nous avons tous été surpris lorsque nous accédons à un site et qu'il commence soudainement à nous parler. Les règles de lecture automatique empêchent les sites de lire automatiquement des fichiers audio ou vidéo. Certains sites ont essayé de contourner ce problème en utilisant plutôt l'API de synthèse vocale.
À partir de Chrome 71, l'API de synthèse vocale nécessite désormais une sorte d'activation de l'utilisateur sur la page pour fonctionner. Il est ainsi conforme aux autres règles de lecture automatique. Si vous essayez de l'utiliser avant que l'utilisateur n'ait interagi avec la page, une erreur se déclenchera.
const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
window.speechSynthesis.speak(utterance);
} catch (ex) {
console.log('speechSynthesis not available', ex);
}
Il n'y a rien de pire que d'aller sur un site et de le voir vous surprendre, ainsi que vos collègues assis autour de vous.
Et bien plus !
Ce ne sont là que quelques-unes des modifications apportées à Chrome 71 pour les développeurs, mais il y en a bien d'autres.
- La méthode
Element.requestFullscreen()peut désormais être personnalisée sur Android et vous permet de choisir entre rendre la barre de navigation visible et un mode complètement immersif dans lequel aucune commande user-agent ne s'affiche tant qu'un geste n'est pas effectué. - Le mode d'identifiants par défaut pour les requêtes de script de module est passé de
omitàsame-origin. - De plus, afin d'aligner Chrome sur la spécification Shadow DOM v1, Chrome 71 calcule à présent la spécificité des pseudo-classes
:host()et:host-context(), ainsi que des arguments de::slotted().
Vidéos du Dev Summit sur Chrome
Si vous ne vous êtes pas rendu au Chrome Dev Summit ou si vous n'avez pas assisté à toutes les discussions, consultez la playlist Chrome Dev Summit 2018 sur notre chaîne YouTube.
Eva et Phil ont découvert quelques techniques intéressantes d'utilisation des service workers dans leur article Concevoir des applications plus rapides et plus résilientes avec des service workers.
Mariko et Jake ont expliqué comment ils compilaient Squoosh dans l'article Complex JS-heavy Web Apps, Failed the Lent (Applications Web complexes comportant beaucoup de JavaScript, pour éviter le ralentissement).
Katie et Houssein ont découvert d'excellentes techniques pour maximiser les performances de votre site dans l'article Speed Essentials: Key Techniques for Fast Websites.
Jake a fait tomber le gâteau. Vous trouverez de nombreuses autres vidéos incroyables dans la playlist Chrome DevSummit 2018, alors n'hésitez pas à les regarder.
S'abonner
Pour suivre l'actualité de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome afin de recevoir une notification par e-mail chaque fois qu'une nouvelle vidéo est mise en ligne.
Je m'appelle Pete LePage et, dès la sortie de Chrome 72, je serai là pour vous dire : quelles sont les nouveautés de Chrome !