Nuevo en Chrome 117

Esto es lo que necesitas saber:

• Tres nuevas funciones CSS facilitan la creación de animaciones fluidas de entrada y salida. *Calcule conjuntos de datos de orden superior con [agrupación de matrices] (#array-grouping). *DevTools facilita las alternativas locales.
• Y hay mucho más.

Yo soy Adriana Jara. Profundicemos y veamos las novedades para los desarrolladores en Chrome 117.

# Nuevas funciones de CSS para animaciones de entrada y salida.

Estas tres nuevas características de CSS completan el conjunto para agregar fácilmente animaciones de entrada y salida. Y animar de manera fluida desde y hacia la capa superior elementos descartables, como <dialog> y <popover>

La primera característica es "transition-behavior". Para transicionar propiedades discretas , como display ,utilice 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, la regla @starting-style se usa para animar los efectos de entrada desde display: none y hasta la capa superior. Utilice @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);
}

Finalmente, para desvanecer un <popover> o un <dialog> de la capa superior, agregue la propiedad overlay a su lista de transiciones. Incluya overlay en la transición o animación para animar la superposición junto con el resto de las funciones y asegúrese de que permanezca en la capa superior al animar. Esto se verá mucho más suave.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

Consulte Cuatro nuevas funciones CSS para animaciones de entrada y salida fluidas para obtener detalles sobre cómo utilizar estas funciones para mejorar su experiencia de usuario con movimiento.

# Array grouping

En programación, la agrupación de matrices es una operación extremadamente común, la vemos con mayor frecuencia cuando usamos la cláusula GROUP BY de SQL y la programación 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 valores LCP diarios para una página web.

La agrupación de matrices permite estos escenarios agregando los métodos estáticos Object.groupBy y Map.groupBy.

groupBy llama una función de devolución de llamada proporcionada una vez para cada elemento en un iterable. La función de devolución de llamada debe devolver una cadena o símbolo que indique el grupo del elemento asociado.

En el siguienteejemplo, de la documentación de MDN, hay una gama de productos con el grupoPor método utilizadoregresar ellos agrupados por su tipo.

const inventario = [
  { nombre: "espárragos", tipo: "verduras", cantidad: 5 },
  { nombre: "plátanos", tipo: "fruta", cantidad: 0 },
  { nombre: "cabra", tipo: "carne", cantidad: 23 },
  { nombre: "cerezas", tipo: "fruta", cantidad: 5 },
  { nombre: "pescado", tipo: "carne", cantidad: 22 },
];

const result = Object.groupBy(inventario, ({ tipo }) => tipo);

/* El resultado es:
{
  verduras: [
    { nombre: 'espárragos', tipo: 'verduras', cantidad: 5 },
  ],
  fruta: [
    { nombre: "plátanos", tipo: "fruta", cantidad: 0 },
    { nombre: "cerezas", tipo: "fruta", cantidad: 5 }
  ],
  carne: [
    { nombre: "cabra", tipo: "carne", cantidad: 23 },
    { nombre: "pescado", tipo: "carne", cantidad: 22 }
  ]
}
*/

Para obtener más detalles, consulte la [documentación groupBy] (https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy).

# Cambios locales optimizadas en DevTools.

La función cambios locales ahora está optimizada, por lo que puede simular fácilmente encabezados de respuesta y contenido web de recursos remotos desde el panel Red sin acceso a ellos.

Para anular el contenido web, abra el panel Red, haga clic con el botón derecho en una solicitud y seleccione Anular contenido.

Si tiene cambios locales configuradas pero deshabilitadas, DevTools las habilita. Si aún no los ha configurado, DevTools se lo indica en la barra de acciones en la parte superior. Seleccione una carpeta para almacenar los cambios y permita que DevTools acceda a ella.

Una vez configuradas las anulaciones, DevTools lo lleva a Fuentes > Anulaciones > Editor para permitirle anular contenido web .

Tenga en cuenta que los recursos alternativos se indican con en el panel de Red. Pase el cursor sobre el ícono para ver qué se anula.

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

# ¡Y más!

Por supuesto que hay mucho más.

• El tan esperado valor subgrid para grid-template-columns y grid-template-rows ya está implementado en Chrome.

• Hay una deprecation trial WebSQL y una prueba de desarrollador para el deprecation del evento unload.

• La API notRestoredReasons para bfcache, mencionado en el vídeo para Chrome 116, debería lanzarse en esta versión.

# Otras lecturas

Esto cubre sólo algunos aspectos destacados clave. Consulte los enlaces a continuación para cambios adicionales en Chrome 117.

• Novedades de Chrome DevTools (117)
• Desuso y eliminaciones de Chrome 117
• Actualizaciones de ChromeStatus.com para Chrome 117
• Lista de cambios del repositorio fuente de Chromium
• Calendario de lanzamientos 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 vídeo.

Yo soy Adriana Jara, y tan pronto como se lance Chrome 117, estaré aquí para contarles que hay de nuevo en Chrome.