Novità di Chrome 117

Adriana Jara

Tieni presente quanto segue:

Mi chiamo Adriana Jara. Vediamo quali sono le novità di Chrome 117 per gli sviluppatori.

Nuove funzionalità CSS per le animazioni di entrata e uscita.

Queste tre nuove funzionalità CSS completano il set per aggiungere facilmente animazioni di entrata e uscita, e si anima in modo uniforme da e verso gli elementi ignorabili del livello superiore, come finestre di dialogo e popover.

La prima funzionalità è transition-behavior. Per eseguire la transizione di proprietà discrete, come display, utilizza il valore allow-discrete per 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;
}

La regola @starting-style viene quindi utilizzata per animare gli effetti di ingresso da display: none e nel livello superiore. Utilizza @starting-style per applicare uno stile che il browser può cercare prima che l'elemento sia aperto nella pagina.

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

Infine, per eliminare popover o dialog dal livello superiore, aggiungi la proprietà overlay all'elenco delle transizioni. Includi l'overlay nella transizione o nell'animazione per animare l'overlay insieme al resto degli elementi e assicurati che rimanga nel livello superiore durante l'animazione. L'operazione risulterà molto più fluida.

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

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

Consulta le quattro nuove funzionalità CSS per animazioni di entrata e uscita fluide per maggiori dettagli su come utilizzare queste funzionalità per migliorare l'esperienza utente con il movimento.

Raggruppamento di array

Nella programmazione, il raggruppamento di array è un'operazione estremamente comune, vista più spesso quando si utilizza la clausola GROUP BY di SQL e la programmazione MapReduce (che è meglio considerata come map-group-reduce).

La possibilità di combinare i dati in gruppi consente agli sviluppatori di calcolare set di dati di ordine superiore. Ad esempio, l'età media di una coorte o i valori LCP giornalieri di una pagina web.

Il raggruppamento di array attiva questi scenari aggiungendo i metodi statici Object.groupBy e Map.groupBy.

groupBy chiama una funzione di callback fornita una volta per ogni elemento in un iterabile. La funzione di callback deve restituire una stringa o un simbolo che indica il gruppo dell'elemento associato.

Nell'esempio seguente, dalla documentazione MDN, è presente un array di prodotti con il metodo groupBy utilizzato per restituirli raggruppati per 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 }
  ]
}
*/

Per ulteriori dettagli, consulta la documentazione di groupBy.

Override locali semplificati in DevTools.

La funzionalità degli override locali è ora semplificata, in modo da poter simulare facilmente le intestazioni delle risposte e i contenuti web di risorse remote dal riquadro Rete senza accedervi.

Per eseguire l'override dei contenuti web, apri il riquadro Rete, fai clic con il tasto destro del mouse su una richiesta e seleziona Esegui l'override dei contenuti.

Le opzioni di override nel menu a discesa di una richiesta.

Se hai configurato degli override locali ma sono disattivati, DevTools li abilita. Se non li hai ancora configurati, DevTools ti chiede nella barra delle azioni in alto. Seleziona una cartella in cui archiviare gli override e consentire a DevTools di accedervi.

Seleziona una cartella e consenti l'accesso nella barra delle azioni in alto.

Una volta configurati gli override, DevTools ti rimanda a Origini > Override > Editor per consentirti di eseguire l'override dei contenuti web.

Tieni presente che le risorse sottoposte a override sono indicate con Salvato. nel riquadro Rete. Passa il mouse sopra l'icona per visualizzare gli elementi sostituiti.

Icona di override accanto a una richiesta nel riquadro Rete.

Scopri le novità di DevTools per tutti i dettagli e per saperne di più su DevTools in Chrome 117.

E tanto altro.

Naturalmente c'è molto altro.

Per approfondire

Vengono illustrati solo alcuni dei punti salienti. Consulta i link qui sotto per le modifiche aggiuntive in Chrome 117.

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al Canale YouTube per sviluppatori di Chrome, e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Ciao Adriana Jara, non appena verrà rilasciato Chrome 117 ti fornirò tutte le informazioni sulle novità di Chrome.