Se usó la API de Cloud Translation para traducir esta página.

Novedades de Chrome 123

Adriana Jara

Tenga en cuenta lo siguiente:

Adapta tu esquema de colores con la nueva función light-dark().
Diagnostica la capacidad de respuesta de tu sitio con la API de Long Animation Frames.
Evita las penalizaciones de rendimiento durante el inicio de un service worker con la API de enrutamiento estático de service worker.
Hay mucho más.

Soy Adriana Jara. Profundicemos y veamos las novedades para desarrolladores en Chrome 123.

Función de CSS `light-dark()`.

La función light-dark() de CSS te permite crear colores que se adaptan a las preferencias del usuario para el modo oscuro o claro. Usa la función light-dark() para especificar dos valores de color diferentes dentro de una sola propiedad de CSS.

El navegador elegirá automáticamente el color adecuado según el valor color-scheme calculado del elemento. Por ejemplo, con el siguiente CSS:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

Si el usuario seleccionó un tema claro, el elemento tendrá un fondo lima.
Si el usuario seleccionó un tema oscuro, el elemento tendrá un fondo verde.

API de Long Animation Frames.

La API de Long Animation Frames está disponible para ayudarte a encontrar las causas de la congestión del subproceso principal, que suele ser la causa de una INP (Interaction to Next Paint), una métrica web esencial que mide la capacidad de respuesta de un sitio web.

La nueva API es una versión mejorada de la API de Long Tasks, que proporciona una mejor comprensión de las actualizaciones lentas de la interfaz de usuario. La API de Long Animation Frames te permite medir el trabajo de bloqueo. Mide las tareas junto con la siguiente actualización de renderización y agrega información, como secuencias de comandos de larga duración. el tiempo de renderización y el tiempo dedicado al diseño y el estilo forzados, lo que se conoce como paginación excesiva de diseños

Recopilar y analizar esta información te permite identificar cuellos de botella de rendimiento y solucionar problemas. Puedes capturar fotogramas largos con el siguiente código.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

API de enrutamiento estático de service worker.

Con service workers puedes hacer que los sitios web funcionen sin conexión y crear estrategias de almacenamiento en caché que pueden mejorar el rendimiento.

Sin embargo, puede haber un costo de rendimiento cuando se carga una página por primera vez en un tiempo y el service worker de control no se está ejecutando en ese momento. Debido a que todas las recuperaciones deben realizarse a través del service worker, el navegador debe esperar a que el service worker se inicie y se ejecute para saber qué contenido cargar.

Con la API de enrutamiento estático de service worker, en el momento de la instalación, puedes declarar que las rutas de acceso siempre se entreguen desde la red. Cuando se carga una URL controlada más tarde, el navegador puede comenzar a recuperar recursos de esas rutas antes de que el service worker haya terminado de iniciarse. Esto quitará el service worker de las URLs que sabes que no necesitan.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

Y mucho más.

Por supuesto, hay mucho más.

Con la interfaz NavigationActivation, puedes ofrecer páginas personalizadas según el lugar desde el que navegó el usuario.
Chrome ahora es compatible con Zstandard (zstd). Este Content-Encoding ayuda a cargar las páginas más rápido, a usar menos ancho de banda y a dedicar menos tiempo, uso de CPU y potencia a la compresión de los servidores, lo que reduce sus costos.
La API de notRestoredReasons para bfcache se lanzará a partir de Chrome 123. Esto permite que los propietarios de sitios recopilen razones en el campo por las cuales no se pudo usar bfcache. Los propietarios de los sitios pueden usar esta opción para mejorar el uso de la bfcache, lo que permite navegar más rápido por el historial.
El valor picture-in-picture de display-mode te permite escribir reglas de CSS específicas que solo se aplican cuando la app web se muestra en el modo de pantalla en pantalla. Por ejemplo:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Lecturas adicionales

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

Para mantenerte al día, 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.

Soy Adriana Jara. Apenas se lance Chrome 124, estaré aquí para contarte las novedades de Chrome.