Novedades de Chrome 117

Adriana Jara

Tenga en cuenta lo siguiente:

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 diálogos y elementos emergentes.

La primera función es transition-behavior. Para realizar 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 desde display: none y hacia la capa superior. Usa @starting-style para aplicar un estilo que el navegador pueda buscar antes de que se abra el elemento en la página.

/*  0. 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;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  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 atenuar un popover o un dialog de la capa superior, agrega la propiedad overlay a tu lista de transiciones. Incluye la capa superpuesta en la transición o la animación para animarla junto con el resto de los elementos y asegúrate de que permanezca en la capa superior cuando se anime. 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 nuevas funciones de CSS para animaciones de entrada y salida fluidas para obtener detalles sobre cómo usar estas funciones para mejorar la experiencia del usuario con movimiento.

Agrupación de matrices

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 de MapReduce (que se considera mejor 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 los valores del LCP diarios de una página web.

El agrupamiento 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 para cada elemento de un iterable. La función de devolución de llamada debe devolver 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 devolverlos 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.

La función invalidaciones locales ahora es más eficiente, por lo que puedes simular fácilmente los encabezados de respuesta y el contenido web de los recursos remotos desde el panel Red sin tener acceso a ellos.

Para anular el contenido web, abre el panel Network, haz clic con el botón derecho en una solicitud y selecciona Anular contenido.

Las opciones de anulación en el menú desplegable de una solicitud.

Si tienes anulaciones locales configuradas, pero inhabilitadas, las Herramientas para desarrolladores las habilitarán. Si aún no los configuraste, DevTools te lo indicará en la barra de acciones de la parte superior. Selecciona una carpeta para almacenar las anulaciones y permite que DevTools acceda a ella.

Selecciona una carpeta y permite el acceso a ella en la barra de acciones que se encuentra en la parte superior.

Una vez que se configuran las anulaciones, las Herramientas para desarrolladores te llevan a Fuentes > Anulaciones > Editor para que anules el contenido web.

Ten en cuenta que los recursos anulados se indican con Se guardó la configuración. en el panel Network. Coloca el cursor sobre el ícono para ver qué se anuló.

Un ícono de anulación junto a una solicitud en el panel de red

Consulta las novedades de DevTools para obtener todos los detalles y más información sobre DevTools en Chrome 117.

Y mucho más

Por supuesto, hay mucho más.

Lecturas adicionales

Esto solo abarca algunos aspectos destacados clave. Consulta los vínculos a continuación para ver otros cambios en Chrome 117.

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 117, estaré aquí para contarte las novedades de Chrome.