Novedades de Chrome 129

Pete LePage

Tenga en cuenta lo siguiente:

Soy Pete LePage. Analicemos las novedades para desarrolladores en Chrome 129.

Cómo dividir tareas largas con scheduler.yield()

Las tareas largas retrasan la capacidad del navegador para responder a las entradas del usuario, lo que crea la percepción de que un sitio es lento y afecta métricas de rendimiento críticas, como INP. Con scheduler.yield(), puedes dividir tareas largas en partes más pequeñas, lo que mejora la capacidad de respuesta, ya que se cede explícitamente al subproceso principal.

Te permite indicarle al navegador lo siguiente:

"¡HOLA! El trabajo que voy a hacer podría tardar un poco. Si necesitas pintar un marco, responder a las entradas del usuario o tienes otras tareas importantes, no te preocupes, puedo esperar".

Representación de cómo dividir una tarea puede facilitar la interacción del usuario. En la parte superior, una tarea larga bloquea la ejecución de un controlador de eventos hasta que finaliza la tarea. En la parte inferior, la tarea fragmentada permite que el controlador de eventos se ejecute antes de lo esperado.

Agrega la siguiente línea a tu código JavaScript con frecuencia para darle un respiro al navegador y evitar problemas de INP.

await scheduler.yield();

Es importante destacar que permite que se priorice la continuación de tu código para que no pierdas el rendimiento. Recomendamos usar scheduler.yield() de forma liberal en funciones entre cualquier parte de trabajo más grande.

Consulta Cómo optimizar tareas largas para obtener más detalles.

Animaciones con tamaños intrínsecos

Las animaciones de CSS son muy atractivas, pero suelen requerir tamaños explícitos, por lo que no puedes usar las palabras clave de tamaño intrínseco, como auto, min-content o fit-content.

La propiedad CSS interpolate-size abre un nuevo conjunto de animaciones que no eran posibles cuando se usaban palabras clave de tamaño intrínsecas.

Sin interpolate-size, los botones del siguiente video no tienen transición.

Después de agregar interpolate-size: allow-keywords, los botones del video obtienen un hermoso efecto de animación de transición.

Especificar interpolate-size: allow-keywords en el elemento root establece el comportamiento nuevo para toda la página. Te sugerimos que lo hagas siempre que la compatibilidad no sea un problema.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Para un control más preciso, la función calc-size() de CSS, similar a calc(), también admite operaciones en exactamente una de las palabras clave de tamaño intrínseco admitidas. Cuando se realizan cálculos de diseño, la palabra clave size se evalúa como el tamaño original de calc-size-basis.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Consulta Animate to height: auto; (and other intrinsic sizing keywords) in CSS para obtener todos los detalles.

Cambios en el posicionamiento de anclaje de CSS

El posicionamiento de anclas de CSS llegó a Chrome 125, pero después de una discusión adicional dentro del grupo de trabajo de CSS, se realizaron algunos cambios en la especificación y la implementación. Si ya usas la posición de anclaje de CSS, deberás actualizar tu código lo antes posible.

En primer lugar, se cambió el nombre de inset-area por position-area. Esto era preferible porque la redacción de position- te ayuda a recordar que esta propiedad se aplica al elemento posicionado, no al elemento de anclaje.

En segundo lugar, el nombre de position-try-options cambió a position-try-fallbacks. Esto te ayuda a recordar que estos son solo resguardos para la posición principal, que se determina según los estilos base.

Por último, se quitará la sintaxis funcional inset-area() de position-try. Por lo tanto, usa position-try-fallbacks: top en lugar de position-try-fallbacks: inset-area(top).

Y mucho más.

Por supuesto, hay mucho más.

Hay un nuevo método Intl para dar formato a las duraciones, con compatibilidad con varias configuraciones regionales.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

El lienzo de la GPU web ahora puede usar el rango completo de la pantalla para las imágenes HDR.

Además, hay algunas bajas y eliminaciones que pueden afectar a algunos desarrolladores.

Lee las notas de la versión completas.

Lecturas adicionales

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

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube para desarrolladores de Chrome y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Para comunicarte con Adriana, soy Pete LePage y tan pronto como se lance Chrome 130, estaremos aquí para comentarte las novedades de Chrome.