Version bêta de Chrome 133

Rachel Andrew

Publié le 15 janvier 2024

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 133 est en version bêta depuis le 15 janvier 2024. Vous pouvez télécharger la dernière version sur Google.com pour ordinateur ou sur le Google Play Store sur Android.

CSS et UI

Cette version ajoute sept nouvelles fonctionnalités CSS et d'UI.

Fonction attr() CSS avancée

Implémente l'augmentation de attr() spécifiée dans le niveau 5 du CSS, qui permet d'utiliser des types autres que <string> et dans toutes les propriétés CSS (en plus de la prise en charge existante du pseudo-élément content).

Pour en savoir plus, consultez Mise à niveau du CSS attr().

Pseudo-classe CSS :open

La pseudo-classe :open correspond à <dialog> et <details> lorsqu'elles sont ouvertes, et à <select> et <input> lorsqu'elles sont dans des modes qui comportent un sélecteur et que le sélecteur s'affiche.

Requêtes de conteneur d'état de défilement CSS

Utilisez des requêtes de conteneur pour styliser les descendants de conteneurs en fonction de leur état de défilement.

Le conteneur de requête est un conteneur de défilement ou un élément affecté par la position de défilement d'un conteneur de défilement. Vous pouvez interroger les états suivants:

  • stuck: un conteneur positionné de manière fixe est collé à l'un des bords de la zone de défilement.
  • snapped: un conteneur aligné sur le point d'ancrage de défilement est actuellement ancré horizontalement ou verticalement.
  • scrollable: indique si un conteneur de défilement peut être défilé dans la direction interrogée.

Un nouveau container-type: scroll-state permet d'interroger les conteneurs.

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

Pour en savoir plus, consultez scroll-state() CSS.

CSS text-box, text-box-trim et text-box-edge

Pour obtenir un équilibre optimal du contenu textuel, les propriétés text-box-trim et text-box-edge, ainsi que la propriété abrégée text-box, permettent de mieux contrôler l'alignement vertical du texte.

La propriété text-box-trim spécifie les côtés à couper, au-dessus ou en dessous, et la propriété text-box-edge spécifie comment le bord doit être coupé.

Ces propriétés vous permettent de contrôler précisément l'espacement vertical à l'aide des métriques de police. Pour en savoir plus, consultez CSS text-box-trim.

Valeur hint de l'attribut popover

L'API Popover spécifie le comportement pour deux valeurs de l'attribut popover: auto et manual. Cette fonctionnalité décrit une troisième valeur, popover=hint. Les indices, qui sont le plus souvent associés aux comportements de type "info-bulle", ont des comportements légèrement différents. La principale différence est qu'un hint est subordonné à auto lors de l'ouverture de piles imbriquées de popovers. Il est donc possible d'ouvrir un popover hint sans rapport alors qu'une pile existante de popovers auto reste ouverte.

L'exemple canonique est qu'un sélecteur <select> est ouvert (popover=auto) et qu'une info-bulle déclenchée par le survol (popover=hint) s'affiche. Cette action ne ferme pas le sélecteur <select>.

Améliorations apportées aux demandeurs et aux ancres des popovers

Ajoute une méthode impérative pour définir les relations des appelants entre les popovers avec popover.showPopover({source}). Permet aux relations des invocateurs de créer des références à des éléments d'ancres implicites.

Le popover imbriqué dans l'appelant ne doit pas l'invoquer à nouveau

Dans le cas suivant, le clic sur le bouton active correctement le pop-up. Toutefois, le clic sur le pop-up lui-même après cela ne devrait pas le fermer.

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

Auparavant, cela se produisait, car le clic du popover se propage vers <button> et active l'appelant, ce qui ferme le popover. Ce comportement a été modifié pour correspondre au comportement attendu.

API Web

Animation.overallProgress

Fournit aux développeurs une représentation pratique et cohérente de l'avancement d'une animation au fil de ses itérations, quelle que soit la nature de sa chronologie. Sans la propriété overallProgress, vous devez calculer manuellement l'avancement d'une animation, en tenant compte du nombre d'itérations de l'animation et si le currentTime de l'animation est un pourcentage du temps total (comme dans le cas des animations basées sur le défilement) ou une quantité de temps absolue (comme dans le cas des animations basées sur le temps).

Méthode pause() de l'objet Atomics

Ajoute la méthode pause() à l'objet d'espace de noms Atomics pour indiquer au processeur que le code actuel exécute un spinlock.

Rapports sur les hachages CSP pour les scripts

Pour des raisons de sécurité, les applications Web complexes doivent souvent suivre les sous-ressources qu'elles téléchargent.

En particulier, les normes et bonnes pratiques du secteur à venir (par exemple, la version 4 de la norme PCI-DSS) exigent que les applications Web conservent un inventaire de tous les scripts qu'elles téléchargent et exécutent.

Cette fonctionnalité s'appuie sur le CSP et l'API Reporting pour signaler les URL et les hachages (pour CORS/même origine) de toutes les ressources de script que le document charge.

Déplacement préservant l'état DOM

