Sauf indication contraire, les modifications suivantes s'appliquent à la dernière version bêta de Chrome pour Android, ChromeOS, Linux, macOS et Windows. Pour en savoir plus sur les fonctionnalités listées ici, cliquez sur les liens fournis ou consultez 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 inclut 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 la palette de couleurs aux préférences d'un utilisateur pour le mode clair ou sombre.
Utilisez light-dark()
pour spécifier deux valeurs de couleur différentes dans une même 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 CSS suivant:
- Si l'utilisateur a sélectionné un thème clair, l'élément
.target
aura un arrière-plan vert citron. - Si l'utilisateur a sélectionné un thème sombre, l'élément
.target
a un fond vert.
html {
color-scheme: light dark;
}
.target {
background-color: light-dark(lime, green);
}
Mode d'affichage Picture-in-picture CSS
Ajout de la prise en charge de la fonctionnalité mé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 l'application Web est affichée en mode Picture-in-picture (une partie de l'application).
Pour en savoir plus sur cette fonctionnalité multimédia, consultez la documentation Picture-in-picture.
Propriété CSS align-content pour les blocages
La propriété CSS align-content
est désormais compatible avec les conteneurs de blocs et les cellules de tableau. Auparavant, cette propriété n'était disponible que pour les éléments de type grille et 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 Compatibilité de align-content
dans les mises en page de blocs et de tables.
Propriété CSS field-sizing
À l'aide de la propriété field-sizing
, les développeurs peuvent désactiver les tailles fixes par défaut des commandes de formulaire et faire en sorte que leur taille dépende de leur contenu. Vous pouvez ainsi créer des champs de texte qui s'agrandissent automatiquement.
Propriété CSS text-spacing-trim
Cette propriété applique le crénage aux caractères de ponctuation chinois, japonais et coréen (CJK) afin d'obtenir une typographie visuellement agréable, telle que définie par JLREQ (exigences pour la mise en page du texte en japonais) et CLREQ (exigences pour la mise en page du texte chinois).
De nombreux caractères de ponctuation CJK incluent un espacement interne des glyphes. Par exemple, le point final CJK et la parenthèse fermée CJK comportent généralement des espacements internes des glyphes dans la moitié droite de leurs espaces glyphes, afin de leur donner une avance constante comme d'autres caractères idéographiques. Mais lorsqu'ils apparaissent sur une ligne, les espaces internes des glyphes deviennent excessifs. Cette fonctionnalité permet d'ajuster un 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 les CSS.
API Web
Autoriser la création d'identifiants WebAuthn dans un iFrame multi-origine
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 multi-origines. Deux conditions sont requises pour cette nouvelle fonctionnalité:
- L'iFrame est soumis à une règle d'autorisation
publickey-credentials-create-feature
. - L'iFrame est activé temporairement par l'utilisateur.
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 parcours de renforcement de l'identité où le tiers de confiance fournit une expérience d'identité fédérée.
Groupe de fonctionnalités des rapports sur l'attribution
Chrome 123 ajoute des filtres de personnalisation des données de déclencheur et de valeurs agrégables à l'API Attribution Reporting, axés sur les éléments suivants:
- Configurabilité supplémentaire de l'API pour les rapports au niveau des événements avec la personnalisation de la cardinalité et des valeurs des données du déclencheur.
- Configurabilité supplémentaire de l'API pour les rapports de synthèse grâce à la prise en charge de filtres dans les valeurs agrégables.
Mesure de l'attribution Web et multi-application
Étend l'API Attribution Reporting pour permettre d'attribuer les conversions qui se produisent sur le Web à des événements qui se produisent hors du navigateur, dans d'autres applications.
Cette proposition tire parti de la prise en charge de l'attribution au niveau du système d'exploitation. Plus spécifiquement, elle 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é
Il s'agit d'une petite modification qui supprime une limitation artificielle de <script blocking="render">
.
Avant cette modification, <script blocking="render"type="module">
nécessite un attribut src
, même si src
est un URI de données.
Il s'agit d'une contrainte inutile, car les scripts de module intégré qui importent d'autres scripts devraient toujours pouvoir rendre le bloc de rendu.
Cela s'explique par le fait que les transitions de vue inter-document reposent souvent sur des scripts bloquant l'affichage pour la personnalisation. Il est donc possible de faciliter la création de scripts bloquant l'affichage.
Document Picture-in-picture: autoriser l'API focus()
à sélectionner l'ouverture
Vous pouvez maintenant utiliser opener.focus()
à partir d'une fenêtre Picture-in-picture du document pour placer le curseur au niveau du système sur l'onglet qui contient la fenêtre Picture-in-picture du document.
Cela permet aux développeurs de remettre l'onglet d'origine au premier plan si nécessaire. (par exemple, lorsque l'utilisateur doit accéder à une interface utilisateur qui ne rentre pas dans la fenêtre Picture-in-picture plus petite).
Syntaxe de with
pour les attributs d'importation
Les attributs d'importation sont une fonctionnalité JavaScript permettant d'annoter les déclarations d'importation, par exemple import xxx from "mod" with { type: "json" }
. Chrome a initialement expédié une version précédente de la proposition (dans Chrome 91) utilisant assert
comme mot clé. Cette version a ensuite été mise à jour pour utiliser with
en raison de certaines modifications nécessaires lors de son intégration au code 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 gigue RTCRtpReceiver
doit contenir. Cela a une incidence sur la quantité de mise en mémoire tampon effectuée par le user-agent, ce qui affecte les retransmissions et la récupération après la perte 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 d'images audio ou vidéo en raison de la gigue du réseau.
Durée du frame d'animation longue
L'API Long Animation Frames est une extension de l'API Long Tasks. Elle 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 d'affichage et le temps consacré à la mise en page et au style forcés, ce que l'on appelle le thrashing de la mise en page.
Les développeurs peuvent s'en servir comme diagnostic de "lenteur", qui est mesurée par INP, en identifiant les causes de l'encombrement du thread principal, qui est souvent à l'origine d'une mauvaise INP.
NavigationActivation
L'interface NavigationActivation ajoute navigation.activation
. Cet état stocke l'état de l'activation du document actuel (par exemple, sa date d'initialisation ou sa restauration à partir du cache amélioré).
Cela signifie que les développeurs peuvent proposer des pages personnalisées en fonction de l'endroit où l'utilisateur a accédé à son site. Par exemple, vous pouvez exécuter une animation différente si elle provient 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 son chargement initial, sa restauration à partir du cache amélioré ou son activation à partir d'un prérendu.
L'auteur d'une page peut l'utiliser pour configurer une expérience de saisie de la page, telle qu'une transition de vue depuis un état précédent.
PointerEvent.deviceId pour l'encrage multi-stylo
Les appareils dotés de fonctionnalités avancées de saisie au stylet sont de plus en plus répandus. Il est donc important que la plate-forme Web continue d'évoluer pour être entièrement compatibles avec 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 stylets interagissant simultanément avec lui. Cette fonctionnalité est une extension de l'interface PointerEvent
permettant d'inclure un nouvel attribut, deviceId
, qui représente un identifiant unique persistant, 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 que le site A ne accède à un autre site B du réseau privé de l'utilisateur, cette fonctionnalité effectue les opérations suivantes:
- Vérifie si la requête a été lancée à partir d'un contexte sécurisé.
- Envoie une requête préliminaire et vérifie si 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 cet ajout est spécifiquement destiné aux requêtes de navigation.
Ces vérifications sont effectuées pour protéger le réseau privé de l'utilisateur. Étant donné que cette fonctionnalité est en mode "avertissement uniquement", les requêtes ne seront pas refusées si l'une des vérifications échoue. À la place, un avertissement s'affichera dans les outils de développement afin d'aider les développeurs à se préparer à la prochaine mesure d'application.
Indice client Sec-CH-UA-Form-Factor
Cette indication indique le "facteur de forme" du user-agent ou de l'appareil, afin que le site puisse adapter sa réponse.
API Service Worker Static Routing
Cette API permet aux développeurs de configurer le routage et de décharger les tâches simples des service workers. Si la condition correspond, la navigation se produit sans démarrer les service workers ni exécuter JavaScript, ce qui permet aux pages Web d'éviter les pénalités de performances dues aux interceptions des service workers. Pour en savoir plus, consultez l'article de blog précédent concernant cette API.
Mise à jour du stockage partagé
Cette mise à jour permet d'exécuter des worklets d'origines différentes sans avoir à créer d'iFrame.
Encodage de contenu zstd
Zstandard, ou zstd, est un mécanisme de compression de données décrit dans RFC8878. Il s'agit d'un algorithme de compression rapide sans perte qui cible des scénarios de compression en temps réel au niveau de zlib et offre de meilleurs taux de compression. Le jeton zstd
a été ajouté en tant que jeton Content-Encoding enregistré par l'IANA.
L'ajout de zstd
en tant qu'encodage de contenu permet de charger les pages plus rapidement, d'utiliser moins de bande passante, et de réduire le temps, l'utilisation du processeur et l'énergie sur la compression de nos serveurs, ce qui se traduit par une réduction des coûts de serveur.
Nouvelles phases d'évaluation
Dans Chrome 123, vous pouvez activer les nouvelles phases d'évaluation suivantes.
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 réactiver les programmes WebAssembly.
Le principal cas d'utilisation initial de l'intégration de promesses consiste à 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 des promesses.
Déménagements
Chrome 123 supprime la fonctionnalité suivante.
L'alias window-placement
pour la règle d'autorisation window-management
Dans Chrome 111, window-management
a été ajouté en tant qu'alias pour les chaînes d'autorisation window-placement
et de règles d'autorisation.
Cela faisait partie d'un effort plus important pour renommer les chaînes en abandonnant et en supprimant window-placement
. Ce changement de terminologie améliore la longévité du descripteur à mesure que l'API Window Management évolue.
Les avertissements d'abandon de l'alias window-placement
ont commencé dans Chrome 113 et seront désormais supprimés.