Chrome 125

Fecha de lanzamiento estable: 14 de mayo de 2024

A menos que se indique lo contrario, los siguientes cambios se aplican a la versión del canal estable de Chrome 125 para Android, ChromeOS, Linux, macOS y Windows.

HTML y DOM

Serialización declarativa de shadow DOM

Una función que permite a los desarrolladores serializar árboles del DOM que contienen shadow roots, estandarizada recientemente en el estándar HTML.

Error de seguimiento #41490936 | Entrada de ChromeStatus.com | Especificaciones

CSS

Posicionamiento de las anclas CSS

El posicionamiento de anclajes de CSS permite a los desarrolladores conectar un elemento en una posición absoluta a uno o más elementos de la página (los anclajes), de manera declarativa y sin usar JavaScript. El posicionamiento de los anclas funciona de forma eficaz cuando estos son desplazables. Un caso de uso común consiste en posicionar una ventana emergente, como información sobre la herramienta junto al elemento que la invocó o un menú de selección y su lista de opciones de ventanas emergentes. Antes de la función de posicionamiento de anclaje, estos casos de uso requerían que JavaScript posicionara dinámicamente la ventana emergente y la mantuviera anclada a medida que se desplazaba el elemento que invocaba, lo que resultaba útil para el rendimiento y era difícil de acomodar. Con el posicionamiento de anclaje, estos casos de uso se pueden implementar de forma declarativa y de rendimiento.

La función de posicionamiento de anclas consta de una gran cantidad de propiedades CSS. Estas son algunas de las propiedades clave:

  • anchor-name: Configura un elemento para que sea un ancla de otros elementos.
  • position-anchor: Describe el anclaje "predeterminado" que un elemento anclado debe usar para su posicionamiento.
  • La función anchor(), que se usa para hacer referencia a la posición del elemento de anclaje en el posicionamiento del elemento anclado
  • inset-area: Es una abreviatura para posicionamiento, para posiciones relativas comunes.

Introducción a la API de posicionamiento de anclas de CSS | Error de seguimiento #40059176 | Entrada de ChromeStatus.com | Especificaciones

Funciones de valores escalonados de CSS: round(), mod() y rem()

Las funciones de valores escalonados, round(), mod() y rem(), transforman un valor determinado de acuerdo con otro "valor del paso".

La función de CSS round() muestra un número redondeado en función de la estrategia de redondeo seleccionada.

La función mod() de CSS muestra un módulo restante cuando el primer parámetro se divide por el segundo, similar al operador de resto de JavaScript (%). El módulo es el valor restante cuando un operando, el dividendo, se divide por un segundo operando, el divisor. Siempre toma el signo del divisor.

La función de CSS rem() muestra el resto que queda cuando el primer parámetro se divide por el segundo, de manera similar al operador de resto de JavaScript (%). El resto es el valor que queda cuando un operando, el dividendo, se divide por un segundo operando, el divisor. Siempre toma el signo del dividendo.

Error de seguimiento #40253179 | Entrada de ChromeStatus.com | Especificaciones

Nueva sintaxis para :state() personalizado de CSS

El estado personalizado de CSS permite que los elementos personalizados expongan sus propias seudoclases. Se especificó la sintaxis en el CSSWG, y Chrome 125 ahora admite la nueva sintaxis :state(foo). Este cambio tendrá una ventana en la que Chrome admitirá la sintaxis anterior (:--foo) y la nueva para que los sitios web puedan cambiar a la nueva.

Entrada de ChromeStatus.com | Especificaciones

Quita la discontinuidad de los colores de Oklab y Oklch con una luminosidad de casi el 100% o 0

Antes de este cambio, todos los colores de Lab, LCH, Oklab y Oklch con un valor de luminosidad del 100% se renderizaban como blanco, independientemente de los otros dos parámetros. Todos los colores en estos espacios con un valor de luminosidad de 0 se procesaron como negro. Estas dos asignaciones causaron discontinuidades en los gradientes y fueron inesperadas para los desarrolladores web.