Ajoute une primitive DOM (Node.prototype.moveBefore) qui vous permet de déplacer des éléments dans une arborescence DOM, sans réinitialiser l'état de l'élément.

Lorsque vous déplacez des éléments au lieu de les supprimer et de les insérer, l'état suivant est conservé:

  • Les éléments <iframe> restent chargés.
  • L'élément actif reste sélectionné.
  • Les pop-ups, les boîtes de dialogue en plein écran et les boîtes de dialogue modales restent ouverts.
  • Les transitions et les animations CSS continuent.

Exposer l'attribut attributionsrc sur <area>

Aligne l'exposition de l'attribut attributionsrc sur <area> avec le comportement de traitement existant de l'attribut, même lorsqu'il n'était pas exposé.

De plus, il est logique de prendre en charge l'attribut sur <area>, car cet élément est une surface de navigation de premier ordre, et Chrome le prend déjà en charge sur les autres surfaces de <a> et window.open.

Exposer des renderTime cross-origin affinés dans le timing des éléments et le LCP (quelle que soit la valeur de Timing-Allow-Origin)

La synchronisation des éléments et les entrées LCP comportent un attribut renderTime, aligné sur le premier frame dans lequel une image ou un texte a été peint.

Cet attribut est actuellement protégé pour les images inter-origines en exigeant un en-tête Timing-Allow-Origin sur la ressource image. Toutefois, cette restriction est facile à contourner (par exemple, en affichant une image de même origine et une image de cross-origin dans le même frame).

Comme cela a été source de confusion, nous prévoyons de supprimer cette restriction et d'augmenter tous les temps de rendu de 4 ms lorsque le document n'est pas isolé entre les origines. Cela semble suffisamment grossier pour éviter toute fuite d'informations utiles sur le moment du décodage concernant les images inter-origines.

Rétablir responseStart et introduire firstResponseHeadersStart

Lorsque les premiers indices 103 sont activés, les réponses comportent deux codes temporels:

  • Lorsque les premiers indices arrivent (103)
  • Lorsque les en-têtes finaux arrivent (par exemple, 200)

Lorsque Chrome 115 a été publié avec firstInterimResponseStart pour permettre de mesurer ces deux codes temporels, nous avons également modifié la signification de responseStart (utilisé par le temps de latence du premier octet (TTFB)) pour qu'il signifie "les en-têtes finaux". Cela a créé un problème de compatibilité Web avec les navigateurs et les outils qui n'ont pas effectué de modification similaire pour cette métrique couramment utilisée.

Chrome 133 annule cette modification de responseStart pour résoudre ce problème de compatibilité et introduit firstResponseHeadersStart pour permettre aux sites de mesurer le temps avant les en-têtes finaux, tout en conservant la définition d'origine du TTFB.

Interface FileSystemObserver

