Nuevas unidades de viewport de CSS, API de Federated Credential Management, fuentes COLRv1 variables y más.
A menos que se indique lo contrario, los cambios que se describen a continuación se aplican a la versión más reciente del canal beta de Chrome para Android, ChromeOS, Linux, macOS y Windows. Obtén más información sobre las funciones mencionadas aquí a través de los vínculos proporcionados o en la lista de ChromeStatus.com. Chrome 108 está en versión beta a partir del 27 de octubre de 2022. Puedes descargar la versión más reciente en Google.com para computadoras de escritorio o en Google Play Store para Android.
CSS
Chrome 108 incluye varias funciones nuevas de CSS.
Desbordamiento de CSS para elementos reemplazados
Chrome comenzará a lanzar un cambio que permite a los desarrolladores usar la propiedad overflow existente con elementos reemplazados que se pintan fuera del cuadro de contenido. Si se vincula con object-view-box, se puede usar para crear una imagen con un brillo o sombra personalizados aplicados, con un comportamiento adecuado de desbordamiento de tinta, como lo haría una sombra de CSS.
Este es un posible cambio rotundo. Obtén más información en Un cambio para desbordarse en elementos reemplazados.
Unidades de viewport pequeñas, grandes, dinámicas y lógicas
Esto agrega compatibilidad con unidades pequeñas (svw, svh, svi, svb, svmin, svmax), grandes (lvw, lvh, lvi, lvb, lvmin, lvmax), dinámicas (dvw, dvh, dvi, dvb, dvmin, dvmax) y lógicas (vi, vb).
Compatibilidad con CSS break-after, break-before y break-inside
Se agregó compatibilidad para evitar el valor de las propiedades de fragmentación de CSS break-before, break-after y break-inside cuando se realizan impresiones. Este valor indica al navegador que no debe interrumpirse antes, después o dentro del elemento al que se aplica. Por ejemplo, el siguiente CSS evita que una cifra se rompa en un salto de página.
figure {
break-inside: avoid;
}
Se agregó esta función debido a que Chrome 108 admite la impresión LayoutNG.
Última alineación del elemento de referencia
Esta función permite a los desarrolladores alinear los elementos dentro del diseño flexible o de cuadrícula según su última referencia, en lugar de la primera. Esto se hace a través de las siguientes propiedades:
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
ContentVisibilityAutoStateChanged evento
Evento que se activa en un elemento con content-visibility: auto cuando el estado de renderización del elemento cambia debido a cualquiera de los atributos que hacen que el elemento sea relevante para el usuario.
El caso de uso para esto es permitir que los desarrolladores tengan un mayor control sobre cuándo detener o comenzar la renderización en respuesta a que el usuario-agente detenga o inicie la renderización del subárbol de visibilidad del contenido. Por ejemplo, es posible que el desarrollador desee detener las actualizaciones de React en un subárbol que el usuario-agente no procesa. Del mismo modo, es posible que el desarrollador desee detener cualquier otra actualización de la secuencia de comandos (por ejemplo, las actualizaciones de lienzo) cuando el usuario-agente no renderice el elemento.
APIs web
Federated Credentials Management (era WebID)
La API de Federated Credential Management permite que los usuarios lleven su identidad federada para acceder a sitios web de una manera compatible con mejoras en la privacidad del navegador.
Extensiones de fuente de medios en trabajadores
Habilita el uso de la API de extensiones de fuente de medios (MSE) desde contextos de DedicatedWorker para permitir un rendimiento mejorado del almacenamiento en búfer de medios para que lo reproduzca un HTMLMediaElement en el contexto de Window principal. Cuando se crea un objeto MediaSource en un contexto DedicatedWorker, una aplicación puede obtener un MediaSourceHandle y transferir ese controlador al subproceso principal para usarlo cuando se adjunta a un HTMLMediaElement. El contexto que creó el objeto MediaSource puede usarlo para almacenar en búfer el contenido multimedia.
Sec-CH-Prefers-Reduced-Motion Encabezado de sugerencias de clientes de las funciones de medios de preferencias de los usuarios
User Preference Media Features Client Hints Headers, define un conjunto de encabezados de Sugerencias de clientes HTTP para las funciones de contenido multimedia de preferencias de los usuarios, según lo define el nivel 5 de consultas de medios. Si se usan como sugerencias críticas de clientes, estos encabezados permiten que los servidores tomen decisiones inteligentes en relación con, por ejemplo, la incorporación de CSS. Sec-CH-Prefers-Reduced-Motion refleja la preferencia prefers-reduced-motion del usuario.
Lectores de WebTransport BYOB
Admite lectores de BYOB(trae tu propio búfer) para WebTransport para permitir la lectura en un búfer proporcionado por el desarrollador. Los lectores de BYOB pueden minimizar las copias de búfer y reducir las asignaciones de memoria.
Comodines en los orígenes de la política de permisos
La especificación de la Política de Permisos define un mecanismo que les permite a los desarrolladores habilitar e inhabilitar de manera selectiva el uso de diversas APIs y funciones del navegador. Una capacidad de este mecanismo permite habilitar funciones solo en orígenes enumerados explícitamente (por ejemplo, https://foo.com/). Este mecanismo no es lo suficientemente flexible para el diseño de algunas CDN, que entregan contenido a través de un origen que podría estar alojado en uno de los cientos de subdominios posibles.
Por lo tanto, esta función agrega compatibilidad con comodines en la política de permisos estructuradas como SCHEME://*.HOST:PORT (por ejemplo, https://*.foo.com/), donde se podría construir un origen válido a partir de SCHEME://HOST:PORT (por ejemplo, https://foo.com/). Esto requiere que HOST sea un dominio registrable. Esto significa que https://*.bar.foo.com/ funciona, pero https://*.com/ no (si quieres permitir que todos los dominios usen la función, debes delegar a *).
Métodos de sincronización para AccessHandles en la API de File System Access
Se actualizaron los métodos asíncronos flush(), getSize() y truncate() en FileSystemSyncAccessHandle en la API de File System Access a métodos síncronos.
Actualmente, FileSystemSyncAccessHandle tiene una combinación de métodos síncronos y asíncronos, lo que dificulta el rendimiento y la usabilidad, en especial para aplicaciones que portan C/C++ a Wasm. Esta actualización aportará coherencia al uso de la API y mejorará el rendimiento de las bibliotecas basadas en Wasm.
Este es un posible cambio rotundo. Puedes obtener más información en Cambio rotundo: métodos de sincronización para AccessHandles.
IU condicional de WebAuthn
La IU condicional para WebAuthn es compatible con Windows 22H2 y versiones posteriores, macOS y Android P o versiones posteriores. También se actualizó la IU de WebAuthn en plataformas de computadoras.
Detección de funciones de fuentes y fuentes COLRv1 variables
Compatibilidad con fuentes variables COLRv1
Las fuentes de vectores de color COLRv1 son compatibles desde Chrome 98, pero esta versión inicial solo admitía funciones estáticas de la tabla COLRv1. La especificación de COLRv1 define la integración con las variaciones de OpenType, que permite modificar las propiedades de las fuentes de los gradientes y las transformaciones mediante el cambio de los parámetros del eje de la variable. Este segundo paso proporciona compatibilidad con esas variaciones a COLRv1.
Extensiones de condición font-tech() y font-format() a CSS @support
El uso de font-tech() y font-format() junto con CSS @supports permite detectar la tecnología de fuentes y la compatibilidad con formatos, así como la mejora progresiva del contenido. En el siguiente ejemplo, se comprueba la compatibilidad de las fuentes COLRv1.
@supports font-tech(color-COLRv1) {
}
Compatibilidad con la función tech() en el descriptor @font-face src:
El nivel 4 de fuentes de CSS proporciona medios adicionales para seleccionar o filtrar recursos de fuente. Se introdujo la función tech(), que permite pasar una lista de tecnologías de fuentes que este BLOB de fuentes respectivo requiere para funcionar. En función de eso, el usuario-agente seleccionará el primer recurso adecuado.
Chrome en Android
Android OSK ahora cambia el tamaño del viewport visual de forma predeterminada
El teclado en pantalla de Android cambia el tamaño del viewport visual de forma predeterminada en lugar del bloque inicial que lo contiene. Los autores pueden inhabilitar esta opción con la nueva clave de metaetiqueta interactive-widget.
Pruebas de origen
Esta versión de Chrome tiene dos pruebas de origen nuevas.
Identidad del comercio en canmakepayment evento
El evento del service worker canmakepayment informa al comercio si el usuario tiene una tarjeta registrada en una app de pagos instalada. Transmite sin aviso el origen y los datos arbitrarios del comercio a un service worker desde el origen de la app de pago. Esta comunicación de origen cruzado ocurre en la construcción de PaymentRequest en JavaScript, no requiere un gesto del usuario y no muestra ninguna interfaz de usuario. La prueba para desarrolladores para quitar los campos de identidad del evento "canmakepayment" se puede habilitar mediante chrome://flags/#clear-identity-in-can-make-payment. Si habilitas esta marca, se vaciarán los campos de identidad en el evento "canmakepayment" (y en el intent IS_READY_TO_PAY de Android).
Obtén más información en Actualización del comportamiento del evento CanMakePayment en la API de Payment Handler.
API de NotRestoredReason para la memoria caché atrás/adelante
La API de NotRestoredReason informará la lista de motivos por los que no se publica una página desde BFcache en una estructura de árbol de marcos mediante la API de PerformanceNavigationTiming.
Las páginas se pueden bloquear en BFcache por diferentes motivos, como los que requiere la especificación y los motivos específicos de la implementación del navegador. Los desarrolladores pueden recopilar la tasa de aciertos de BFCache en su sitio mediante el parámetro persistente del controlador de pageshow y PerformanceNavigationTiming.type(back-forward). Esta API permite que los sitios recopilen información sobre por qué no se usa BFCache en una navegación del historial, de modo que puedan realizar acciones en función de cada motivo y hacer que su página sea compatible con BFCache.
Bajas y eliminaciones
Esta versión de Chrome presenta las bajas y las eliminaciones que se indican a continuación. Visita ChromeStatus.com para ver una lista de las bajas planificadas, las bajas actuales y las eliminaciones anteriores.
Bajas
En esta versión de Chrome, una función deja de estar disponible.
window.defaultStatus y window.defaultstatus dejaron de estar disponibles y se quitaron
Se trata de APIs no estándar que no todos los navegadores implementan y que no afectan su comportamiento. De esta manera, se borran y se quita una posible señal de creación de huellas digitales.
Originalmente, se utilizaban para modificar o controlar el texto de la "barra de estado" en la parte inferior de las ventanas del navegador. Sin embargo, nunca tuvieron ningún efecto real en la barra de estado de Chrome y no son atributos estandarizados. Gecko no admite estos atributos desde la versión 23; WebKit aún los admite. El atributo window.status relacionado es estandarizado, pero también no debe influir nunca en la barra de estado de la ventana.
Eliminaciones
En esta versión de Chrome, se quitan cuatro funciones.
Quitar ImageDecoderInit.premultiplyAlpha
La función no tiene efectos observables en los casos de uso principales, pero puede limitar las implementaciones de maneras no óptimas. Consulta este problema para obtener una descripción más detallada. Según el consenso de los editores de especificaciones de WebCodecs y la falta de uso (0.000000339% - 0.00000687% de contador de cargas de páginas por uso en M106)
Quitar navigateEvent.restoreScroll()
restoreScroll() se reemplazará por navigateEvent.scroll(). scroll() funciona de la misma manera, excepto que permite al desarrollador controlar el tiempo de desplazamiento para las navegaciones no transversales (scroll() funciona cuando el desplazamiento no es un restablecimiento, por lo que el nombre cambia junto con el cambio de comportamiento).
Quitar navigateEvent.transitionWhile()
transitionWhile() se reemplazará por navigateEvent.intercept() debido a fallas de diseño que informaron los desarrolladores. intercept() se comporta casi de la misma manera quetransitionwhile(), pero, en lugar de tomar un parámetro obligatorio Promise, toma una función de controlador opcional que muestra una Promise. Esto permite que el navegador controle cuándo se ejecuta el controlador, lo que es más intuitivo y posterior que para transitionWhile().
Quita googIPv6 de WebRTC mediaConstraint
Se puede usar "googIPv6: false" para inhabilitar la compatibilidad con IPv6 en WebRTC, como en el siguiente ejemplo.
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6 ha estado habilitado de forma predeterminada durante muchos años y no deberíamos poder inhabilitarlo. Esta es una API heredada que no existe en la especificación.