Chrome 125

Fecha de lanzamiento de la versión 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 de Shadow DOM declarativo

Es una función que permite a los desarrolladores serializar árboles del DOM que contienen raíces de sombra, que se estandarizó recientemente en el estándar HTML.

Error de seguimiento n° 41490936 | Entrada de ChromeStatus.com | Especificación

CSS

Posicionamiento de anclaje de CSS

El posicionamiento de anclaje de CSS permite que los desarrolladores vinculen un elemento posicionado de forma absoluta a uno o más elementos de la página (los anclajes) de forma declarativa, sin usar JavaScript. El posicionamiento de anclas funciona de manera eficiente cuando las anclas se pueden desplazar. Un caso de uso común es colocar un cuadro emergente, como una información sobre la herramienta, junto al elemento que lo invocó, o un menú de selección y su lista de opciones emergentes. Antes de la función de posicionamiento de anclas, estos casos de uso requerían JavaScript para posicionar de forma dinámica el cuadro emergente y mantenerlo anclado a medida que se desplazaba el elemento de invocación, lo que es un problema de rendimiento y difícil de lograr. Con el posicionamiento de anclas, estos casos de uso se pueden implementar de forma declarativa y con un buen rendimiento.

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

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

Presentamos la API de posicionamiento de anclas de CSS | Error de seguimiento n° 40059176 | Entrada de ChromeStatus.com | Especificación

Funciones de valor escalonado de CSS: round(), mod() y rem()

Las funciones de valor escalonado, round(), mod() y rem(), transforman un valor determinado según otro "valor de paso".

La función de CSS round() devuelve un número redondeado según una estrategia de redondeo seleccionada.

La función de CSS mod() devuelve un módulo restante cuando el primer parámetro se divide por el segundo, de manera 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() devuelve un 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 n° 40253179 | Entrada de ChromeStatus.com | Especificación

Nueva sintaxis para :state() personalizado de CSS

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

Entrada de ChromeStatus.com | Especificación

Se quitó la discontinuidad de los colores Oklab y Oklch con una luminosidad de casi el 100% o el 0%.

Antes de este cambio, todos los colores Lab, LCH, Oklab y Oklch con un valor de luminosidad del 100% se renderizaban como blancos, independientemente de los otros dos parámetros. Todos los colores de estos espacios con un valor de luminosidad de 0 se renderizaron como negros. 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 resultante que se muestra será continuo con los colores cercanos y dependerá de la asignación de gama de la pantalla.

Entrada de ChromeStatus.com | Especificación

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 "esquemas de colores admitidos 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 cuando renderizan las barras de desplazamiento del viewport si el desarrollador no especificó de forma explícita la compatibilidad con los esquemas de colores.

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 las barras de desplazamiento que no se superponen del viewport solo si el desarrollador no especificó el esquema de colores para el elemento raíz.

title | Error de seguimiento n° 40259909 | Entrada de ChromeStatus.com | Especificación

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 seudoelementos ViewTransition con 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 vistas de una manera similar a la que las clases de CSS simplifican el diseño de los elementos normales del DOM.

Error de seguimiento n° 41492972 | Entrada de ChromeStatus.com | Especificación

Cargando

Acepta URLs HTTP y HTTPS cuando se construya un WebSocket

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

Error de seguimiento n° 325979102 | Entrada de ChromeStatus.com | Especificación

API web

Adiciones a la API de Attribution Reporting

Se agregaron funciones a la API de Attribution Reporting para crear capacidades de depuración adicionales, ya que se admiten informes de depuración de errores de análisis, se mejora la ergonomía de la API, ya que se admite un campo para especificar la plataforma de registro preferida, y se mejora la privacidad.

Entrada de ChromeStatus.com

La API de Compute Pressure

La API de Compute Pressure ofrece estados de alto nivel que representan la carga de CPU en el sistema. Permite que la implementación use las métricas de hardware subyacentes correctas para garantizar que los usuarios puedan aprovechar toda la potencia de procesamiento disponible, siempre que el sistema no esté bajo una carga inmanejable.

Intel lideró el trabajo de diseño y de implementación de esta API, que permitirá que las apps de videoconferencia equilibren de forma dinámica las funciones y el rendimiento.

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

