Novedades de Chrome 111

Adriana Jara

Tenga en cuenta lo siguiente:

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

API de transiciones de View.

Crear transiciones fluidas en la Web es una tarea compleja. La API de View Transitions simplifica la creación de transiciones pulidas, para lo cual se tomarán instantáneas de las vistas y se permitirá que el DOM cambie sin ninguna superposición entre estados.

Transiciones creadas con la API de transición de View. Probar el sitio de demostración: Requiere Chrome 111 o versiones posteriores.

La transición de vista predeterminada es una atenuación cruzada. El siguiente fragmento implementa esta experiencia.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Cuando se llama a .startViewTransition(), la API captura el estado actual de la página.

Una vez que se completa, se llama al elemento callback que se pasa a .startViewTransition(). Ahí es donde se cambia el DOM. Luego, la API captura el nuevo estado de la página.

Ten en cuenta que la API se inicia para apps de una sola página (SPA), pero también se está implementando la compatibilidad con otros modelos.

Esta API tiene muchos detalles. Obtén más información en nuestro artículo que contiene muestras y detalles, o explora la documentación de Transitions de View en MDN.

Nivel 4 de color de CSS.

Con el nivel 4 de color de CSS, este lenguaje ahora admite pantallas de alta definición, especifica colores de gamas de alta definición y, además, ofrece espacios de color con especializaciones.

En resumen, significa que tienes un 50% más de colores para elegir. Creías que 16 millones de colores son muchos. Yo también lo creo.

Se muestra una serie de imágenes que hacen la transición entre gamas de colores amplias y estrechas, lo que ilustra la viveza del color y sus efectos.
Pruébalo tú mismo

La implementación incluye la función color(), que se puede usar para cualquier espacio de color que especifique colores con canales R, G y B. color() primero toma un parámetro de espacio de color y, luego, una serie de valores de canal para RGB y, de manera opcional, algunos valores alfa.

Estos son algunos ejemplos del uso de la función color con diferentes espacios de color.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Consulta este artículo para obtener más documentación y aprovechar al máximo los colores de alta definición con CSS.

Nuevas herramientas de desarrollo de colores.

Herramientas para desarrolladores tiene nuevas funciones para admitir la especificación de nivel 4 de color de CSS.

El panel Styles ahora admite los 12 espacios de color nuevos y los 7 gamuts nuevos descritos en la especificación. Estos son ejemplos de definiciones de color de CSS con color(), lch(), oklab() y color-mix().

Ejemplos de definiciones de colores CSS.

Cuando usas color-mix(), que permite combinar un porcentaje de un color con otro, puedes ver el resultado final del color en el panel Computed (Computed). resultado de la combinación de colores en el panel Cálculo

Además, el selector de color admite todos los espacios de color nuevos con más funciones. Por ejemplo, haz clic en la muestra de color de color(display-p3 1 0 1). También se agregó una línea de límite de gama que distingue entre las gamas sRGB y Display P3 para comprender mejor la gama del color seleccionado. Es una línea de límite de la gama.

El selector de color también admite la conversión de colores entre formatos de color.

Conversión de colores entre formatos de color

Consulta esta publicación para obtener más información sobre la depuración de colores y otras funciones nuevas en las herramientas para desarrolladores.

Y mucho más.

Por supuesto, hay mucho más.

Lecturas adicionales

Esto solo abarca algunos aspectos clave. Consulta los vínculos que aparecen a continuación para ver cambios adicionales en Chrome 111.

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.

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