Novedades de Chrome 123

Adriana Jara

Tenga en cuenta lo siguiente:

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

Función de CSS light-dark().

La función light-dark() en CSS te permite crear colores que se adaptan a las preferencias del usuario por 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 apropiado 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 en el subproceso principal, que suele ser la causa de un INP incorrecto (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.

Recopilar y analizar esta información te permite identificar y solucionar problemas de cuello de botella en el 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 service worker, puedes hacer que los sitios web funcionen sin conexión y crear estrategias de almacenamiento en caché que puedan aumentar el rendimiento.

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

Con la API de enrutamiento estático de Service Worker, durante la instalación, puedes declarar rutas de acceso para que siempre se entreguen desde la red. Cuando una URL controlada se carga posteriormente, el navegador puede comenzar a recuperar recursos de esas rutas antes de que el service worker haya terminado de iniciarse. Esto elimina el service worker de las URL que sabes que no necesitan un service worker.

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

Y mucho más.

Por supuesto que hay mucho más.

  • Con la interfaz de 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 permite cargar páginas más rápido y usar menos ancho de banda, además de dedicar menos tiempo, CPU y energía a la compresión en los servidores, lo que reduce los costos de servidores.

  • La API de notRestoredReasons para bfcache se lanzará desde Chrome 123. Esto permite a los propietarios de sitios recopilar los motivos en el campo sobre por qué no se pudo usar la bfcache. Los propietarios de los sitios pueden usar esta opción para mejorar el uso de la bfcache, lo que permite navegar por el historial más rápido.

  • El valor picture-in-picture de display-mode te permite escribir reglas de CSS específicas que solo se aplican cuando la aplicación 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 ver cambios adicionales en Chrome 123.

Suscribirse

Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

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