Esto inicia la extensión propuesta de la API de Storage Access (retrocompatible y que 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 n° 40282415 | Entrada de ChromeStatus.com | Especificación

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

Es difícil razonar sobre las recuperaciones en la API de FedCM debido a las propiedades que se requieren de ellas. Si bien se está debatiendo sobre el extremo de cuentas, también hay un gran consenso de que el extremo de aserción de ID debe usar CORS. Esta actualización alinea las propiedades de seguridad de esta recuperación con más precisión con otras recuperaciones en la plataforma web.

Actualizaciones de FedCM: Prueba de origen de la API de Button Mode, CORS y SameSite | Error de seguimiento n° 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 sigue enviando SameSite=None. Dado que no tiene sentido enviar un conjunto diferente de cookies al extremo de cuentas y al extremo de aserción de ID, este cambio los 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 n° 329145816 | Entrada de ChromeStatus.com | Especificación

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). No coincide con los demás navegadores principales, ni tampoco se ajusta a las especificaciones del evento de IU. Ahora, la selección de texto ya no será la acción predeterminada de mousemove. Aun así, es posible evitar la selección de texto y la función de arrastrar y soltar a través de la cancelación de 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 en Chrome 126.

Demostración | Error de seguimiento n° 40078978 | Entrada de ChromeStatus.com | Especificación

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.

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

Por ejemplo, para la marca i que no distingue mayúsculas de minúsculas, usa lo siguiente:

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 | Especificación

Grupos de captura con nombres duplicados de expresiones regulares

Los grupos de captura con nombres 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 1ª alternativa ((?<year>[0-9]{4})-[0-9]{2}) o la 2ª alternativa ([0-9]{2}-(?<year>[0-9]{4})).

Entrada de ChromeStatus.com | Especificación

Apps de Chrome

API de Direct Sockets en las apps de Chrome

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

Entrada de ChromeStatus.com | Especificación

Nuevas pruebas de origen

API de Button Mode y API de Use Other Account de FedCM

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

La API de Button Mode permite que los sitios web llamen a FedCM dentro de un clic en un botón, como hacer clic en un botón 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 su cuenta. Cuando se llama a la API de FedCM en el modo de botón, los usuarios acceden al IdP (en una ventana de diálogo) cuando salen de la 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 prominente (por ejemplo, centrada y modal) en comparación con la IU del modo de widget (que no tiene una intención tan 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 que los usuarios accedan a otras cuentas.

Prueba de origen | Demostración | Error de seguimiento n° 40284792 | Entrada de ChromeStatus.com | Especificación

APIs de dispositivos plegables

Esta prueba de origen incluye la API de Device Posture y la API de Viewport Segments Enumeration. Estas APIs están diseñadas para ayudar a los desarrolladores a orientar sus apps a dispositivos plegables.

Prueba de origen | Prueba de origen para las APIs de Foldable | Entrada de ChromeStatus.com | Especificación

Prueba de baja para las propiedades y los métodos de pantalla completa de HTMLVideoElement con prefijo

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 el análisis de precarga

Omite el analizador de precarga para explorar las compensaciones de rendimiento de las páginas sin recuperaciones de recursos secundarios.

El paso del escáner de carga previa beneficia el rendimiento de las páginas con recuperaciones de recursos secundarios a través de la implementación de la carga previa especulativa. Sin embargo, para las páginas que no se benefician de este paso, es decir, para las páginas sin recursos secundarios, esto genera una sobrecarga de procesamiento adicional con pocos beneficios.

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

Prueba de origen | Error de seguimiento n° 330802493 | Entrada de ChromeStatus.com | Especificación

Bajas y eliminaciones

Quitar el alias "window-placement" para el permiso y la política de permisos "window-management"

Quita el alias "window-placement" para el permiso y la política de permisos "window-management". Esto forma parte de un esfuerzo más amplio para cambiar el nombre de las cadenas y, con el tiempo, dar de baja y quitar "window-placement". El cambio de terminología mejora la longevidad del descriptor a medida que la API de Window Management evoluciona con el tiempo.

title | Error de seguimiento n° 40842072 | Entrada de ChromeStatus.com | Especificación

Eliminación de la política empresarial: NewBaseUrlInheritanceBehaviorAllowed

El cambio de código subyacente (habilitar el nuevo comportamiento de herencia de la 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 de HTMLVideoElement con prefijo dejaron de estar disponibles desde Chrome 38. Se reemplazaron por Element.requestFullscreen(), que se envió por primera vez sin prefijo en el 2018 en Chrome 71.

Se quitarán las siguientes propiedades y métodos de HTMLVideoElement:

  • webkitSupportsFullscreen
  • webkitDisplayingFullscreen
  • webkitEnterFullscreen()
  • webkitExitFullscreen()
  • webkitEnterFullScreen() (ten en cuenta la diferencia en el uso de mayúsculas de la "S" en FullScreen)
  • webkitExitFullScreen()

Regístrate en la prueba de baja que se indica en esta publicación si tu sitio aún depende de estos elementos 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.