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 del inicio del service worker con la API de enrutamiento estático de Service Worker.
Y hay mucho más.

Soy Adriana Jara. Analicemos las novedades para desarrolladores en Chrome 123.

Función 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 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 verde 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 un mal 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, tiempo de renderización y tiempo dedicado al diseño y el estilo forzados, lo que se conoce como paginación excesiva de diseños.

La recopilación y el análisis de esta información te permiten identificar y solucionar cuellos de botella de rendimiento. 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 los trabajadores del servicio, puedes hacer que los sitios web funcionen sin conexión y crear estrategias de almacenamiento en caché que puedan 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. Dado que todas las recuperaciones deben realizarse a través del service worker, el navegador debe esperar a que se inicie y 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 adelante, el navegador puede comenzar a recuperar recursos de esas rutas de acceso antes de que se haya terminado de iniciar el service worker. Esto quita el trabajador de servicio de las URLs que sabes que no lo necesitan.

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

Y mucho más.

Por supuesto, hay mucho más.

Puedes ofrecer páginas personalizadas según el lugar desde el que el usuario navegó con la interfaz NavigationActivation.
Chrome ahora admite Zstandard (zstd). Este Content-Encoding ayuda a cargar páginas más rápido y a usar menos ancho de banda, y a dedicar menos tiempo, CPU y energía a la compresión en los servidores, lo que reduce los costos de los servidores.
La API de notRestoredReasons para bfcache se lanzará a partir de Chrome 123. Esto permite que los propietarios del sitio recopilen en el campo los motivos por los que 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 para 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 solo abarca algunos aspectos clave. Consulta los siguientes vínculos para ver cambios adicionales en Chrome 123.

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.

Soy Adriana Jara y, en cuanto se lance Chrome 124, estaré aquí para contarte las novedades.