Novedades de Chrome 137

Rachel Andrew

Publicado el 27 de mayo de 2025

Chrome 137 se está lanzando ahora, y en esta publicación se comparten algunas de las funciones clave de la versión. Lee las notas de la versión de Chrome 137 completas.

Aspectos destacados de esta versión:

Usa reading-flow y reading-order para garantizar un orden lógico de las pestañas en diseños complejos. La función if() de CSS proporciona una forma concisa de expresar valores condicionales. La integración de promesas de JavaScript (JSPI) permite que las aplicaciones de WebAssembly se integren con promesas de JavaScript.

CSS reading-flow y reading-order

La propiedad reading-flow de CSS controla el orden en que los elementos de un diseño flexible, de cuadrícula o de bloque se exponen a las herramientas de accesibilidad y cómo se enfocan con los métodos de navegación secuencial lineal. Esto resuelve un problema de larga data con los diseños de cuadrícula y flexibles, en los que el orden de tabulación puede desconectarse del orden en que se disponen los elementos.

Toma un valor de palabra clave, con un valor predeterminado de normal, que mantiene el comportamiento de ordenar elementos en orden del DOM. Para usarlo dentro de un contenedor flexible, establece su valor en flex-visual o flex-flow. Para usarla dentro de un contenedor de cuadrícula, establece su valor en grid-rows, grid-columns o grid-order.

La propiedad reading-order de CSS te permite anular manualmente el orden de los elementos dentro de un contenedor de flujo de lectura. Para usar esta propiedad dentro de un contenedor de cuadrícula, flexible o de bloque, establece el valor reading-flow en el contenedor como source-order y el reading-order del elemento individual en un valor entero.

Para obtener más información, consulta Cómo usar CSS reading-flow para la navegación secuencial lógica con enfoque.

Función if() de CSS

La función if() de CSS proporciona una forma concisa de expresar valores condicionales. Acepta una serie de pares condición-valor, delimitados por punto y coma. La función evalúa cada condición de forma secuencial y devuelve el valor asociado a la primera condición que sea verdadera. Si ninguna de las condiciones se evalúa como verdadera, la función devuelve un flujo de tokens vacío.

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

Integración de promesas de JavaScript de WebAssembly (JSPI)

La integración de promesas de JavaScript (JSPI) es una API que permite que las aplicaciones de WebAssembly se integren con promesas de JavaScript.

Permite que un programa de WebAssembly actúe como el generador de una promesa y que interactúe con APIs que contienen promesas.

En particular, cuando una aplicación usa la JSPI para llamar a una API (de JavaScript) que contiene una promesa, se suspende el código de WebAssembly, y al llamador original del programa de WebAssembly se le otorga una promesa que se cumplirá cuando el programa de WebAssembly finalmente se complete.

Y mucho más

Por supuesto, hay mucho más:

  • Como continuación de Storage Partitioning, Chrome implementó la partición del acceso a la URL de BLOB por clave de almacenamiento.
  • Ahora se implementaron los formatos de píxeles de punto flotante de Canvas.
  • offset-path: shape() es compatible, por lo que puedes usar formas responsivas para establecer la ruta de animación.

Lecturas adicionales

Esto solo abarca algunos aspectos destacados clave. Consulta los siguientes vínculos para ver los cambios adicionales en Chrome 137.

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo. También puedes seguirnos en X o LinkedIn para ver artículos y entradas de blogs nuevos.

En cuanto se lance Chrome 138, te contaremos las novedades de Chrome.