Con esta reversión, estos colores ya no se asignan de forma artificial, y el color que se muestra resultante será continuo con los colores cercanos y dependerá de la asignación de gama de la pantalla.

Entrada de ChromeStatus.com | Especificaciones

Se usaron barras de desplazamiento raíz del esquema de colores.

Hace que el navegador use el esquema de colores preferido del usuario para renderizar las barras de desplazamiento del viewport si el valor de los "esquemas de colores compatibles de la página" es "normal" o no se especifica, y el valor calculado de color-scheme para el elemento raíz es normal. Se puede considerar que las barras de desplazamiento del viewport están fuera del contenido web. Por lo tanto, los usuarios-agentes deben respetar el esquema de colores preferido del usuario al renderizar las barras de desplazamiento del viewport, si el desarrollador no especificó explícitamente la compatibilidad para los esquemas de color.

Este cambio no impide que los desarrolladores controlen el esquema de colores de las barras de desplazamiento. El nuevo comportamiento hace que el navegador use el esquema de colores preferido del usuario para renderizar barras de desplazamiento no superpuestas de viewport solo si el desarrollador no especificó el esquema de colores para el elemento raíz.

title | Error de seguimiento #40259909 | Entrada de ChromeStatus.com | Especificaciones

Clase view-transitions

Hay una nueva propiedad de CSS view-transition-class que te permite especificar una o más clases de transición de vistas. Luego, puedes seleccionar los pseudoelementos ViewTransition mediante estas clases, por ejemplo, ::view-transition-group(*.class).

Esta es una extensión de la API de ViewTransition que simplifica el diseño de los seudoelementos de transición de vista de una manera similar a la que las clases de CSS simplifican el diseño de los elementos regulares del DOM.

Error de seguimiento #41492972 | Entrada de ChromeStatus.com | Especificaciones

Cargando

Aceptar las URLs HTTP y HTTPS cuando se construye un WebSocket

Esta actualización habilita los esquemas HTTP y HTTPS en el constructor de WebSocket, por lo tanto, también permite a los desarrolladores usar URLs relativas, que se normalizan para los esquemas internos ws: y wss:.

Error de seguimiento #325979102 | Entrada de ChromeStatus.com | Especificaciones

APIs web

Incorporaciones a la API de Attribution Reporting

Se agregaron funciones a la API de Attribution Reporting para crear capacidades de depuración adicionales, ya que admiten el análisis de informes de depuración de fallas, mejoran la ergonomía de la API mediante la compatibilidad con un campo para especificar la plataforma de registro preferida y mejoran la privacidad.

Entrada de ChromeStatus.com

La API de Compute Pressure

La API de presión de procesamiento ofrece estados de alto nivel que representan la carga de la CPU en el sistema. Permite que la implementación use las métricas de hardware subyacentes adecuadas para garantizar que los usuarios puedan aprovechar toda la potencia de procesamiento disponible, siempre y cuando el sistema no esté bajo un estrés inmanejable.

Intel lideró el trabajo de diseño e implementación de esta API, lo que permitirá que las apps de videoconferencias balanceen dinámicamente las funciones y el rendimiento.

API de Compute Pressure | Error de seguimiento #40683064 | Entrada de ChromeStatus.com | Especificación

Esto inicia la extensión propuesta de la API de Storage Access (compatible con versiones anteriores y se encuentra en prueba de origen) para permitir el acceso al almacenamiento sin cookies y sin cookies en un contexto de terceros. La API actual solo proporciona acceso a cookies, que tienen casos de uso diferentes al almacenamiento sin cookies.

Error de seguimiento #40282415 | Entrada de ChromeStatus.com | Especificaciones

Requisito de CORS de FedCM en el extremo de aserción de ID

Es difícil razonar las recuperaciones en la API de FedCM debido a las propiedades que requieren. Aunque existe un debate sobre el extremo de las cuentas, también existe un gran consenso de que el extremo de aserción de ID debe usar CORS. Esta actualización alinea mejor las propiedades de seguridad de esta recuperación con otras recuperaciones de la plataforma web.

