Chrome 123 bêta

Sauf indication contraire, les modifications suivantes s'appliquent à la dernière version du canal bêta de Chrome pour Android, ChromeOS, Linux, macOS et Windows. Pour en savoir plus sur les fonctionnalités listées ici, consultez les liens fournis ou la liste sur ChromeStatus.com. Chrome 123 est en version bêta depuis le 21 février 2024. Vous pouvez télécharger la dernière version sur Google.com pour ordinateur ou sur le Google Play Store sur Android.

CSS

Cette version ajoute cinq nouvelles fonctionnalités CSS.

Fonction de couleur CSS light-dark()

La fonction light-dark() en CSS permet aux développeurs d'adapter plus facilement le schéma de couleurs aux préférences de l'utilisateur pour le mode clair ou sombre.

Utilisez light-dark() pour spécifier deux valeurs de couleur différentes dans une seule propriété CSS. Le navigateur (ou l'appareil) choisit automatiquement la couleur appropriée en fonction de la valeur color-scheme calculée de l'élément. Par exemple, avec le code CSS suivant:

  • Si l'utilisateur a sélectionné un thème clair, l'élément .target aura un arrière-plan vert clair.
  • Si l'utilisateur a sélectionné un thème sombre, l'élément .target aura un arrière-plan vert.
html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

Mode d'affichage Picture-in-picture CSS

Ajoute la compatibilité avec la fonctionnalité multimédia CSS display-mode pour la valeur picture-in-picture. Cela permet aux développeurs Web d'écrire des règles CSS spécifiques qui ne sont appliquées que lorsque (une partie) de l'application Web est affichée en mode Picture-in-picture.

Pour en savoir plus sur cette fonctionnalité multimédia, consultez la documentation sur Picture-in-picture.

Propriété CSS align-content pour les blocs

La propriété CSS align-content est désormais compatible avec les conteneurs de bloc et les cellules de tableau. Auparavant, cette propriété n'était compatible qu'avec les éléments de grille et de flex. Par exemple, display: block, display: list-item et display: table-cell peuvent désormais être alignés à l'aide de align-content.

Pour en savoir plus, consultez la section Compatibilité avec align-content dans les mises en page de bloc et de tableau.

Propriété CSS field-sizing

À l'aide de la propriété field-sizing, les développeurs peuvent désactiver les tailles par défaut fixes des commandes de formulaire et faire dépendre leur taille de leur contenu. Cela permet de créer des champs de texte à croissance automatique.

Propriété CSS text-spacing-trim

Cette propriété applique le kerning aux caractères de ponctuation chinois, japonais et coréen (CJK) pour produire une typographie visuellement agréable, comme défini par les exigences de mise en page du texte japonais (JLREQ) et chinois (CLREQ).

De nombreux caractères de ponctuation CJK incluent un espacement interne au glyphe. Par exemple, le point et la parenthèse fermante CJK comportent généralement des espaces internes aux glyphes dans la moitié droite de leurs espaces de glyphes, afin de leur donner une avance constante comme les autres caractères idéographiques. Toutefois, lorsqu'ils apparaissent sur une ligne, les espaces internes aux glyphes deviennent excessifs. Cette fonctionnalité ajuste cet espacement excessif.

La propriété text-spacing-trim accepte l'une des quatre valeurs suivantes : normal, trim-start, space-all et space-first. Pour en savoir plus, consultez Présentation de quatre nouvelles fonctionnalités internationales dans CSS.

API Web

Autoriser la création d'identifiants WebAuthn dans un iFrame d'origine différente

Cette fonctionnalité permet aux développeurs Web de créer des identifiants WebAuthn (c'est-à-dire des identifiants de clé publique, appelés clés d'accès) dans des iFrames cross-origin. Deux conditions sont requises pour cette nouvelle fonctionnalité:

  • L'iFrame dispose d'une règle d'autorisation publickey-credentials-create-feature.
  • L'iFrame dispose d'une activation utilisateur temporaire.

Cela permettra aux développeurs de créer des clés d'accès dans des scénarios intégrés, par exemple après un flux d'authentification renforcée où la partie de confiance fournit une expérience d'identité fédérée.

Ensemble de fonctionnalités de rapports sur l'attribution

Chrome 123 ajoute la personnalisation des données de déclencheur et des filtres de valeur agrégables à l'API Attribution Reporting, qui se concentre sur les éléments suivants:

  • Configuration supplémentaire de l'API pour les rapports au niveau des événements en permettant la personnalisation de la cardinalité et des valeurs des données de déclencheur.
  • Configuration supplémentaire de l'API pour les rapports récapitulatifs en acceptant les filtres dans les valeurs agrégables.

Mesure de l'attribution entre applications et Web

Élargit l'API Attribution Reporting pour permettre d'attribuer les conversions qui se produisent sur le Web à des événements qui se produisent en dehors du navigateur, dans d'autres applications.

La proposition ici exploite la compatibilité au niveau de l'OS pour l'attribution. Plus précisément, il permet au développeur d'autoriser les événements sur le Web mobile à être associés aux événements de la Privacy Sandbox d'Android, bien que la prise en charge d'autres plates-formes puisse également être implémentée.

blocking=render sur les scripts de module intégrés

Il s'agit d'un petit changement qui supprime une limitation artificielle de <script blocking="render">. Avant ce changement, <script blocking="render"type="module"> nécessitait un attribut src, même si cet src était un URI de données. Il s'agit d'une contrainte inutile, car les scripts de module intégrés qui importent d'autres scripts doivent toujours pouvoir bloquer le rendu.

En effet, les transitions de vue entre les documents reposent souvent sur des scripts bloquant le rendu pour la personnalisation. Il est donc plus facile de créer des scripts bloquant le rendu pour cette fonctionnalité.

Picture-in-picture de document: autorisez l'API focus() à mettre en surbrillance l'ouvreur.

Vous pouvez désormais utiliser opener.focus() à partir d'une fenêtre Picture-in-picture de document pour mettre en surbrillance l'onglet propriétaire de la fenêtre Picture-in-picture du document au niveau du système.

Cela permet aux développeurs de ramener l'onglet d'origine au premier plan si nécessaire. Par exemple, lorsque l'utilisateur doit accéder à une expérience d'interface utilisateur qui ne tient pas dans la fenêtre Picture-in-picture plus petite.

Syntaxe with pour importer des attributs

Les attributs d'importation sont une fonctionnalité JavaScript qui permet d'annoter les déclarations d'importation, par exemple import xxx from "mod" with { type: "json" }. Chrome a initialement publié une version précédente de la proposition (dans Chrome 91) à l'aide du mot clé assert. Cette version a ensuite été mise à jour pour utiliser with en raison de quelques modifications nécessaires lors de son intégration avec HTML pour les modules JSON et CSS.

jitterBufferTarget

L'attribut jitterBufferTarget permet aux applications de spécifier une durée cible en millisecondes de contenu multimédia que le tampon de jitter RTCRtpReceiver doit contenir. Cela influence la quantité de mise en mémoire tampon effectuée par l'user-agent, ce qui affecte à son tour les retransmissions et la récupération des pertes de paquets. Modifier la valeur cible permet aux applications de contrôler le compromis entre le délai de lecture et le risque de manquer de trames audio ou vidéo en raison du jitter réseau.

Calendrier des frames d'animation longs

L'API Long Animation Frames est une extension de l'API Long Tasks. Il mesure la tâche ainsi que sa mise à jour de rendu ultérieure, en ajoutant des informations telles que les scripts de longue durée, le temps de rendu et le temps passé en mise en page et style forcé, appelé dépassement de la mise en page.

Les développeurs peuvent utiliser cette information comme diagnostic de la "lenteur", qui est mesurée par l'INP, en identifiant les causes de la congestion du thread principal, qui est souvent à l'origine d'un mauvais INP.

L'interface NavigationActivation ajoute navigation.activation. Cette valeur stocke l'état du document actuel au moment de son activation (par exemple, lorsqu'il a été initialisé ou restauré à partir du cache des pages précédentes et suivantes).

Cela signifie que les développeurs peuvent proposer des pages personnalisées en fonction de l'emplacement d'où l'utilisateur est venu. Par exemple, exécutez une animation différente s'ils proviennent de la page d'accueil.

Événement "pagereveal"

L'événement pagereveal est déclenché sur l'objet de fenêtre d'un document lors de la première opportunité de rendu après qu'un document a été chargé initialement, restauré à partir du cache avant-arrière ou activé à partir d'un prérendu.

Un auteur de page peut l'utiliser pour configurer une expérience d'entrée sur la page, comme une transition de vue à partir d'un état précédent.

PointerEvent.deviceId pour l'encrage avec plusieurs stylets

À mesure que les appareils dotés de fonctionnalités avancées de saisie au stylet deviennent de plus en plus courants, il est important que la plate-forme Web continue d'évoluer pour prendre pleinement en charge ces fonctionnalités avancées afin de proposer des expériences riches aux utilisateurs finaux et aux développeurs. L'une de ces avancées est la capacité du numériseur d'un appareil à reconnaître plusieurs appareils à stylet qui interagissent avec lui simultanément. Cette fonctionnalité est une extension de l'interface PointerEvent pour inclure un nouvel attribut, deviceId, qui représente un identifiant unique persistant au niveau de la session et isolé du document qu'un développeur peut utiliser de manière fiable pour identifier les stylos individuels qui interagissent avec la page.

Vérifications de l'accès au réseau privé pour les requêtes de navigation: mode avertissement uniquement

Avant qu'un site Web A n'accède à un site B dans le réseau privé de l'utilisateur, cette fonctionnalité effectue les opérations suivantes:

  1. Vérifie si la requête a été initiée à partir d'un contexte sécurisé.
  2. Envoie une requête préliminaire et vérifie si le site B répond avec un en-tête autorisant l'accès au réseau privé.

Il existe déjà des fonctionnalités pour les sous-ressources et les nœuds de calcul, mais cette addition s'applique spécifiquement aux requêtes de navigation.

Ces vérifications ont pour but de protéger le réseau privé de l'utilisateur. Étant donné que cette fonctionnalité fonctionne en mode "avertissement uniquement", elle n'échoue pas les requêtes si l'une des vérifications échoue. À la place, un avertissement s'affiche dans les outils de développement pour aider les développeurs à se préparer à l'application forcée de cette fonctionnalité.

Indicateur client Sec-CH-UA-Form-Factor

Cette indication indique le "form-factor" de l'user-agent ou de l'appareil, afin que le site puisse adapter sa réponse.

API de routage statique de service workers

Cette API permet aux développeurs de configurer le routage et de décharger des tâches simples que les services workers effectuent. Si la condition correspond, la navigation se produit sans démarrer de services workers ni exécuter de code JavaScript, ce qui permet aux pages Web d'éviter les pénalités de performances dues aux interceptions de service workers. Pour en savoir plus, consultez cet article de blog précédent sur cette API.

Mise à jour de Shared Storage

Cette mise à jour permet d'exécuter des worklets inter-origines sans avoir à créer d'iframe.

Encodage du contenu zstd

Zstandard, ou zstd, est un mécanisme de compression des données décrit dans la RFC 8878. Il s'agit d'un algorithme de compression rapide sans perte, qui cible les scénarios de compression en temps réel au niveau zlib et offre de meilleurs ratios de compression. Le jeton zstd a été ajouté en tant que jeton Content-Encoding enregistré par l'IANA.

L'ajout de la prise en charge de zstd en tant qu'encodage de contenu permet de charger les pages plus rapidement, d'utiliser moins de bande passante, et de consacrer moins de temps, de processeur et d'énergie à la compression sur nos serveurs, ce qui permet de réduire les coûts de serveur.

Nouveaux tests Origin

Dans Chrome 123, vous pouvez activer les nouveaux essais de début suivants.

Intégration de la promesse JavaScript WebAssembly

Pour prendre en charge les applications responsives écrites à l'aide de WebAssembly, il est nécessaire de fournir des fonctionnalités permettant de suspendre et de reprendre les programmes WebAssembly.

Le principal cas d'utilisation initial de l'intégration des promesses est de permettre aux programmes WebAssembly dont la source repose sur des API synchrones d'utiliser des API asynchrones de plus en plus courantes sur la plate-forme Web.

Inscrivez-vous à la phase d'évaluation de l'intégration de la promesse d'origine.

Déménagements

Chrome 123 supprime la fonctionnalité suivante.

Alias window-placement pour l'autorisation et la règle d'autorisation window-management

Dans Chrome 111, window-management a été ajouté comme alias pour les chaînes d'autorisation et de règle d'autorisation window-placement. Il s'agissait d'un effort plus vaste visant à renommer les chaînes en abandonnant et en supprimant finalement window-placement. Ce changement de terminologie améliore la longévité du descripteur à mesure que l'API Window Management évolue au fil du temps.

Les avertissements d'abandon de l'alias window-placement ont commencé dans Chrome 113. Il sera désormais supprimé.