Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 121

Adriana Jara

Voici les informations à retenir :

Ajoutez une touche unique à votre texte avec l'animation font-palette et d'autres mises à jour CSS.
Des améliorations ont été apportées à l'API Speculation Rules.
Vous pouvez essayer l'API Element Capture lors d'une phase d'évaluation.
Et ce n'est pas tout : ce n'est pas tout.

Je m'appelle Adriana Jara. Découvrons ensemble les nouveautés de Chrome 121 pour les développeurs.

Mises à jour CSS.

Commençons par les mises à jour CSS:

Les propriétés scrollbar-color et scrollbar-width sont désormais disponibles. Vous pouvez ainsi personnaliser les barres de défilement et modifier, comme vous l'avez probablement deviné, leur couleur et leur largeur.

La propriété font-palette vous permet de sélectionner une palette spécifique pour afficher une police de couleur. Cette propriété est désormais compatible avec les animations. Le passage d'une palette à l'autre se fait donc en douceur entre les deux palettes sélectionnées.

Les pseudo-éléments ::spelling-error et ::grammar-error vous permettent de personnaliser les couleurs pour corriger les fautes d'orthographe et de grammaire, de mettre en évidence les mots mal orthographiés avec des couleurs d'arrière-plan ou d'autres décorations, et d'implémenter un correcteur orthographique personnalisé avec une apparence plus intégrée.

Le masquage CSS pour SVG fait suite à l'amélioration de la prise en charge des masques CSS dans Chrome 120, avec l'ajout de la prise en charge des masques au format SVG (plusieurs masques, ainsi que mask-mode, mask-composite, mask-position et mask-repeat). En outre, les masques SVG distants (par exemple, url(masks.svg#star)) sont désormais pris en charge.

Correction: une version précédente de cet article mentionnait l'ajout de la prise en charge des conditions supports() dans @import, ce qui n'était pas le cas. Ce changement est inclus dans Chrome 122.

Mises à jour de l'API Speculation Rules

Les sites peuvent utiliser l'API Speculation Rules pour indiquer de manière programmatique à Chrome les pages à précharger, afin d'améliorer l'expérience utilisateur en réduisant le temps de navigation sur les pages.

L'API est désormais compatible avec les règles de document: il s'agit d'une extension de la syntaxe des règles de spéculation qui permet au navigateur d'obtenir la liste des URL pour le chargement spéculatif à partir des éléments d'une page. Les règles de documents peuvent inclure des critères pour lesquels de ces liens peuvent être utilisés. Cette fonctionnalité, associée au nouveau champ eagerness, vous permet de précharger automatiquement ou de précharger automatiquement les liens sur les pages immédiatement, lorsque l'utilisateur pointe dessus ou le survol de la souris.

Voici un exemple de règles de document:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

Une autre modification permet de spécifier des règles de spéculation à l'aide de l'en-tête de réponse HTTP Speculation-Rules. L'en-tête est une alternative à l'utilisation d'éléments <script> intégrés. La valeur de cet en-tête doit être une URL pointant vers une ressource de texte avec le type MIME "application/speculationrules+json". Les règles de la ressource seront ajoutées au jeu de règles du document.

De plus, l'indice No-Vary-Search permet aux préchargements spéculatifs de correspondre, même si les paramètres de requête d'URL changent. L'en-tête de réponse HTTP No-Vary-Search déclare qu'une partie ou la totalité de la requête d'une URL peut être ignorée à des fins de mise en correspondance. Il peut déclarer que l'ordre des clés des paramètres de requête ne doit pas empêcher les correspondances, que des paramètres de requête spécifiques ne doivent pas empêcher les correspondances ou que seuls certains paramètres de requête connus doivent entraîner des incohérences.

Pour en savoir plus sur ces modifications, consultez la page Améliorations apportées à l'API Speculation Rules.

Phase d'évaluation de l'API Element Capture

L'API Element Capture est disponible en phase d'évaluation. Cette API vous permet de capturer et d'enregistrer un élément HTML spécifique. Elle transforme une capture de l'intégralité de l'onglet en capture d'une sous-arborescence DOM spécifique, ne capturant que les descendants directs de l'élément cible. En d'autres termes, il recadre et supprime les contenus masqués ou masqués.

L'API Element Capture s'avère par exemple utile dans les applications de visioconférence qui vous permettent d'intégrer des applications tierces dans un iFrame. Dans ce scénario, vous pouvez capturer cet iFrame sous forme de vidéo et le transmettre aux participants à distance.

Capture d'écran d'une visioconférence dans Chrome. — Elad utilise une application tierce lors d'un appel en visioconférence avec François.

Pour ce faire, vous pouvez utiliser la fonctionnalité Capture de région, mais si un contenu (une liste déroulante, par exemple) se superpose au contenu sélectionné, il fera partie de l'enregistrement.

Capture d'écran d'une liste déroulante — La liste déroulante d'Elad s'affiche au-dessus du contenu reçu par François.

L'API Element Capture résout ce problème en vous permettant de cibler l'élément que vous souhaitez partager.

Capture d'écran de l'élément cible sans liste déroulante — François ne voit pas la liste déroulante d'Elad.

Règlement : Capturez un flux vidéo à partir de n'importe quel élément pour obtenir des exemples de code et inscrivez-vous à la phase d'évaluation d'ElementCapture.

Et bien plus !

Bien sûr, ce n’est pas tout.

Les méthodes resizeBy() et resizeTo(), qui font partie de l'API Document Picture-in-picture, nécessitent désormais un geste de l'utilisateur.
Vous pouvez ouvrir de manière programmatique le sélecteur d'options d'un élément <select> avec la méthode showPicker() de HTMLSelectElement.
scope_extensions est en phase d'évaluation en phase d'évaluation. Il permet d'étendre les comportements d'une application Web pour inclure d'autres origines, s'il existe un accord entre l'origine principale d'une application Web et les origines associées.

Complément d'informations

Nous n'aborderons ici que certains points clés. Consultez les liens suivants pour obtenir des modifications supplémentaires dans Chrome 121.

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Bonjour Adriana Jara, et dès la sortie de Chrome 122, je serai là pour vous informer des nouveautés de Chrome !