L'interface FileSystemObserver informe les sites Web des modifications apportées au système de fichiers. Les sites observent les modifications apportées aux fichiers et aux répertoires auxquels l'utilisateur a précédemment accordé une autorisation, sur son appareil local ou dans le système de fichiers de bucket (également appelé système de fichiers privé d'origine), et sont informés des informations de modification de base, telles que le type de modification.

Figement en mode Économiseur d'énergie

Lorsque l'économiseur d'énergie est activé, Chrome fige un "groupe de contexte de navigation" qui a été masqué et silencieux pendant plus de cinq minutes si un sous-groupe de cadres de même origine dépasse un seuil d'utilisation du processeur, sauf dans les cas suivants:

  • Fournit une fonctionnalité d'audioconférence ou de visioconférence (détectée en identifiant un micro, une caméra ou une capture d'écran/de fenêtre/d'onglet, ou une interface RTCPeerConnection avec un RTCDataChannel "ouvert" ou un MediaStreamTrack "en direct").
  • Contrôle un appareil externe (détecté à l'aide de WebUSB, Web Bluetooth, WebHID ou Web Serial).
  • Maintient un verrouillage Web ou une connexion IndexedDB qui bloque une mise à jour de version ou une transaction sur une autre connexion.

Le blocage consiste à suspendre l'exécution. Il est défini officiellement dans l'API Page Lifecycle.

Le seuil d'utilisation du processeur sera calibré pour figer environ 10% des onglets en arrière-plan lorsque l'économiseur d'énergie est activé.

Plusieurs cartes d'importation

Les mappages d'importation doivent actuellement se charger avant tout module ES. Il ne peut y avoir qu'un seul mappage d'importation par document. Cela les rend fragiles et potentiellement lents à utiliser dans des scénarios réels: tout module qui se charge avant eux casse l'application entière, et dans les applications comportant de nombreux modules, ils deviennent une grande ressource bloquante, car la carte complète de tous les modules possibles doit d'abord se charger.

Cette fonctionnalité permet d'utiliser plusieurs cartes d'importation par document, en les fusionnant de manière cohérente et déterministe.

En-têtes d'accès au stockage

Fournit un autre moyen pour les composants intégrés authentifiés d'activer les cookies non partitionnés. Ces en-têtes indiquent si des cookies non partitionnés sont (ou peuvent être) inclus dans une requête réseau donnée et permettent aux serveurs d'activer les autorisations d'accès au stockage qui leur ont déjà été accordées. Fournir une autre méthode pour activer l'autorisation "storage-access" permet son utilisation par des ressources autres que les iFrames et peut réduire la latence pour les éléments intégrés authentifiés.

Prise en charge de la création de ClipboardItem avec Promise<DOMString>

ClipboardItem, qui est l'entrée de la méthode write() de presse-papiers asynchrone, accepte désormais des valeurs de chaîne en plus des blobs dans son constructeur. ClipboardItemData peut être un Blob, une chaîne ou une promesse qui se résout en Blob ou en chaîne.

WebAssembly Memory64

La proposition memory64 permet de prendre en charge les mémoires WebAssembly linéaires dont la taille est supérieure à 2^32 bits. Il ne fournit aucune nouvelle instruction, mais étend les instructions existantes pour permettre des index 64 bits pour les mémoires et les tables.

​​API Web Authentication: méthode getClientCapabilities() PublicKeyCredential

La méthode getClientCapabilities() PublicKeyCredential vous permet de déterminer quelles fonctionnalités WebAuthn sont compatibles avec le client de l'utilisateur. La méthode renvoie une liste des fonctionnalités compatibles, ce qui permet aux développeurs d'adapter les expériences et les workflows d'authentification en fonction des fonctionnalités spécifiques du client.

WebGPU: formats de sommet à un composant (et unorm8x4-bgra)

Ajoute des formats de sommets supplémentaires qui n'étaient pas présents dans la version initiale de WebGPU en raison d'une absence de prise en charge ou d'anciennes versions de macOS (qui ne sont plus compatibles avec aucun navigateur). Les formats de sommets à un composant permettent aux applications de ne demander que les données nécessaires, alors qu'auparavant, elles devaient en demander au moins deux fois plus pour les types de données 8 et 16 bits. Le format unorm8x4-bgra permet de charger plus facilement les couleurs de sommets encodées en BGRA tout en conservant le même nuanceur.

Algorithme X25519 de l'API Web Cryptography

L'algorithme "X25519" fournit des outils pour effectuer un accord de clé à l'aide de la fonction X25519 spécifiée dans [RFC7748]. L'identifiant de l'algorithme "X25519" peut être utilisé dans l'interface SubtleCrypto pour accéder aux opérations implémentées: generateKey, importKey, exportKey, deriveKey et deriveBits.

Nouveaux tests Origin

Dans Chrome 133, vous pouvez activer les nouveaux tests d'origine suivants.

Désactiver le gel en mode Économiseur d'énergie

Cet essai désactivable permet aux sites de désactiver le comportement de figement en mode Économiseur d'énergie fourni dans Chrome 133.

Abandons et suppressions

Cette version de Chrome introduit les abandons et suppressions listés ci-dessous. Consultez ChromeStatus.com pour obtenir la liste des fonctionnalités abandonnées, en cours d'abandon et supprimées précédemment.

Cette version de Chrome abandonne une fonctionnalité.

Abandon de la limite WebGPU maxInterStageShaderComponents

maxInterStageShaderComponents limit est obsolète en raison d'une combinaison de facteurs. Date prévue de suppression dans Chrome 135.

  • Redondance avec maxInterStageShaderVariables: cette limite remplit déjà un objectif similaire, à savoir contrôler la quantité de données transmises entre les étapes de nuanceur.
  • Différences mineures: bien que les deux limites soient calculées de manière légèrement différente, ces différences sont mineures et peuvent être gérées efficacement dans la limite maxInterStageShaderVariables.
  • Simplification: la suppression de maxInterStageShaderComponents simplifie l'interface du nuanceur et réduit la complexité pour les développeurs. Au lieu de gérer deux limites distinctes avec des différences subtiles, ils peuvent se concentrer sur l'maxInterStageShaderVariables plus approprié et plus complet.

Cette version de Chrome supprime deux fonctionnalités.

Auparavant, lorsqu'une ressource était pré-extraite à l'aide de <link rel=prefetch>, Chrome ignorait sa sémantique de cache (à savoir max-age et no-cache) pour la première utilisation dans les cinq minutes, afin d'éviter de la récupérer à nouveau. Chrome supprime désormais ce cas particulier et utilise la sémantique de cache HTTP normale.

Cela signifie que les développeurs Web doivent inclure les en-têtes de mise en cache appropriés (Cache-Control ou Expires) pour profiter des avantages de <link rel=prefetch>.

Cela affecte également les <link rel=prerender> non standards.

Suppression du déclenchement de la page d'accueil de Chrome avec la propriété first_run_tabs du fichier initial_preferences

L'ajout de chrome://welcome à la propriété first_run_tabs du fichier initial_preferences n'aura désormais aucun effet. Le déclenchement a été supprimé, car cette page est redondante avec l'expérience de première utilisation qui se déclenche sur les plates-formes de bureau.