Novedades de Chrome 142

Rachel Andrew

Publicado el 28 de octubre de 2025

Ya se lanzó Chrome 142, 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 142 completas.

Aspectos destacados de esta versión:

Seudoclases :target-before y :target-after

Estas seudoclases coinciden con los marcadores de desplazamiento que están antes o después del marcador activo (que coincide con :target-current) dentro del mismo grupo de marcadores de desplazamiento, según lo determina el orden del árbol plano:

  • :target-before: Coincide con todos los marcadores de desplazamiento que preceden al marcador activo en el orden del árbol plano dentro del grupo.
  • :target-after: Coincide con todos los marcadores de desplazamiento que siguen al marcador activo en el orden del árbol plano dentro del grupo.

Sintaxis de rango para consultas de contenedor de diseño y if()

Chrome mejora las consultas de diseño de CSS y la función if() agregando compatibilidad con la sintaxis de rangos.

Extiende las consultas de estilo más allá de la coincidencia de valores exactos (por ejemplo, style(--theme: dark)). Los desarrolladores pueden usar operadores de comparación (como > y <) para comparar propiedades personalizadas, valores literales (por ejemplo, 10 px o 25%) y valores de funciones de sustitución como attr() y env(). Para que la comparación sea válida, ambos lados deben resolverse en el mismo tipo de datos. Se limita a los siguientes tipos numéricos: <length>, <number>, <percentage>, <angle>, <time>, <frequency> y <resolution>.

Ejemplos:

Compara una propiedad personalizada con una longitud literal:

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

Comparar dos valores literales

@container style(1em < 20px) {
  /* ... */
}

Cómo usar rangos de estilo en if():

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

Invocadores de interés (atributo interestfor)

Chrome agrega un atributo interestfor a los elementos <button> y <a>. Este atributo agrega comportamientos de "interés" al elemento. Cuando un usuario muestra interés en el elemento, se activan acciones en el elemento objetivo, por ejemplo, se muestra una ventana emergente.

El agente de usuario detecta cuando un usuario muestra interés en el elemento a través de métodos como mantener el puntero sobre el elemento, presionar teclas de acceso rápido especiales en el teclado o mantener presionado el elemento en pantallas táctiles. Cuando se muestra o se pierde el interés, se activa un InterestEvent en el objetivo, que tiene acciones predeterminadas para las ventanas emergentes, como mostrar y ocultar la ventana emergente.

Lecturas adicionales

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

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 blog nuevos.

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