Tieni presente quanto segue:
- Tre nuove funzionalità CSS semplificano l'aggiunta di animazioni di entrata e uscita fluide.
- Calcola set di dati di ordine superiore con il raggruppamento di array.
- DevTools semplifica gli override locali.
- E ce ne sono molti altri.
Sono Adriana Jara. Analizziamo le novità di Chrome 117 per gli sviluppatori.
Nuove funzionalità CSS per le animazioni di ingresso e uscita.
Queste tre nuove funzionalità CSS completano il set per aggiungere facilmente animazioni di ingresso e uscita e animarsi facilmente da e verso gli elementi ignorabili del livello superiore come finestre di dialogo e popover.
La prima funzionalità è transition-behavior
. Per eseguire la transizione delle 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;
}
Successivamente, viene utilizzata la regola @starting-style
per animare gli effetti delle voci da display: none
e nel livello superiore. Usa @starting-style
per applicare uno stile che il browser possa cercare prima che l'elemento venga 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 far uscire una dissolvenza popover
o dialog
dal livello superiore, aggiungi la proprietà overlay
al tuo elenco di transizioni. Includi l'overlay nella transizione o nell'animazione per animare l'overlay insieme al resto delle funzionalità e assicurati che rimanga nel livello superiore durante l'animazione. L'operazione sarà molto più fluida.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
Consulta Quattro nuove funzionalità CSS per animazioni di ingresso e uscita fluide per i dettagli su come utilizzarle per migliorare l'esperienza utente con il movimento.
Raggruppamento di array
Nella programmazione, il raggruppamento di array è un'operazione estremamente comune, osservata più spesso quando utilizziamo la clausola GROUP BY di SQL e la programmazione MapReduce (meglio come map-group-riduzione).
La possibilità di combinare i dati in gruppi consente agli sviluppatori di calcolare set di dati di ordine più elevato. Ad esempio, l'età media di una coorte o i valori LCP giornalieri di una pagina web.
Il raggruppamento di array consente questi scenari aggiungendo i metodi statici Object.groupBy
e Map.groupBy
.
groupBy
chiama una funzione di callback fornita una volta per ogni elemento in una funzione 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 saperne di più, consulta la documentazione di groupBy
.
Override locali semplificati in DevTools.
La funzionalità di override locali ora è semplificata, in modo da poter simulare facilmente le intestazioni delle risposte e i contenuti web delle 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.
Se hai configurato override locali, ma sono disattivati, DevTools consente di attivarli. Se non l'hai ancora configurato, DevTools ti chiede nella barra delle azioni in alto. Seleziona una cartella in cui archiviare gli override e consentire a DevTools di accedervi.
Una volta configurati gli override, DevTools ti porta a Origini > Sostituzioni > Editor per consentirti di eseguire l'override dei contenuti web.
Tieni presente che le risorse sottoposte a override sono indicate con nel riquadro Rete. Passa il mouse sopra l'icona per visualizzare gli elementi sostituiti.
Scopri le novità di DevTools per tutti i dettagli e maggiori informazioni su DevTools in Chrome 117.
E tanto altro.
Ovviamente c'è molto altro.
Il valore
subgrid
tanto atteso pergrid-template-columns
egrid-template-rows
è ora implementato in Chrome.Sono disponibili una prova relativa al ritiro di
WebSQL
e una per gli sviluppatori per il ritiro degli eventiunload
.L'API
notRestoredReasons
per bfcache, menzionata nel video per Chrome 116, dovrebbe essere avviata in questa versione.
Per approfondire
Vengono trattati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 117.
- Novità di Chrome DevTools (117)
- Deprecazioni e rimozioni di Chrome 117
- Aggiornamenti di ChromeStatus.com per Chrome 117
- Elenco delle modifiche al repository di codice sorgente di Chromium
- Calendario delle release di Chrome
Abbonati
Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.
Adriana Jara e non appena uscirà Chrome 117, sarò qui per farti conoscere le novità di Chrome.