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 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 pour Android.

CSS et UI

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

Fonction CSS avancée attr()

Implémente l'augmentation à attr() spécifiée dans CSS Level 5, qui autorise les types autres que <string> et l'utilisation 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'ils sont ouverts, et à <select> et <input> lorsqu'ils sont dans des modes qui comportent un sélecteur et que celui-ci est affiché.

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

Utilisez des requêtes de conteneur pour définir le style des descendants des 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. Les états suivants peuvent être interrogés :

  • stuck : un conteneur à positionnement fixe est collé à l'un des bords de la zone de défilement.
  • snapped : un conteneur aligné sur l'accrochage de défilement est actuellement accroché horizontalement ou verticalement.
  • scrollable : indique si un conteneur de défilement peut défiler dans une direction demandé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 CSS scroll-state().

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 contrôler plus précisément l'alignement vertical du texte.

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

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

Valeur hint de l'attribut popover

L'API Popover spécifie le comportement de 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 à des 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 pop-ups. Il est donc possible d'ouvrir un pop-over hint sans rapport alors qu'une pile existante de pop-overs auto reste ouverte.

L'exemple canonique est celui d'un sélecteur <select> ouvert (popover=auto) et d'une info-bulle déclenchée par le pointeur (popover=hint). 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 demandeurs de créer des références à des éléments d'ancres implicites.

Un popover imbriqué dans un demandeur ne doit pas le réinvoquer

Dans le cas suivant, le popover est correctement activé lorsque l'utilisateur clique sur le bouton. Toutefois, cliquer sur le popover lui-même 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 les bulles de clic du pop-over se propageaient à <button> et activaient l'invocateur, ce qui fermait le pop-over. 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 la progression d'une animation au cours de ses itérations, quelle que soit la nature de sa timeline. Sans la propriété overallProgress, vous devez calculer manuellement la progression d'une animation, en tenant compte du nombre d'itérations de l'animation et en déterminant si le currentTime de l'animation est un pourcentage du temps total (comme dans le cas des animations déclenchées par le défilement) ou une quantité de temps absolue (comme dans le cas des animations déclenchées par 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 de hachage CSP pour les scripts

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

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

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

Déplacement préservant l'état du DOM

Ajoute une primitive DOM (Node.prototype.moveBefore) qui vous permet de déplacer des éléments dans un arbre 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é :

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

Exposer l'attribut attributionsrc sur <area>

Alignement de 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é.

Il est également judicieux 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 le renderTime multi-origine grossier dans le timing des éléments et le LCP (indépendamment de Timing-Allow-Origin)

Les entrées de timing des éléments et de LCP comportent un attribut renderTime, aligné sur le premier frame dans lequel une image ou du texte ont été affichés.

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

Comme cela a été source de confusion, nous prévoyons plutôt de supprimer cette restriction et de rendre tous les temps de rendu plus approximatifs de 4 ms lorsque le document n'est pas isolé par origine croisée. Cela semble suffisamment approximatif pour éviter de divulguer des informations utiles sur le décodage des images d'origines croisées.

Rétablir responseStart et présenter firstResponseHeadersStart

Lorsque l'option 103 Early Hints est activée, les réponses comportent deux codes temporels :

  • Lorsque les indications précoces arrivent (103)
  • Lorsque les en-têtes finaux arrivent (par exemple, 200)

Lorsque Chrome 115 est sorti firstInterimResponseStart pour permettre la mesure de ces deux codes temporels, nous avons également modifié la signification de responseStart (utilisé par Time to First Byte (TTFB)) pour signifier "les en-têtes finaux". Cela a créé un problème de compatibilité Web avec les navigateurs et les outils qui n'ont pas apporté de modification similaire pour cette métrique couramment utilisée.

