Tenga en cuenta lo siguiente:
- Crea transiciones pulidas en tu app de una sola página con la API de View Transitions.
- Lleva los colores al siguiente nivel con la compatibilidad con el nivel 4 de colores CSS.
- Descubre nuevas herramientas en el panel de diseño para aprovechar al máximo la nueva funcionalidad de colores.
- Y hay mucho más.
Soy Adriana Jara. Veamos las novedades para desarrolladores en Chrome 111.
API de View Transitions.
Crear transiciones fluidas en la Web es una tarea compleja. La API de View Transitions está aquí para simplificar la creación de transiciones pulidas a través de instantáneas de vistas y permitir que el DOM cambie sin ninguna superposición entre estados.
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 complete, se llamará al callback que se pasó 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 lanzó 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.
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.
Las herramientas para desarrolladores tienen nuevas funciones para admitir la especificación de nivel 4 de colores de CSS.
El panel Estilos ahora admite los 12 espacios de color y las 7 gamas nuevas que se describen en la especificación. Estos son ejemplos de definiciones de colores de CSS con color(), lch(), oklab() y color-mix().
Cuando usas color-mix(), que permite mezclar un porcentaje de un color en otro, puedes ver el resultado de color final 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.
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 de colores y otras funciones nuevas en las herramientas para desarrolladores.
Y mucho más.
Por supuesto, hay mucho más.
- CSS agregó funciones trigonométricas, unidades de fuente raíz adicionales y extendió el pseudoselector n-ésimo secundario.
- La API de Document Picture in Picture está en prueba original
- Las acciones
previousslideynextslideahora forman parte de la API de Media Session. Consulta la demostración aquí.
Lecturas adicionales
Esto solo abarca algunos aspectos clave. Consulta los vínculos que aparecen a continuación para ver cambios adicionales en Chrome 111.
- Novedades de las Herramientas para desarrolladores de Chrome (111)
- Deprecateds 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 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.