Nuevo en Chrome 111

Esto es lo que necesitas saber:

• Crea transiciones elegantes en su aplicación de una sola página (SPA) con View Transitions API.
• Lleve los colores al siguiente nivel con soporte para [CSS Color Level 4] (#css-color-level4).
• Descubra [nuevas herramientas] (#devtools-color) en el panel de estilo para aprovechar al máximo la nueva funcionalidad de color.
• Y mucho más.

Soy Adriana Jara. Vamos un poco más allá y descubramos qué hay de nuevo para los desarrolladores en Chrome 111.

# View Transitions API.

Crear transiciones fluidas en la web es una tarea compleja. La API View Transitions está aquí para simplificar la creación de transiciones elegantes ya que, toma capturas instantáneas de las vistas y permite que el DOM cambie sin superposición entre estados.

La transición predeterminada es un cross-fade, el siguiente fragmento implementa esta experiencia.

function spaNavigate(data) {
  // Alternativa para browsers que no implementan esta API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Con una transición:
  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 la callback que se pasó .startViewTransition(). Ahí es donde se actualiza el DOM. Luego, la API captura el nuevo estado de la página.

Ten en cuenta que la API está disponible para aplicaciones de una sola página (SPA), pero también se está implementando la funcionalidad para otros modelos.

Hay muchos detalles sobre esta API, este artículo contiene ejemplos y detalles para crear sus propias transiciones personalizadas, , también puedes explorar La documentación de View Transitions en MDN.

# Nivel de color CSS 4.

Con el nivel de color 4 de CSS, CSS ahora es compatible con pantallas de alta definición, especificando colores de gamas HD al tiempo que ofrece espacios de color con especializaciones.

En pocas palabras, ¡significa un 50 % más de colores para elegir! Y pensabas que 16 millones de colores sonaba como mucho. Yo también pensaba lo mismo.

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

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

.valid-css-color-función-colores {
  --srgb: color(srgb 1 1 1);
  --srgb-lineal: color(srgb-lineal 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%);
  --profoto: color(profoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

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

# Nuevas herramientas de desarrollo de color.

Devtools tiene nuevas características para facilitar la especificación CSS color level 4.

El panel Estilos ahora admite los 12 nuevos espacios de color y las 7 nuevas gamas de colores descritas en la especificación. Estos son ejemplos de definiciones de color CSS con color(), lch(), oklab() y color-mix().

Al usar color-mix(), que permite mezclar un porcentaje de un color con otro, puede ver el resultado de color final en el pane Calculado

Además, el selector de color es compatible con todos los nuevos espacios de color con más funciones. Por ejemplo, haga clic en la muestra de color de color (display-p3 1 0 1). Verás que se ha agregado una línea límite de gama, que distingue entre las gamas sRGB y display-p3 para una comprensión más clara de la gama de colores seleccionada.

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

Consulte esta publicación para obtener más información sobre la depuración de colores y otras características nuevas en devtools.

# ¡Y más!

Por supuesto que hay mucho más.

• CSS agregó funciones trigonométricas, unidades de fuente raíz adicionales y [extendió el pseudoselector n-ésimo hijo] (/articles/css-nth-child-of-s/).
• La API Document Picture-in-Picture está en origen trial
• Las acciones previousslide y nextslide ahora forman parte de [Media Session API] (https://web.dev/media-session). Consulta la demostración aquí.

# Otras lecturas

Este artículo cubre sólo algunos aspectos destacados clave. Compruebe los enlaces a continuación para cambios adicionales en Chrome 111.

• Novedades de Chrome DevTools (111)
• Desactivación y eliminación de Chrome 111
• Actualizaciones de ChromeStatus.com para Chrome 111 *Lista de cambios del repositorio fuente de Chromium
• Calendario de lanzamiento de Chrome

# Suscríbete

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

Soy Adriana Jara, y tan pronto como se lance Chrome 112, estaré aquí para ¡Cuéntanos qué hay de nuevo en Chrome!