Actualizaciones de FedCM: Prueba de origen de la API de Button Mode, CORS y SameSite | Error de seguimiento #40284123 | Entrada de ChromeStatus.com

FedCM ahora envía solicitudes de aserción de ID con CORS. Ese cambio significa que Chrome ya no envía cookies SameSite=Strict al extremo de aserción de ID, aunque Chrome envía SameSite=None de todos modos. Dado que no tiene sentido enviar un conjunto diferente de cookies al extremo de las cuentas y al extremo de aserción de ID, este cambio las hace coherentes.

No enviar cookies SameSite=Strict también es coherente con el comportamiento de requestStorageAccess y las solicitudes entre sitios en general.

Error de seguimiento #329145816 | Entrada de ChromeStatus.com | Especificaciones

Acción predeterminada interoperable mousemove

Chrome permitió cancelar eventos mousemove para evitar otras APIs, como la selección de texto (incluso la función de arrastrar y soltar en el pasado). Esto no coincide con otros navegadores principales ni cumple con las especificaciones de eventos de la IU. Ahora, la selección de texto ya no será la acción predeterminada de mousemove. Aún se pueden evitar la selección de texto y la acción de arrastrar y soltar si se cancelan los eventos selectstart y dragstart, respectivamente.

Esta función se lanzará de forma gradual a partir de Chrome 125 y se espera que esté disponible para todos los usuarios a partir de Chrome 126.

Demostración | Error de seguimiento #40078978 | Entrada de ChromeStatus.com | Especificaciones

Modificadores de expresiones regulares

Los modificadores de expresiones regulares agregan la capacidad de modificar de forma local las marcas i, m y s dentro de un patrón.

Si deseas habilitar una marca para una subexpresión, usa (?X:subexpr), en el que X es una de i, m o s. Si deseas inhabilitar una marca para una subexpresión, usa (-X:subexpr).

Por ejemplo, para la marca i que no distingue entre mayúsculas y minúsculas, usa el siguiente código:

const re1 = /^[a-z](?-i:[a-z])$/i;
re1.test("ab"); // true
re1.test("Ab"); // true
re1.test("aB"); // false

const re2 = /^(?i:[a-z])[a-z]$/;
re2.test("ab"); // true
re2.test("Ab"); // true
re2.test("aB"); // false

Entrada de ChromeStatus.com | Especificaciones

Expresión regular de grupos de captura con nombre duplicados

Los grupos de captura con nombre duplicados te permiten usar el mismo nombre de grupo de captura en todas las alternativas. Por ejemplo:

const re = /(?<year>[0-9]{4})-[0-9]{2}|[0-9]{2}-(?<year>[0-9]{4})/;

En este caso, year es válido para la primera alternativa ((?<year>[0-9]{4})-[0-9]{2}) o la segunda ([0-9]{2}-(?<year>[0-9]{4})).

Entrada de ChromeStatus.com | Especificaciones

Apps de Chrome

API de Direct Sockets en apps de Chrome

Esta actualización facilita la transición de apps especializadas de apps de Chrome a apps web aisladas, ya que habilita los sockets directos en las apps de Chrome, lo que permite que las apps web establezcan comunicaciones del protocolo de control de transmisión directa (TCP) y el protocolo de datagramas de usuario (UDP) con dispositivos y sistemas de red.

Entrada de ChromeStatus.com | Especificaciones

Pruebas de origen nuevas

API de modo de botón de FedCM y uso de la API de otras cuentas

Esta prueba de origen incluye las siguientes dos APIs de FedCM.

La API de Button Mode permite que los sitios web llamen a FedCM con un clic, como un botón de Acceder al IdP. Esto requiere que FedCM garantice que siempre responda con una interfaz de usuario visible, a diferencia del modo de widget, que no muestra una IU cuando los usuarios salen de la cuenta. Llamar a la API de FedCM en modo de botón lleva a los usuarios a acceder al IdP (en una ventana de diálogo), cuando los usuarios salen de su cuenta.

