Nouvelles unités de fenêtre d'affichage CSS, API Federated Credential Management, polices Variable COLRv1 et plus encore.
Sauf indication contraire, les modifications décrites ci-dessous 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 108 est en version bêta à compter du 27 octobre 2022. Vous pouvez télécharger la dernière version sur Google.com sur un ordinateur ou sur le Google Play Store sur Android.
CSS
Chrome 108 comprend un certain nombre de nouvelles fonctionnalités CSS.
Dépassement CSS pour les éléments remplacés
Chrome commencera à déployer une modification qui permettra aux développeurs d'utiliser la propriété overflow existante avec des éléments remplacés qui s'affichent en dehors de la zone de contenu. Associée à object-view-box, elle permet de créer une image avec un halo ou une ombre personnalisés appliqués, avec un comportement de débordement d'encre approprié, comme le ferait une ombre CSS.
Il s'agit d'une modification destructive potentielle. Pour en savoir plus, consultez Une modification du dépassement des éléments remplacés.
Unités de fenêtre d'affichage ("Petit", "Grand", "Dynamique" et "Logique")
Les unités supplémentaires sont désormais compatibles : petites (svw, svh, svi, svb, svmin, svmax), grandes (lvw, lvh, lvi, lvb, lvmin, lvmax), dynamiques (dvw, dvh, dvi, dvb, dvmin, dvmax) et logiques (vi, vb).
Compatibilité des CSS break-after, break-before et break-inside
Prise en charge de l'évitement de la valeur des propriétés de fragmentation CSS break-before, break-after et break-inside lors de l'impression. Cette valeur indique au navigateur d'éviter de planter avant, après ou à l'intérieur de l'élément auquel il est appliqué. Par exemple, le code CSS suivant permet d'éviter qu'une figure ne s'affiche lors d'un saut de page.
figure {
break-inside: avoid;
}
Cette fonctionnalité a été ajoutée en raison de la prise en charge de l'impression LayoutNG dans Chrome 108.
Dernier alignement de l'élément de référence
Cette fonctionnalité permet aux développeurs d'aligner les éléments dans une mise en page flexible ou en grille en fonction de leur dernière ligne de référence, plutôt que de la première. Pour ce faire, utilisez les propriétés suivantes:
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
ContentVisibilityAutoStateChanged événement
Événement qui se déclenche sur un élément avec content-visibility: auto lorsque l'état d'affichage de l'élément change en raison de l'un des attributs qui rendent l'élément pertinent pour l'utilisateur.
Cela permet aux développeurs de mieux contrôler le moment où ils doivent arrêter ou démarrer l'affichage en réponse à l'arrêt ou au démarrage de l'affichage de la sous-arborescence de visibilité du contenu par le user-agent. Par exemple, le développeur peut arrêter les mises à jour React dans une sous-arborescence qui n'est pas affichée par le user-agent. De même, le développeur peut vouloir arrêter toute autre mise à jour du script (par exemple, les mises à jour du canevas) lorsque le user-agent n'affiche pas l'élément.
API Web
Federated Credentials Management (anciennement WebID)
L'API Federated Credential Management permet aux utilisateurs d'utiliser leur identité fédérée pour se connecter à des sites Web, tout en améliorant la confidentialité des navigateurs.
Extensions de source multimédia dans les nœuds de calcul
Active l'utilisation de l'API Media Source Extensions (MSE) à partir de contextes EmployeeWorker afin d'améliorer les performances de la mise en mémoire tampon des médias en vue de leur lecture par HTMLMediaElement sur le contexte de fenêtre principal. En créant un objet MediaSource dans un contexte customWorker, une application peut ensuite obtenir un MediaSourceHandle et transférer ce handle vers le thread principal afin de l'associer à un élément HTMLMediaElement. Le contexte qui a créé l'objet MediaSource peut ensuite l'utiliser pour mettre le contenu multimédia en mémoire tampon.
En-tête des conseils client pour les fonctionnalités multimédias Sec-CH-Prefers-Reduced-Motion
User Preference Media Features Client Hints Headers (En-têtes d'indications client pour les fonctionnalités multimédias des préférences utilisateur) définit un ensemble d'en-têtes de requêtes client HTTP associés aux fonctionnalités multimédias des préférences de l'utilisateur, telles que définies par les requêtes média de niveau 5. S'ils sont utilisés en tant qu'indicateurs client critiques, ces en-têtes permettent aux serveurs de faire des choix judicieux concernant, par exemple, l'intégration CSS. Sec-CH-Prefers-Reduced-Motion reflète les préférences prefers-reduced-motion de l'utilisateur.
Lecteurs BYOB WebTransport
Prend en charge les lecteurs BYOB(Bring Your OwnBuffer) pour WebTransport afin de permettre la lecture dans un tampon fourni par le développeur. Les lecteurs BYOB peuvent réduire les copies de mémoire tampon et les allocations de mémoire.
Caractères génériques dans les origines des règles d'autorisations
La spécification des règles relatives aux autorisations définit un mécanisme qui permet aux développeurs d'activer et de désactiver de manière sélective l'utilisation de diverses API et fonctionnalités de navigateur. L'une des fonctionnalités de ce mécanisme permet de n'activer des fonctionnalités que sur des origines explicitement énumérées (par exemple, https://foo.com/). Ce mécanisme n'est pas assez flexible pour la conception de certains CDN, qui fournissent du contenu via une origine pouvant être hébergée sur l'un des plusieurs centaines de sous-domaines possibles.
Par conséquent, cette fonctionnalité accepte les caractères génériques dans les règles d'autorisation structurées comme SCHEME://*.HOST:PORT (par exemple, https://*.foo.com/), où une origine valide peut être créée à partir de SCHEME://HOST:PORT (par exemple, https://foo.com/). Cela nécessite que HOST soit un domaine enregistrable. Cela signifie que https://*.bar.foo.com/ fonctionne, mais pas https://*.com/. Si vous souhaitez autoriser tous les domaines à utiliser cette fonctionnalité, il vous suffit de déléguer cette fonctionnalité à *.
Méthodes de synchronisation des AccessHandles dans l'API File System Access
Met à jour les méthodes asynchrones flush(), getSize() et truncate() dans FileSystemSyncAccessHandle dans l'API File System Access avec des méthodes synchrones.
FileSystemSyncAccessHandle combine actuellement des méthodes de synchronisation et asynchrones, ce qui nuit aux performances et à la facilité d'utilisation, en particulier pour les applications qui passent de C/C++ à Wasm. Cette mise à jour apportera une cohérence dans l'utilisation de l'API et améliorera les performances des bibliothèques basées sur Wasm.
Il s'agit d'une modification destructive potentielle. Pour en savoir plus, consultez Modification destructive: méthodes de synchronisation pour les AccessHandles.
UI conditionnelle WebAuthn
L'UI conditionnelle pour WebAuthn est compatible avec Windows 22H2 ou version ultérieure, macOS, Android P et versions ultérieures. L'interface utilisateur de WebAuthn sur les plates-formes de bureau a également été actualisée.
Détection des polices variables COLRv1 et des fonctionnalités de police
Prise en charge des polices variables COLRv1
Les polices COLRv1 avec vecteur de couleur sont compatibles depuis Chrome 98, mais cette version initiale n'acceptait que les fonctionnalités statiques de la table COLRv1. La spécification COLRv1 définit l'intégration aux variantes OpenType, qui permet de modifier les propriétés de police des dégradés et des transformations en modifiant les paramètres des axes des variables. Cette deuxième étape permet la prise en charge de ces variantes dans COLRv1.
Extensions de condition font-tech() et font-format() pour CSS @supports
L'utilisation de font-tech() et font-format() avec les @supports CSS permet de détecter la technologie de police et de prendre en charge les formats, ainsi que d'améliorer progressivement le contenu. L'exemple suivant teste la compatibilité des polices COLRv1.
@supports font-tech(color-COLRv1) {
}
Compatibilité de la fonction tech() dans le descripteur @font-face src:
Les polices CSS de niveau 4 offrent d'autres moyens de sélectionner ou de filtrer des ressources de police. La fonction tech() a été introduite, qui permet de transmettre une liste de technologies de police nécessaires au fonctionnement de ce blob de police respectif. En fonction de ces informations, l'user-agent sélectionne la première ressource adaptée.
Chrome pour Android
L'OSK Android redimensionne désormais la fenêtre d'affichage visuelle par défaut
Le clavier à l'écran Android redimensionne la fenêtre d'affichage par défaut plutôt que le bloc qui le contient. Les auteurs peuvent désactiver cette fonctionnalité à l'aide de la nouvelle clé de méta-fenêtre d'affichage interactive-widget.
Phases d'évaluation
Cette version de Chrome comprend deux nouvelles phases d'évaluation.
Identité du marchand dans l'événement canmakepayment
L'événement service worker canmakepayment permet au marchand de savoir si l'utilisateur possède une carte enregistrée dans une application de paiement installée. Il transmet discrètement l'origine du marchand et des données arbitraires à un service worker à partir de l'origine de l'application de paiement. Cette communication multi-origine se produit lors de la construction de PaymentRequest en JavaScript, ne nécessite pas de geste de l'utilisateur et n'affiche aucune interface utilisateur. L'essai pour les développeurs permettant de supprimer les champs d'identité de l'événement "canmakepayment" peut être activé via chrome://flags/#clear-identity-in-can-make-payment. L'activation de cet indicateur vide les champs d'identité de l'événement "canmakepayment" (et de l'intent IS_READY_TO_PAY Android).
Pour en savoir plus, consultez Mise à jour du comportement de l'événement CanMakePayment de l'API Payment Handler.
API NotRestoredReason du cache amélioré
L'API NotRestoredReason indique les raisons pour lesquelles une page n'est pas diffusée depuis BFcache dans une arborescence de frames, via l'API PerformanceNavigationTiming.
Plusieurs raisons peuvent expliquer que des pages ne puissent pas être incluses dans le cache amélioré, par exemple pour des raisons imposées par la spécification ou des raisons spécifiques à la mise en œuvre du navigateur. Les développeurs peuvent collecter le taux d'accès de BFCache sur leur site en utilisant le paramètre persistant du gestionnaire pageshow et PerformanceNavigationTiming.type(back-forward). Cette API permet aux sites de collecter des informations sur les raisons pour lesquelles BFCache n'est pas utilisé dans une navigation à partir de l'historique, afin qu'ils puissent prendre des mesures pour chaque motif et rendre leur page compatible avec BFCache.
Abandons et suppressions
Cette version de Chrome présente les abandons et suppressions listés ci-dessous. Accédez à ChromeStatus.com pour consulter la liste des abandons prévus, des abandons actuels et des suppressions précédentes.
Abandons
Cette version de Chrome abandonne une fonctionnalité.
Abandon et suppression de window.defaultStatus et window.defaultstatus
Ces API non standards ne sont pas implémentées par tous les navigateurs et n'ont aucune incidence sur leur comportement. Cela les nettoie et élimine un signal potentiel de fingerprinting.
À l'origine, ils servaient à modifier/contrôler le texte de la "barre d'état" en bas de la fenêtre du navigateur. Toutefois, ils n'ont jamais eu d'effet réel sur la barre d'état de Chrome et ne sont pas des attributs standardisés. Gecko n'accepte plus ces attributs depuis la version 23. WebKit les accepte toujours. L'attribut window.status associé est standardisé, mais ne doit jamais avoir d'impact sur la barre d'état de la fenêtre.
Déménagements
Cette version de Chrome supprime quatre fonctionnalités.
Supprimer ImageDecoderInit.premultiplyAlpha
Cette fonctionnalité n'a aucun effet observable dans les cas d'utilisation principaux, mais elle peut limiter les implémentations de manière non optimale. Consultez ce problème pour obtenir une description plus détaillée. Conformément à l'accord conclu entre les éditeurs de la spécification WebCodecs et au manque d'utilisation (0,000000339% - 0,00000687% des chargements de page par compteur d'utilisation dans M106).
Supprimer navigateEvent.restoreScroll()
Remplacement de restoreScroll() par navigateEvent.scroll(). scroll() fonctionne de manière identique, sauf qu'il permet au développeur de contrôler la durée de défilement pour les navigations sans balayage (scroll() fonctionne lorsque le défilement n'est pas une restauration, d'où le changement de nom et de comportement).
Supprimer navigateEvent.transitionWhile()
transitionWhile() est remplacé par navigateEvent.intercept() en raison de défauts de conception signalés par les développeurs. intercept() se comporte presque de la même manière que transitionwhile(), mais au lieu d'utiliser un paramètre Promise obligatoire, il utilise une fonction de gestionnaire facultative qui renvoie une promesse. Cela permet au navigateur de contrôler le moment où le gestionnaire s'exécute, ce qui est plus tard et plus intuitif que pour transitionWhile().
Suppression de la classe googIPv6 de WebRTC mediaConstraint
"googIPv6: false" permet de désactiver la prise en charge d'IPv6 dans WebRTC, comme dans l'exemple suivant.
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
Le protocole IPv6 est activé par défaut depuis de nombreuses années et nous ne devrions pas être en mesure de le désactiver. Il s'agit d'une ancienne API qui n'existe pas dans la spécification.