Chrome 133 rétablit cette modification responseStart pour résoudre ce problème de compatibilité et introduit plutôt firstResponseHeadersStart pour permettre aux sites de mesurer le temps jusqu'aux en-têtes finaux, tout en conservant la définition d'origine de 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 pour lesquels l'utilisateur a précédemment accordé l'autorisation, sur l'appareil local de l'utilisateur ou dans le système de fichiers de bucket (également appelé système de fichiers privés d'origine), et sont informés des informations de base sur les modifications, 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" masqué et silencieux depuis plus de cinq minutes si un sous-groupe de frames 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 la capture du micro, de la caméra ou de l'écran/de la fenêtre/de l'onglet, ou une interface RTCPeerConnection avec un RTCDataChannel "ouvert" ou un MediaStreamTrack "actif").
  • Contrôle un appareil externe (détecté avec WebUSB, Web Bluetooth, WebHID ou Web Serial).
  • Contient un verrou Web ou une connexion IndexedDB qui bloque une mise à jour de version ou une transaction sur une autre connexion.

Le gel consiste à suspendre l'exécution. Il est défini formellement 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 cartes d'importation doivent actuellement se charger avant tout module ES, et il ne peut y avoir qu'une seule carte 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 interrompt l'ensemble de l'application. Dans les applications comportant de nombreux modules, ils deviennent une ressource de blocage importante, car l'ensemble de la carte pour tous les modules possibles doit se charger en premier.

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

Offre une autre façon pour les intégrations authentifiées d'accepter 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. Ils permettent aux serveurs d'activer les autorisations d'accès au stockage qui leur ont déjà été accordées. En offrant une autre façon d'activer l'autorisation "storage-access", vous permettez l'utilisation par des ressources non-iframe et pouvez réduire la latence pour les éléments intégrés authentifiés.

Aide à la création de ClipboardItem avec Promise<DOMString>

Le ClipboardItem, qui est l'entrée de la méthode write() du presse-papiers asynchrone, accepte désormais les 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 un blob ou une chaîne.

WebAssembly Memory64

La proposition memory64 ajoute la prise en charge des mémoires WebAssembly linéaires dont la taille est supérieure à 2^32 bits. Il ne fournit pas de nouvelles instructions, mais étend les instructions existantes pour autoriser les index 64 bits pour les souvenirs et les tableaux.

API Web Authentication : méthode PublicKeyCredential getClientCapabilities()

La méthode PublicKeyCredential getClientCapabilities() vous permet de déterminer les fonctionnalités WebAuthn 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 vertex à un composant (et unorm8x4-bgra)

Ajoute des formats de vertex supplémentaires qui n'étaient pas présents dans la version initiale de WebGPU en raison du manque de compatibilité ou des anciennes versions de macOS (qui ne sont plus compatibles avec aucun navigateur). Les formats de vertex à un seul 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 de 8 et 16 bits. Le format unorm8x4-bgra permet de charger plus facilement les couleurs de vertex encodées au format BGRA tout en conservant le même nuanceur.

Algorithme X25519 de l'API Web Cryptography

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

Nouvelles phases d'évaluation

Dans Chrome 133, vous pouvez activer les nouvelles versions d'essai d'origine suivantes.

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

Cette phase d'évaluation de la désactivation permet aux sites de désactiver le comportement de figement en mode Économiseur d'énergie qui est déployé dans Chrome 133.

Arrêts et suppressions

Cette version de Chrome introduit les abandons et les suppressions listés ci-dessous. Consultez ChromeStatus.com pour obtenir la liste des abandons prévus, des abandons en cours et des suppressions précédentes.

Cette version de Chrome abandonne une fonctionnalité.

Obsolescence de la limite WebGPU maxInterStageShaderComponents

maxInterStageShaderComponents limit est obsolète en raison de plusieurs facteurs. La date de suppression prévue est Chrome 135.

  • Redondance avec maxInterStageShaderVariables : cette limite a déjà un objectif similaire, qui consiste à contrôler la quantité de données transmises entre les étapes du nuanceur.
  • Écarts mineurs : bien que les deux limites soient calculées légèrement différemment, 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 de subtiles différences, ils peuvent se concentrer sur la limite maxInterStageShaderVariables, dont le nom est plus approprié et qui est plus complète.

Cette version de Chrome supprime deux fonctionnalités.

Auparavant, lorsqu'une ressource était préchargée à 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. Désormais, Chrome supprime ce cas particulier et utilise la sémantique normale du cache HTTP.

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

Cela affecte également le <link rel=prerender> non standard.

Suppression du déclenchement de la page de bienvenue 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.