Nuevas unidades de viewport de CSS, API de Federated Credential Management, fuentes COLRv1 variables y mucho 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 que se enumeran aquí a través de los vínculos proporcionados o de la lista en ChromeStatus.com. Chrome 108 está beta desde el 27 de octubre de 2022. Puedes descargar la versión más reciente en Google.com para computadoras o desde Google Play Store para Android.
CSS
Chrome 108 incluye una serie de funciones de CSS nuevas.
Desbordamiento de CSS para elementos reemplazados
Chrome comenzará a lanzar un cambio que les permitirá a los desarrolladores usar la propiedad overflow existente con elementos reemplazados que pintan fuera del cuadro de contenido. Si se combina con object-view-box, se puede usar para crear una imagen con un resplandor o sombra personalizados aplicados, con un comportamiento adecuado de desbordamiento de tinta, como tendría una sombra de CSS.
Este es un posible cambio rotundo. Obtén más información en Un cambio en el desbordamiento de 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 con el valor evitado de las propiedades de fragmentación de CSS break-before, break-after y break-inside al momento de la impresión. Este valor indica al navegador que evite la interrupción antes, después o dentro del elemento al que se aplica. Por ejemplo, con el siguiente CSS, se evita que una figura se rompa en un salto de página.
figure {
break-inside: avoid;
}
Se agregó esta función debido a que Chrome 108 agrega compatibilidad con la impresión LayoutNG.
Última alineación del elemento de referencia
Esta función permite que los desarrolladores alineen elementos dentro de un diseño flexible o de cuadrícula según la última línea de base, 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 alguno 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 representación en respuesta a que el usuario-agente detenga o comience la renderización del subárbol de visibilidad de contenido. Por ejemplo, el desarrollador puede querer detener las actualizaciones de React en un subárbol que el usuario-agente no renderiza. Del mismo modo, el desarrollador puede querer detener cualquier otra actualización de secuencia de comandos (por ejemplo, las actualizaciones de lienzo) cuando el usuario-agente no está renderizando el elemento.
API web
Federated Credentials Management (antes WebID)
La API de Federated Credential Management permite a los usuarios llevar su identidad federada para acceder a sitios web de una manera compatible con las mejoras de privacidad del navegador.
Extensiones de fuente de medios en trabajadores
Habilita el uso de la API de Media Source Extensions (MSE) desde contextos de DedicatedWorker a fin de mejorar el rendimiento del almacenamiento en búfer de medios para reproducción por HTMLMediaElement en el contexto de Window principal. Al crear un objeto MediaSource en un contexto DedicatedWorker, una aplicación puede obtener un MediaSourceHandle de él y transferir ese controlador al subproceso principal para usarlo en adjuntarlo a un HTMLMediaElement. El contexto que creó el objeto MediaSource puede usarlo para almacenar contenido multimedia en búfer.
Sec-CH-Prefers-Reduced-Motion Encabezado de sugerencias de clientes de funciones de medios de preferencias del usuario
Los encabezados de sugerencias de clientes de funciones de medios de preferencias del usuario definen un conjunto de encabezados de sugerencias de clientes HTTP en torno a las funciones de contenido multimedia de preferencias del usuario, según lo define el nivel 5 de consultas de medios. Si se usan como Sugerencias críticas del cliente, estos encabezados permiten que los servidores tomen decisiones inteligentes con respecto, por ejemplo, a 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 del búfer y reducir las asignaciones de memoria.
Comodines en los orígenes de políticas de permisos
La especificación de la política de permisos define un mecanismo que permite a los desarrolladores habilitar e inhabilitar de manera selectiva el uso de varias funciones y APIs del navegador. Una capacidad de este mecanismo permite habilitar funciones solo en orígenes enumerados de forma explícita (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 deseas permitir que todos los dominios usen la función, solo debes delegar a *).
Métodos de sincronización para AccessHandles en la API de File System Access
Actualiza 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 asíncronos y síncronos, lo que dificulta el rendimiento y la usabilidad, en especial para las aplicaciones que transfieren C/C++ a Wasm. Esta actualización brindará coherencia en el 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 escritorio.
Detección de funciones de fuentes y fuentes COLRv1 variables
Compatibilidad con fuentes variables COLRv1
Las fuentes vectoriales de color COLRv1 son compatibles desde Chrome 98, pero esta versión inicial solo admitía la funcionalidad estática de la tabla COLRv1. La especificación COLRv1 define la integración con las variaciones de OpenType, lo que permite modificar las propiedades de la fuente de los gradientes y las transformaciones mediante la modificación de los parámetros de eje variables. Este segundo paso brinda compatibilidad con esas variaciones a COLRv1.
Extensiones de condición font-tech() y font-format() para los atributos @support de CSS
El uso de font-tech() y font-format() junto con @supports de CSS permite detectar la tecnología de fuente y la compatibilidad con formatos, así como una mejora progresiva del contenido. En el siguiente ejemplo, se prueba la compatibilidad con las fuentes COLRv1.
@supports font-tech(color-COLRv1) {
}
Compatibilidad con la función tech() en el descriptor @font-face src:
El nivel 4 de las fuentes CSS brinda un medio adicional para seleccionar o filtrar los recursos de fuente. Se introdujo la función tech(), que permite pasar una lista de tecnologías de fuentes que este BLOB de fuente respectivo necesita para funcionar. En función de eso, el usuario-agente seleccionará el primer recurso adecuado.
Chrome en Android
El OSK de Android 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 metaventana de visualización interactive-widget.
Pruebas de origen
Esta versión de Chrome tiene dos pruebas de origen nuevas.
Identidad del comercio en el evento canmakepayment
El evento del service worker canmakepayment le permite al comercio saber si el usuario tiene una tarjeta registrada en una app de pagos instalada. Pasa silenciosamente el origen del comercio y los datos arbitrarios 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 ni muestra ninguna interfaz de usuario. La prueba del desarrollador para quitar los campos de identidad de “canmakepayment” evento puede habilitarse a través de: chrome://flags/#clear-identity-in-can-make-payment. Si habilitas esta marca, se vacían los campos de identidad de “canmakepayment” (y el intent IS_READY_TO_PAY de Android).
Obtén más información en el artículo Actualización del comportamiento del evento CanMakePayment de la API de Payment Handler.
API de NotRestoredReason para la memoria caché atrás/adelante
La API de NotRestoredReason, a través de la API de PerformanceNavigationTiming, informará la lista de motivos por los que una página no se publica desde BFcache en una estructura de árbol de marcos.
Se pueden bloquear las páginas de BFcache por diferentes motivos, como los que requiere la especificación y los 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 pageshow y PerformanceNavigationTiming.type(back-forward). Esta API permite que los sitios recopilen información sobre por qué no se usa BFCache en la navegación del historial, de modo que puedan tomar medidas en cada motivo y hacer que su página sea compatible con BFCache.
Bajas y eliminaciones
Esta versión de Chrome incluye las bajas y las eliminaciones que se indican a continuación. Visita ChromeStatus.com para consultar las listas de bajas planificadas, bajas actuales y eliminaciones anteriores.
Bajas
Esta versión de Chrome da de baja una función.
window.defaultStatus y window.defaultstatus dejaron de estar disponibles y se quitaron
Estas son APIs no estándar que no se implementan en todos los navegadores y que no afectan su comportamiento. De esta manera, se borrarán los datos y se quitará una posible señal de huella digital.
Originalmente, se usaban para modificar/controlar la “barra de estado”. texto 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 admite estos atributos. El atributo window.status relacionado está estandarizado, pero nunca debe afectar la barra de estado de la ventana.
Eliminaciones
Esta versión de Chrome quita cuatro funciones.
Quitar ImageDecoderInit.premultiplyAlpha
La función no tiene efectos observables en casos de uso principales, pero puede limitar las implementaciones de maneras poco óptimas. Consulta este problema para obtener una descripción más detallada. Por consenso de los editores de especificaciones de WebCodecs y la falta de uso (de 0.000000339% a 0.00000687% de las cargas de páginas por uso en M106)
Quitar navigateEvent.restoreScroll()
Se reemplazará restoreScroll() por navigateEvent.scroll(). scroll() funciona de manera idéntica, 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 se cambia el nombre junto con el cambio de comportamiento).
Quitar navigateEvent.transitionWhile()
Se reemplazará transitionWhile() por navigateEvent.intercept() debido a fallas de diseño que informaron los desarrolladores. intercept() se comporta casi de forma casi idéntica a genrewhile(), pero en lugar de tomar un parámetro obligatorio de la promesa, toma una función de controlador opcional que muestre una promesa. De esta manera, el navegador puede controlar cuándo se ejecuta el controlador, que es más intuitivo y posterior que en transitionWhile().
Quitar googIPv6 de mediaConstraint de WebRTC
"googIPv6: false" se puede usar para inhabilitar la compatibilidad con IPv6 en WebRTC, como se muestra 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.