Tenga en cuenta lo siguiente:
- Tres nuevas funciones de CSS facilitan la tarea de agregar animaciones de entrada y salida fluidas.
- Calcula conjuntos de datos de orden superior con la agrupación mediante arreglos.
- Las Herramientas para desarrolladores facilitan las anulaciones locales.
- Además, hay mucho más.
Soy Adriana Jara. Veamos las novedades para desarrolladores en Chrome 117.
Nuevas funciones de CSS para animaciones de entrada y salida
Estas tres nuevas funciones de CSS completan el conjunto para agregar fácilmente animaciones de entrada y salida, y animar sin problemas hacia y desde los elementos descartables de la capa superior, como los diálogos y las ventanas emergentes.
El primer atributo es transition-behavior
. Para hacer la transición de propiedades discretas, como display
, usa el valor allow-discrete
para transition-behavior
.
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
Luego, se usa la regla @starting-style
para animar los efectos de entrada de display: none
y colocarlos en la capa superior. Usa @starting-style
para aplicar un estilo que el navegador pueda buscar antes de que el elemento se abra en la página.
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
Por último, para aplicar fundido de salida en una popover
o una dialog
de la capa superior, agrega la propiedad overlay
a tu lista de transiciones. Incluye la superposición en la transición o la animación para animar la superposición junto con el resto de las funciones y asegúrate de que permanezca en la capa superior durante la animación. Esto se verá mucho más fluido.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
Consulta Cuatro funciones nuevas de CSS para animaciones de entrada y salida fluidas a fin de obtener detalles sobre cómo usar estas funciones para mejorar la experiencia del usuario con el movimiento.
Agrupación de arrays
En programación, la agrupación de arrays es una operación extremadamente común, que se ve con mayor frecuencia cuando usamos la cláusula GROUP BY de SQL y la programación MapReduce (que es mejor considerada como map-group-reduce).
La capacidad de combinar datos en grupos permite a los desarrolladores calcular conjuntos de datos de orden superior. Por ejemplo, la edad promedio de una cohorte o valores de LCP diarios para una página web.
La agrupación de arrays habilita estas situaciones agregando los métodos estáticos Object.groupBy
y Map.groupBy
.
groupBy
llama a una función de devolución de llamada proporcionada una vez por cada elemento en un iterable. La función de devolución de llamada debe mostrar una cadena o un símbolo que indique el grupo del elemento asociado.
En el siguiente ejemplo, de la documentación de MDN, hay un array de productos con el método groupBy
que se usa para mostrarlos agrupados por su tipo.
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
Para obtener más detalles, consulta la documentación de groupBy
.
Se optimizaron las anulaciones locales en Herramientas para desarrolladores.
Ahora se optimizó la función de anulaciones locales, por lo que puedes simular con facilidad encabezados de respuesta y contenido web de recursos remotos desde el panel Red sin acceso a ellos.
Para anular el contenido web, abre el panel Red, haz clic con el botón derecho en una solicitud y selecciona Anular contenido.
Si tienes anulaciones locales configuradas, pero inhabilitadas, Herramientas para desarrolladores las habilitarán. Si todavía no los configuraste, Herramientas para desarrolladores te lo solicitará en la barra de acciones de la parte superior. Selecciona una carpeta para almacenar las anulaciones y permite que Herramientas para desarrolladores acceda a ella.
Una vez configuradas las anulaciones, Herramientas para desarrolladores te llevará a Fuentes > Anulaciones > Editor para que puedas anular contenido web.
Ten en cuenta que los recursos anulados se indican con en el panel Red. Coloca el cursor sobre el ícono para ver qué se anuló.
Consulte las novedades de Herramientas para desarrolladores para conocer todos los detalles y obtener más información sobre las Herramientas para desarrolladores en Chrome 117.
Y mucho más.
Por supuesto que hay mucho más.
El esperado valor de
subgrid
paragrid-template-columns
ygrid-template-rows
ya se implementó en Chrome.Hay una prueba de baja de
WebSQL
y una prueba para desarrolladores para la baja del eventounload
.La API de
notRestoredReasons
para bfcache, que se menciona en el video sobre Chrome 116, debería lanzarse en esta versión.
Lecturas adicionales
Esto abarca solo algunos aspectos destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 117.
- Novedades de las Herramientas para desarrolladores de Chrome (117)
- Bajas y eliminaciones de Chrome 117
- Actualizaciones de ChromeStatus.com para Chrome 117
- 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. En cuanto se lance Chrome 117, estaré aquí para contarte las novedades de Chrome.