Tenga en cuenta lo siguiente:
- Crea transiciones perfeccionadas en tu app de una sola página con la API de View Transitions.
- Lleva los colores al siguiente nivel gracias a la compatibilidad con el nivel de color 4 de CSS.
- Descubre nuevas herramientas en el panel de estilo para aprovechar al máximo la nueva funcionalidad de color.
- Además, hay mucho más.
Soy Adriana Jara. Analicémoslas y veamos las novedades para desarrolladores en Chrome 111.
Consulta la API de Transitions.
Crear transiciones fluidas en la Web es una tarea compleja. La API de View Transitions tiene como objetivo facilitar la creación de transiciones pulidas al tomar instantáneas de las vistas y permitir que el DOM cambie sin superposición entre estados.
La transición de vista predeterminada es un fundido cruzado, que se implementa en el siguiente fragmento.
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 complete, se llamará al callback pasado a .startViewTransition(). Aquí es donde se cambia el DOM. Luego, la API captura el nuevo estado de la página.
Ten en cuenta que la API se lanza para apps de una sola página (SPA), pero también se está implementando la compatibilidad con otros modelos.
Hay muchos detalles sobre esta API. Obtén más información en nuestro artículo que contiene muestras y detalles o explora la documentación Cómo ver las transiciones en MDN.
Nivel de color 4 de CSS.
Con el nivel de color 4 de CSS, ahora CSS admite pantallas de alta definición y especifica colores de gamuts HD, a la vez que ofrece espacios de color con especializaciones.
En pocas palabras, significa un 50% más de colores para elegir. Pensaste que 16 millones de colores sonaban bastante. Yo pensé eso también.
Pruébalo tú mismo
La implementación incluye la función color(). Se puede usar para cualquier espacio de color que especifique colores con canales R, G y B. color() toma primero un parámetro de espacio de color y, luego, una serie de valores de canal para RGB y, opcionalmente, algunos 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 que te permitirá aprovechar al máximo los colores de alta definición con CSS.
Nuevas herramientas para desarrolladores de colores.
Devtools tiene funciones nuevas para admitir la especificación de nivel 4 de color CSS.
El panel Styles ahora admite los 12 espacios de color nuevos y los 7 nuevos gamuts descritos en la especificación. Estos son ejemplos de definiciones de color de CSS con color(), lch(), oklab() y color-mix().
Cuando usas color-mix(), que permite combinar un porcentaje de un color con otro, puedes ver el resultado de color final en el panel Computed.
Además, el selector de color admite todos los nuevos espacios de color con más funciones. Por ejemplo, haz clic en la muestra de color(display-p3 1 0 1). También se agregó una línea de límite del gamut, que distingue entre los gamut sRGB y display-p3 para comprender con mayor claridad el gamut del color seleccionado.
El selector de color también admite la conversión de colores entre formatos de color.
Consulta esta publicación para obtener más información sobre la depuración del color y otras funciones nuevas de las Herramientas para desarrolladores.
Y mucho más.
Por supuesto que hay mucho más.
- CSS agregó funciones trigonométricas, unidades de fuente raíz adicionales y extendió el seudoselector secundario en enésimo.
- La API de Document Picture in Picture se encuentra en prueba de origen
- Las acciones
previousslideynextslideahora forman parte de la API de Media Session. Consulta la demostración aquí.
Lecturas adicionales
Esto abarca solo algunos aspectos destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 111.
- Novedades de las Herramientas para desarrolladores de Chrome (111)
- Bajas y eliminaciones de Chrome 111
- Actualizaciones de ChromeStatus.com para Chrome 111
- Lista de cambios del repositorio de código fuente de Chromium
- Calendario de lanzamientos de Chrome
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 y, apenas se lance Chrome 112, estaré aquí para contarte las novedades de Chrome.