Dans Chrome 71, nous avons ajouté la compatibilité avec les éléments suivants:
- L'affichage des heures relatives fait désormais partie de l'API
Intl. - Spécifiez de quel côté du texte le soulignement doit apparaître pour le texte qui s'affiche verticalement.
- Activation de l'utilisateur requise pour utiliser l'API de synthèse vocale.
Et ce n'est pas tout ! En savoir plus
Je m'appelle Pete LePage. Voyons ce que Chrome 71 propose aux développeurs.
Journal des modifications
Il ne s'agit là que de quelques-uns des points forts. Pour en savoir plus sur les modifications apportées à Chrome 71, consultez les liens ci-dessous.
- Liste des modifications du dépôt source Chromium
- Mises à jour de ChromeStatus.com pour Chrome 71
- Obsoletes et suppressions dans Chrome 71
Afficher des durées 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 un événement s'est produit 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/heure courantes fournissent des fonctions localisées pour gérer cela pour nous. En fait, Moment JS est l'une des premières bibliothèques que j'ajoute, expressément à cet effet, pour presque toutes les applications Web que je crée.
Chrome 71 introduit Intl.RelativeTimeFormat(), qui transfère le travail vers le moteur JavaScript et permet de formater les temps relatifs de manière localisée. Cela nous permet d'améliorer légèrement les performances et signifie que nous n'avons besoin de ces bibliothèques en tant que 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 Intl.RelativeTimeFormat API de Mathias.
Spécifier l'emplacement souligné pour le texte vertical
Lorsque du texte chinois ou japonais est affiché dans un flux vertical, les navigateurs ne sont pas cohérents quant à l'emplacement du soulignement. Il peut être à gauche ou à droite.
Dans Chrome 71, la propriété text-underline-position accepte désormais left ou right dans la spécification de décoration de texte CSS3. La spécification de décoration de texte CSS3 ajoute plusieurs propriétés permettant 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 avons accédé à un site et qu'il a soudain commencé à nous parler. Les règles de lecture automatique empêchent les sites de lire automatiquement des fichiers audio ou vidéo avec du contenu audio. 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 activation par l'utilisateur sur la page pour fonctionner. Cela la met en conformité avec les autres règles sur la lecture automatique. Si vous essayez de l'utiliser avant que l'utilisateur n'ait interagi avec la page, une erreur se produira.
const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
window.speechSynthesis.speak(utterance);
} catch (ex) {
console.log('speechSynthesis not available', ex);
}
Rien de pire que d'arriver sur un site et d'être surpris, vous et vos collègues.
Et bien plus !
Ce ne sont là que quelques-unes des modifications apportées à Chrome 71 pour les développeurs.
- La méthode
Element.requestFullscreen()peut désormais être personnalisée sur Android. Elle vous permet de choisir d'afficher la barre de navigation ou un mode complètement immersif, dans lequel aucune commande d'agent utilisateur n'est affichée tant qu'un geste utilisateur 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. - Pour mettre Chrome en conformité avec la spécification Shadow DOM v1, Chrome 71 calcule désormais la spécificité des pseudo-classes
:host()et:host-context(), ainsi que des arguments pour::slotted().
Vidéos du Chrome DevSummit
Si vous n'avez pas pu assister au Chrome Dev Summit ou si vous y êtes allé, mais que vous n'avez pas vu toutes les conférences, regardez la playlist du Chrome Dev Summit 2018 sur notre chaîne YouTube.
Eva et Phil ont présenté des techniques intéressantes pour utiliser les service workers dans Créer des applications plus rapides et plus résilientes avec les service workers.
Mariko et Jake ont expliqué comment ils ont créé Squoosh dans Complex JS-heavy Web Apps, Avoiding the Slow.
Katie et Houssein ont présenté d'excellentes techniques pour maximiser les performances de votre site dans Speed Essentials: Key Techniques for Fast Websites (Éléments essentiels pour accélérer les sites Web).
Jake a fait tomber le gâteau. Vous trouverez de nombreuses autres vidéos dans la playlist du Sommet des développeurs Chrome 2018. N'hésitez pas à les découvrir.
S'abonner
Si vous souhaitez rester informé de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.
Je m'appelle Pete LePage. Dès que Chrome 72 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.