Además, debido a que se llama al modo de botón dentro de un gesto explícito del usuario, la IU también puede ser más destacada (por ejemplo, centrada y modal) en comparación con la IU del modo de widget (que no tiene esa intención explícita). Obtén más información sobre cómo funciona la API de Button Mode en Actualizaciones de FedCM: Prueba de origen de la API de Button Mode, CORS y SameSite.

La API de Use Other Account permite que un proveedor de identidad permita a los usuarios acceder a otras cuentas.

Prueba de origen | Demostración | Error de seguimiento #40284792 | Entrada de ChromeStatus.com | Especificaciones

APIs de Foldable

Esta prueba de origen incluye la API de postura del dispositivo y la API de enumeración de segmentos de viewports. Estas APIs están diseñadas para ayudar a los desarrolladores a segmentarse para dispositivos plegables.

Prueba de origen | Prueba de origen para APIs de dispositivos plegables | Entrada de ChromeStatus.com | Especificaciones

Prueba de baja para propiedades y métodos de pantalla completa con prefijos de HTMLVideoElement

Esta prueba de baja te permite volver a habilitar la compatibilidad con las propiedades y los métodos de HTMLVideoElement con prefijo si necesitas más tiempo para ajustar tu código.

Prueba de origen | Entrada de ChromeStatus.com

Omitir análisis de precarga

Omite el análisis de precarga para explorar las compensaciones de rendimiento de las páginas sin recuperaciones de subrecursos.

El paso del escáner de carga previa beneficia el rendimiento de las páginas con recuperaciones de subrecursos mediante la implementación de la carga previa especulativa. Sin embargo, en el caso de las páginas que no se benefician de este paso, es decir, en el caso de las páginas sin subrecursos, se trata de una sobrecarga de procesamiento adicional con pocos beneficios.

Para los usuarios de la Web avanzados que quieran beneficiarse de la reducción de esta sobrecarga, este experimento proporciona un control a nivel de la página para inhabilitar el escáner de precarga. Los datos recopilados en este experimento podrían evaluar si sería útil una API modificada o una implementación diferente del escáner de precarga de HTML.

Prueba de origen | Error de seguimiento #330802493 | Entrada de ChromeStatus.com | Especificaciones

Bajas y eliminaciones

Se quitó el alias "window-placement" para los permisos y la política de permisos "window-management".

Se quitó el alias "window-placement" para los permisos y la política de permisos "window-management". Esto forma parte de un esfuerzo mayor para cambiar el nombre de las strings. Para ello, se dará de baja y se quitará "window-placement". El cambio de terminología mejora la longevidad del descriptor a medida que evoluciona la API de Window Management con el tiempo.

title | Error de seguimiento #40842072 | Entrada de ChromeStatus.com | Especificaciones

Eliminación de la política empresarial: NewBaseUrlInheritanceBehaviorAllowed

El cambio de código subyacente (habilitar el nuevo comportamiento de herencia de URL base) que anula esta política empresarial está habilitado en versiones estables desde agosto de 2023 (Chrome 118). Dado que se solucionaron problemas conocidos, esta política empresarial se quitó en Chrome 125.

Entrada de ChromeStatus.com

Eliminación de las propiedades y los métodos de pantalla completa de HTMLVideoElement con prefijo

Las APIs de pantalla completa con prefijo HTMLVideoElement dejaron de estar disponibles desde Chrome 38. Se reemplazaron por Element.requestFullscreen(), que se envió por primera vez sin prefijo en 2018 en Chrome 71.

Las siguientes propiedades y métodos se quitarán de HTMLVideoElement:

  • webkitSupportsFullscreen
  • webkitDisplayingFullscreen
  • webkitEnterFullscreen()
  • webkitExitFullscreen()
  • webkitEnterFullScreen() (ten en cuenta las diferentes mayúsculas de la "S" en Pantalla completa)
  • webkitExitFullScreen()

Regístrate en la prueba de baja que se menciona en esta publicación si tu sitio aún las utiliza y necesitas más tiempo para actualizar el código.

Entrada de ChromeStatus.com

Lecturas adicionales

¿Buscas más? Consulta estos recursos adicionales.

Descargar Google Chrome

Descarga Chrome para Android, computadoras de escritorio o iOS.