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 les animations font-palette et d'autres mises à jour CSS.
L'API Speculation Rules a été améliorée.
Vous pouvez essayer l'API Element Capture dans une phase d'évaluation.
Et ce n'est pas tout !

Je m'appelle Adriana Jara. Entrons maintenant dans le vif du sujet et découvrons 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é prend désormais en charge les animations. Le basculement entre les palettes devient donc une transition fluide entre les deux palettes sélectionnées.

Les pseudo-éléments ::spelling-error et ::grammar-error vous permettent de personnaliser les couleurs pour les fautes d'orthographe et de grammaire, de mettre en surbrillance 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 du SVG a été amélioré. Il fait suite à l'amélioration de la prise en charge des masques CSS dans Chrome 120, qui ajoute une nouvelle prise en charge des masques au format SVG (plusieurs masques, en plus de mask-mode, mask-composite, mask-position et mask-repeat). De plus, les masques SVG distants (par exemple, masque: url(masks.svg#star)) sont désormais compatibles.

Correction: une version précédente de cet article mentionnait l'ajout de la prise en charge des supports() conditions à @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 les pages à précharger. Cela permet d'améliorer l'expérience utilisateur en réduisant le temps de navigation.

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 à charger spéculatif à partir des éléments d'une page. Les règles du document peuvent inclure des critères pour lesquels de ces liens peuvent être utilisés. Associé au nouveau champ eagerness, ce paramètre vous permet de précharger automatiquement ou immédiatement les liens sur les pages, lorsque l'utilisateur pointe sur l'annonce ou clique dessus.

Voici un exemple de règles de document:

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

Une modification distincte 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 à l'ensemble de règles du document.

De plus, la suggestion No-Vary-Search permet la mise en correspondance des préchargements spéculatifs même si les paramètres de requête de l'URL changent. L'en-tête de réponse HTTP No-Vary-Search déclare que tout ou partie 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 de 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 provoquer des incohérences.

Pour en savoir plus sur ces modifications, consultez les 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 une 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 à la fois le contenu occlus et occlus.

L'API Element Capture est par exemple utile dans les applications de visioconférence qui permettent d'intégrer des applications tierces dans un iFrame. Dans ce scénario, vous souhaiterez peut-être capturer cet iFrame sous forme de vidéo et le transmettre à des participants à distance.

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

Notez que vous pouvez utiliser Region Capture pour effectuer cette opération, mais dans ce cas, si un contenu, tel qu'une liste déroulante, s'affiche au-dessus du contenu sélectionné, ce menu déroulant fera partie de l'enregistrement.

Capture d'écran d'une liste déroulante. — La liste déroulante d'Elad s'affiche en haut 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 affichée — François ne voit pas la liste déroulante d'Elad.

Consultez 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, il y en a bien d'autres.

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 le sélecteur d'options d'un élément <select> par programmation avec la méthode showPicker() de HTMLSelectElement.
scope_extensions est en phase d'évaluation. Elle permet d'étendre les comportements d'une application Web à d'autres origines, à condition qu'il existe un accord entre l'origine principale d'une application Web et les origines associées.

Documentation complémentaire

Cela ne couvre que certains points clés. Consultez les liens suivants pour modifications supplémentaires dans Chrome 121.

Pour vous tenir informé, abonnez-vous à la Chaîne YouTube des développeurs Chrome, et vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Bonjour Adriana Jara ! Dès la sortie de Chrome 122, je serai là pour vous présenter les nouveautés de Chrome.