Pacchetto di CSS: 2023!

Wrapped di CSS: 2023

Passa ai contenuti:

• Base di architettura
• Funzioni trigonometriche
• Selezione complessa dell'elemento n-esimo*
• Ambito
• Nidificazione

• Tipografia
• Initial-letter
• Saldo/testo a capo

• Colore
• Livello di colore 4
• Funzione di combinazione colori
• Sintassi relativa dei colori

• Responsive design
• Query container
• Query sugli stili
• Selettore:has
• Aggiorna query supporti
• Query sui contenuti multimediali basate su script
• Query sui media per la trasparenza

• Interazione
• Visualizzare le transizioni
• Funzione di transizione lineare
• Scrollend
• Animazioni basate sullo scorrimento
• Allegato con tempistiche differite
• Transizioni di proprietà discrete
• Regola di stile iniziale
• Animazione in overlay

• Componenti
• Popup
• Ora in selezione
• Pseudo classi valide/non valide per l'utente
• Accordion esclusivo

Wow! Il 2023 è stato un anno importante per CSS.

Da #Interop2023 a molti nuovi approdi nello spazio CSS e UI che abilitano funzionalità che gli sviluppatori ritenevano impossibili sulla piattaforma web. Ora, ogni browser moderno supporta le query dei contenitori, la griglia secondaria, il selettore :has() e una serie di nuovi spazi di colore e funzioni. In Chrome sono supportate le animazioni basate sullo scorrimento solo CSS e le animazioni fluide tra visualizzazioni web con le transizioni di visualizzazione. Per finire, sono stati introdotti molti nuovi elementi primitivi per migliorare le esperienze degli sviluppatori, come il nidificazione CSS e gli stili con ambito.

Che anno ci lasciamo alle spalle! Vogliamo quindi concludere questo anno importante celebrando e riconoscendo tutto il duro lavoro degli sviluppatori di browser e della community web che hanno reso tutto questo possibile.

Fai attenzione ai nuovi badge Base di riferimento accanto alle intestazioni delle funzionalità. Scopri di più qui.

• = appena disponibile in tutte le versioni stabili dei principali browser.

• = disponibilità parziale nei principali browser.

Fondamenti architettonici

Iniziamo dagli aggiornamenti al linguaggio e alle funzionalità principali dei CSS. Si tratta di funzionalità fondamentali per il modo in cui crei e organizzi gli stili e offrono grandi potenzialità allo sviluppatore.

Funzioni trigonometriche

Supporto dei browser

• 111
• 111
• 108
• 15,4

Origine

Chrome 111 ha aggiunto il supporto per le funzioni trigonometriche sin(), cos(), tan(), asin(), acos(), atan() e atan2(), rendendole disponibili in tutti i principali motori. Queste funzioni sono molto utili per l'animazione e il layout. Ad esempio, ora è molto più facile disporre gli elementi su un cerchio intorno a un centro scelto.

Demo delle funzioni trigonometriche

Scopri di più sulle funzioni trigonometriche in CSS.

Selezione n-* complessa

Supporto dei browser

• 111
• 111
• 113
• 9

Con il selettore di pseudo-classe :nth-child(), è possibile selezionare gli elementi nel DOM in base al relativo indice. Utilizzando la microsintassi An+B, puoi controllare con precisione gli elementi da selezionare.

Per impostazione predefinita, gli pseudo :nth-*() prendono in considerazione tutti gli elementi secondari. A partire da Chrome 111, puoi, facoltativamente, passare un elenco di selettori a :nth-child() e :nth-last-child(). In questo modo puoi filtrare in anticipo l'elenco dei bambini prima che An+B faccia il suo lavoro.

Nella seguente demo, la logica 3n+1 viene applicata solo alle bambole piccole escludendole in precedenza utilizzando of .small. Utilizza i menu a discesa per modificare dinamicamente il selettore utilizzato.

Demo di selezione complessa dell'elemento n-esimo*

Scopri di più sulle selezioni nth-* complesse.

Ambito

Supporto dei browser

• 118
• 118
• 
• 17,4

Origine

In Chrome 118 è stato aggiunto il supporto di @scope, una regola at che consente di limitare la corrispondenza del selettore a un sottoalbero specifico del documento. Con gli stili basati sugli ambiti, puoi specificare molto bene gli elementi da selezionare senza dover scrivere selettori eccessivamente specifici o accoppiarli strettamente alla struttura DOM.

Un sottoalbero basato su ambito è definito da un elemento radice basato su ambito (il limite superiore) e da un limite basato su ambito facoltativo (il limite inferiore).

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

Le regole di stile inserite all'interno di un blocco di ambito hanno come target solo gli elementi all'interno del sottoalbero estratto. Ad esempio, la seguente regola di stile basata sugli ambiti ha come target solo gli elementi <img> che si trovano tra l'elemento .card e qualsiasi componente nidificato corrispondente al selettore [data-component].

@scope (.card) to ([data-component]) {
  img { … }
}

Nella demo seguente, gli elementi <img> nel componente carosello non corrispondono a causa del limite di ambito applicato.

Screenshot della demo dell'ambito

Demo dal vivo Ambito

Demo CSS @scope

Scopri di più su @scope nell'articolo "Come utilizzare @scope per limitare la copertura dei selettori". In questo articolo scoprirai il selettore :scope, come viene gestita la specificità, gli ambiti senza preludio e in che modo la cascata è interessata da@scope.

Nidificazione

Supporto dei browser

• 120
• 120
• 117
• 17,2

Origine

Prima dell'annidamento, ogni selettore doveva essere dichiarato esplicitamente, separatamente dagli altri. Ciò comporta ripetizione, stili di massa e un'esperienza di creazione frammentata. Ora i selettori possono essere continuati con le regole di stile correlate raggruppate al loro interno.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

Nesting Screencast

Demo dal vivo con nidificazione

Modificare il selettore di nidificazione rilassata per decidere il vincitore della gara

La nidificazione può ridurre il peso di un foglio di stile, ridurre il sovraccarico dei selettori ripetuti e centralizzare gli stili dei componenti. La sintassi inizialmente rilasciata con una limitazione che richiedeva l'utilizzo di & in vari punti, ma da allora è stata rimossa con un aggiornamento della sintassi di nidificazione meno restrittiva.

Scopri di più sull'nidificazione.

Subgrid

Supporto dei browser

• 117
• 117
• 71
• 16

Origine

Il CSS subgrid ti consente di creare griglie più complesse con un migliore allineamento tra i layout secondari. Consente a una griglia che si trova all'interno di un'altra griglia di adottare le righe e le colonne della griglia esterna come proprie, utilizzando subgrid come valore per le righe o le colonne della griglia.

Registra schermo sottoscrittore

Demo dal vivo della sottogriglia

L'intestazione, il corpo e i piè di pagina si allineano alle dimensioni dinamiche degli elementi di pari livello.

La griglia secondaria è particolarmente utile per allineare elementi fratelli ai contenuti dinamici di ciascuno. In questo modo, copywriter, UX writer e traduttori non devono più tentare di creare testi del progetto che "si adattino" al layout. Con la griglia secondaria, il layout può essere regolato per adattarsi ai contenuti.

Scopri di più sulla griglia secondaria.

Tipografia

La tipografia web ha registrato alcuni aggiornamenti importanti nel 2023. Un miglioramento progressivo particolarmente interessante è la proprietà text-wrap. Questa proprietà consente la regolazione del layout tipografico, composta nel browser senza bisogno di script aggiuntivi. Di' addio alla complicata lunghezza delle linee e dai il benvenuto a elementi tipografici più prevedibili.

Initial-letter

Supporto dei browser

• 110
• 110
• x
• 9

Origine

All'inizio dell'anno in Chrome 110, la proprietà initial-letter è una piccola ma potente funzionalità CSS che imposta lo stile per il posizionamento delle lettere iniziali. Puoi posizionare le lettere nello stato scartato o in rilievo. La proprietà accetta due argomenti: il primo per quanto riguarda il posizionamento della lettera nel paragrafo corrispondente e il secondo per quanto riguarda l'importanza di elevare la lettera sopra di essa. Puoi anche combinare entrambe le opzioni, come nella demo seguente.

Screenshot lettera iniziale

Demo della lettera iniziale

Modifica i valori di initial-letter per l'elemento pseudo ::first-letter per osservarne lo spostamento.

Scopri di più sulla lettera iniziale.

text-wrap: bilanciato e gradevole

In qualità di sviluppatore, non conosci le dimensioni finali, le dimensioni dei caratteri o persino la lingua di un titolo o di un paragrafo. Tutte le variabili necessarie per un trattamento efficace ed estetico dell'a capo del testo si trovano nel browser. Poiché il browser conosce tutti i fattori, come le dimensioni dei caratteri, la lingua e l'area allocata, è un'ottima soluzione per gestire il layout di testo avanzato e di alta qualità.

È qui che entrano in gioco due nuove tecniche di a capo, una chiamata balance e l'altra pretty. Il valore balance mira a creare un blocco di testo armonioso, mentre pretty mira a evitare le righe isolate e a garantire una sillabazione corretta. Tradizionalmente, queste due attività sono state eseguite manualmente ed è fantastico poterle assegnare al browser e farle funzionare per qualsiasi lingua tradotta.

Screencast con testo a capo

Demo dal vivo del testo a capo

Nella demo seguente puoi confrontare trascinando il cursore e gli effetti di balance e pretty su un titolo e un paragrafo. Prova a tradurre la demo in un'altra lingua.

Scopri di più su text-wrap: balance.

Colore

Il 2023 è stato l'anno del colore per la piattaforma web. Grazie ai nuovi spazi di colore e alle funzioni che consentono di applicare temi di colori dinamici, non c'è nulla che ti impedisca di creare i temi vivaci e ricchi che i tuoi utenti meritano e di renderli anche personalizzabili.

Spazi di colore HD (livello di colore 4)

Supporto dei browser

• 111
• 111
• 113
• 15

Origine

Supporto dei browser

• 111
• 111
• 113
• 15

Origine

Dall'hardware al software, dal CSS alle luci lampeggianti, può essere molto impegnativo per i nostri computer cercare di rappresentare i colori con la stessa qualità che percepiscono i nostri occhi. Nel 2023 abbiamo nuovi colori, più colori, nuovi spazi colore, funzioni per i colori e nuove funzionalità.

Ora CSS e i colori possono: - verificare se l'hardware dello schermo dell'utente è in grado di supportare i colori HDR a gamma estesa. - Verifica se il browser dell'utente comprende la sintassi dei colori come Oklch o Display P3. - Specifica i colori HDR in Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ e altri ancora. - Creare gradienti con colori HDR, - Interpolare i gradienti in spazi colore alternativi. - Mescola i colori con color-mix(). - Crea varianti di colore con la sintassi dei colori relativa.

Screencast di Color 4

Demo di Color 4

Nella demo che segue puoi fare un confronto trascinando il cursore e gli effetti di "bilancia" e "pretty" su un titolo e un paragrafo. Prova a tradurre la demo in un'altra lingua.

Scopri di più su Colore 4 e spazi di colore.

funzione color-mix

Supporto dei browser

• 111
• 111
• 113
• 16,2

Origine

La miscelazione dei colori è un'attività classica e nel 2023 anche il CSS può farlo. Puoi non solo mescolare bianco o nero a un colore, ma anche la trasparenza e puoi farlo in qualsiasi spazio di colore a tua scelta. Si tratta contemporaneamente di una funzionalità di colore di base e avanzata.

Screencast di color-mix()

Demo color-mix()

La demo ti consente di scegliere due colori con un selettore, lo spazio colore e la quantità di ciascun colore che deve essere dominante nella combinazione.

Puoi considerare color-mix() come un momento nel tempo proveniente da una sfumatura. Mentre un gradiente mostra tutti i passaggi necessari per passare dal blu al bianco, color-mix() ne mostra solo uno. Le cose si avanzano quando inizi a prendere in considerazione gli spazi colore e impari quanto può essere diverso lo spazio colore combinato con i risultati.

Scopri di più su color-mix().

Sintassi relativa dei colori

La sintassi dei colori relativa (RCS) è un metodo complementare a color-mix() per la creazione di varianti di colore. È leggermente più potente di color-mix(), ma è anche una strategia diversa per lavorare con i colori. color-mix() può mescolare il colore bianco per schiarire un colore, mentre RCS offre accesso preciso al canale di luminosità e la possibilità di utilizzare calc() sul canale per ridurre o aumentare la luminosità in modo programmatico.

Registra schermo RCS

Demo dal vivo di RCS

Cambia il colore, cambia le scene. Ognuno di essi utilizza la sintassi relativa del colore per creare varianti del colore di base.

RCS consente di eseguire manipolazioni relative e assolute a un colore. Una variazione relativa si prende il valore corrente di saturazione o luminosità e lo modifichi con calc(). Una modifica assoluta sostituisce un valore del canale con uno completamente nuovo, ad esempio l'impostazione dell'opacità al 50%. Questa sintassi ti offre strumenti significativi per temi, varianti just in time e altro ancora.

Scopri di più sulla sintassi del colore relativa.

Responsive design

Il responsive design è stato perfezionato nel 2023. Questo anno rivoluzionario ha consentito di implementare nuove funzionalità che cambiano completamente il modo in cui creiamo esperienze web adattabili e ha inaugurato un nuovo modello di design responsive basato su componenti. La combinazione di query del contenitore e :has() supporta i componenti che possiedono uno stile logico e adattabile in base alle dimensioni del contenitore principale, nonché alla presenza o allo stato di eventuali elementi secondari. Ciò significa che puoi finalmente separare il layout a livello di pagina dal layout a livello di componente e scrivere una volta la logica per utilizzare il componente ovunque.

Query relative alle dimensioni dei contenitori

Supporto dei browser

• 105
• 105
• 110
• 16

Origine

Anziché utilizzare le informazioni sulle dimensioni globali del viewport per applicare gli stili CSS, le query del contenitore supportano la query di un elemento principale all'interno della pagina. Ciò significa che i componenti possono essere definiti in modo dinamico in più layout e in più viste. Le query dei contenitori per le dimensioni sono diventate stabili in tutti i browser moderni il giorno di San Valentino di quest'anno (14 febbraio).

Per utilizzare questa funzionalità, configura prima il contenimento per l'elemento su cui esegui la query e poi, come per una query multimediale, usa @container con i parametri di dimensione per applicare gli stili. Insieme alle query container, ottieni le dimensioni delle query container. Nella demo seguente, la dimensione della query del contenitore cqi (che rappresenta le dimensioni del contenitore in linea) viene utilizzata per impostare le dimensioni dell'intestazione della scheda.

@container Screencast

Demo @container

Scopri di più sull'utilizzo delle query sui contenitori.

Query dei contenitori di stile

Supporto dei browser

• 111
• 111
• x
• 18

Origine

Le query sugli stili sono state implementate parzialmente in Chrome 111. Al momento, con le query di stile, puoi eseguire query sul valore delle proprietà personalizzate su un elemento principale quando utilizzi @container style(). Ad esempio, esegui una query per verificare se esiste un valore della proprietà personalizzata o se è impostato su un determinato valore, ad esempio @container style(--rain: true).

Screenshot della query di stile

Demo query di stile

Cambia il colore, cambia le scene. Ognuno utilizza la sintassi dei colori relativi per creare varianti del colore di base.

Sembra simile all'utilizzo dei nomi delle classi in CSS, ma le query di stile hanno alcuni vantaggi. La prima è che, con le query di stile, è possibile aggiornare il valore in CSS secondo necessità per gli pseudostati. Inoltre, nelle versioni future dell'implementazione, potrai eseguire query su intervalli di valori per determinare lo stile applicato, ad esempio style(60 <= --weather <= 70), e lo stile in base a coppie proprietà-valore, ad esempio style(font-style: italic).

Scopri di più sull'utilizzo delle query di stile.

Selettore:has()

Supporto dei browser

• 105
• 105
• 121
• 15,4

Origine

Per quasi 20 anni gli sviluppatori hanno chiesto un "selettore principale" in CSS. Ora è possibile grazie al selettore :has() incluso in Chrome 105. Ad esempio, l'utilizzo di .card:has(img.hero) consente di selezionare gli elementi .card che hanno un'immagine hero come elemento secondario.

Screenshot demo :has()

Demo dal vivo :has()

Demo CSS :has(): scheda senza/con immagine

Poiché :has() accetta un elenco di selettori relativi come argomento, puoi selezionare molto più dell'elemento principale. Utilizzando vari combinatori CSS, è possibile non solo risalire la struttura ad albero DOM, ma anche effettuare selezioni laterali. Ad esempio, li:has(+ li:hover) seleziona l'elemento <li> che precede l'elemento <li> attualmente visualizzato.

:has() Registra schermo

Demo :has()

Demo di CSS :has(): Dock

Scopri di più sul selettore :has() CSS.

Aggiornare la query sui contenuti multimediali

Supporto dei browser

• 113
• 113
• 102
• 17

Origine

La query media update ti consente di adattare l'interfaccia utente alla frequenza di aggiornamento di un dispositivo. La funzionalità può restituire un valore fast, slow o none che si riferisce alle funzionalità di diversi dispositivi.

La maggior parte dei dispositivi per cui progetti hanno una frequenza di aggiornamento elevata. Sono inclusi i computer e la maggior parte dei dispositivi mobili. I lettori di ebook e dispositivi come i sistemi di pagamento a bassa potenza potrebbero avere una frequenza di aggiornamento lenta. Sapere che il dispositivo non può gestire animazioni o aggiornamenti frequenti significa che puoi risparmiare sull'utilizzo della batteria o sugli aggiornamenti delle visualizzazioni errati.

Aggiorna Registra schermo

Aggiornamento demo

Simula (scegliendo un'opzione di opzione) un valore di velocità di aggiornamento e osserva come influisce sulla anatra.

Scopri di più su @media (aggiornamento).

Query sui contenuti multimediali basate su script

Supporto dei browser

• 120
• 120
• 113
• 17

Origine

La media query di scripting può essere utilizzata per verificare se JavaScript è disponibile o meno. È molto utile per il miglioramento progressivo. Prima di questa query supporti, una strategia per rilevare se JavaScript era disponibile consisteva nel posizionare una classe nojs nell'HTML e rimuoverla con JavaScript. Questi script possono essere rimossi poiché ora CSS ha un modo per rilevare JavaScript e apportare le modifiche necessarie.

Scopri come attivare e disattivare JavaScript in una pagina per i test tramite Chrome DevTools qui.

Creazione dello screencast per la creazione di script

Demo di scripting

Prendiamo in considerazione il passaggio da un tema a un altro su un sito web. La query sui media basata su script può essere utile per fare in modo che il passaggio funzioni in base alle preferenze di sistema, poiché non è disponibile JavaScript. In alternativa, prendi in considerazione un componente di opzione: se JavaScript è disponibile, l'opzione può essere selezionata con un gesto anziché semplicemente attivata e disattivata. Molte opportunità per eseguire l'upgrade dell'esperienza utente se lo scripting è disponibile, offrendo al contempo un'esperienza di base significativa se lo scripting è disattivato.

Scopri di più sullo script.

Query sui media con trasparenza ridotta

Supporto dei browser

• 118
• 118
• 
• x

Origine

Le interfacce non opache possono causare mal di testa o ostacolare visivamente i vari tipi di deficit della vista. Questo è il motivo per cui Windows, macOS e iOS hanno preferenze di sistema che possono ridurre o rimuovere la trasparenza dall'interfaccia utente. Questa query multimediale per prefers-reduced-transparency si adatta bene alle altre query multimediali preferite, che ti consentono di dare libero sfogo alla tua creatività e di adeguarti agli utenti.

Screencast con trasparenza ridotta

Demo della trasparenza ridotta

In alcuni casi, puoi fornire un layout alternativo in cui i contenuti non si sovrappongono. In altri casi, l'opacità di un colore può essere regolata in modo da essere opaca o quasi opaca. Il seguente post del blog contiene altre dimostrazioni stimolanti che si adattano alle preferenze degli utenti. Dai un'occhiata se vuoi scoprire in quali momenti questa query sui media è utile.

Scopri di più su @media (prefers-reduced-transparency).

Interazione

L'interazione è un elemento fondamentale delle esperienze digitali. Consente agli utenti di ricevere feedback sugli elementi su cui hanno fatto clic e sulla posizione in cui si trovano in uno spazio virtuale. Quest'anno sono state introdotte molte funzionalità entusiasmanti che hanno reso le interazioni più facili da scrivere e implementare, consentendo un percorso fluido dell'utente e un'esperienza web più ottimizzata.

Visualizza transizioni

Supporto dei browser

• 111
• 111
• x
• 18

Origine

Le transizioni di tipo visualizzazione hanno un enorme impatto sull'esperienza utente di una pagina. Con l'API View Transitions, puoi creare transizioni visive tra due stati della pagina della tua applicazione a pagina singola. Queste transizioni possono essere transizioni di pagine intere o elementi più piccoli in una pagina, ad esempio l'aggiunta o la rimozione di un nuovo elemento da un elenco.

Al centro dell'API View Transitions c'è la funzione document.startViewTranstion. Passa una funzione che aggiorna il DOM al nuovo stato e l'API si occupa di tutto al posto tuo. A questo scopo, acquisisce un'istantanea "prima e dopo" e poi passa da una all'altra. Con CSS puoi controllare cosa viene acquisito e, facoltativamente, personalizzare il modo in cui questi snapshot devono essere animati.

Screencast VT

Demo VT

Guarda la demo di Transizioni

L'API View Transiziones per applicazioni a pagina singola disponibile in Chrome 111. Scopri di più sulle Transizioni di visualizzazione.

Funzione di transizione lineare

Supporto dei browser

• 113
• 113
• 112
• 17.2

Non lasciarti ingannare dal nome di questa funzione. La funzione linear() (da non confondere con la parola chiave linear) consente di creare in modo semplice funzioni di easing complesse, con il rischio di perdere una certa precisione.

Prima di linear(), incluso in Chrome 113, era impossibile creare effetti di rimbalzo o elasticità in CSS. Grazie a linear()è possibile approssimare queste animazioni semplificandole in una serie di punti, quindi eseguendo un'interpolazione lineare tra questi punti.

La curva di abbandono originale in blu è semplificata da un insieme di punti chiave mostrati in verde. La funzione linear() utilizza questi punti e li interpola in modo lineare.

Registra schermo con easing lineare

Demo di transizione lineare

Demo linear() CSS.

Scopri di più su linear(). Per creare curve linear(), utilizza il generatore di curve di transizione lineari.

Fine scorrimento

Supporto dei browser

• 114
• 114
• 109
• x

Origine

Molte interfacce includono interazioni di scorrimento e, a volte, l'interfaccia deve sincronizzare le informazioni pertinenti alla posizione di scorrimento corrente o recuperare i dati in base allo stato corrente. Prima dell'evento scrollend, dovevi utilizzare un metodo di timeout impreciso che poteva attivarsi mentre il dito dell'utente era ancora sullo schermo. Con l'evento scrollend, hai un evento scrollend perfettamente sincronizzato che comprende se un utente è ancora in mezzo a un gesto o meno.

Screencast con scorrimento

Demo scorrimento fine

Questo era importante per il browser perché JavaScript non può monitorare la presenza di un dito sullo schermo durante lo scorrimento, le informazioni non sono semplicemente disponibili. I blocchi di codice non accurato del tentativo di fine dello scorrimento ora possono essere eliminati e sostituiti con un evento ad alta precisione di proprietà del browser.

Scopri di più su scrollend.

Animazioni basate sullo scorrimento

Supporto dei browser

• 115
• 115
• 
• x

Origine

Le animazioni basate sullo scorrimento sono una funzionalità interessante disponibile in Chrome 115. Ti consentono di prendere un'animazione CSS esistente o un'animazione creata con l'API Web Animations e accoppiarla all'offset di scorrimento di uno scroller. Mentre scorri verso l'alto e verso il basso oppure verso sinistra e verso destra con uno scorrimento orizzontale, l'animazione collegata eseguirà lo scrubbing avanti e indietro nella risposta diretta.

Con un elemento ScrollTimeline puoi monitorare l'avanzamento complessivo di uno scorrevole, come mostrato nella seguente demo. Quando scorri fino alla fine della pagina, il testo viene visualizzato carattere per carattere.

Registra schermo SDA

Demo SDA

Demo di animazioni basate sullo scorrimento CSS: sequenza temporale dello scorrimento

Con un oggetto ViewTimeline puoi monitorare un elemento mentre attraversa l'area di scorrimento. Funziona in modo simile al modo in cui IntersectionObserver monitora un elemento. Nella demo seguente, ogni immagine viene visualizzata dal momento in cui entra nell'area di scorrimento fino a quando non è al centro.

Registrazione dello schermo della demo SDA

Demo dal vivo SDA

Demo di animazioni basate sullo scorrimento CSS: visualizzazione della sequenza temporale

Poiché le animazioni basate sullo scorrimento funzionano con le animazioni CSS e con l'API Web Animations, puoi trarre vantaggio da tutti i vantaggi offerti da queste API. Ciò include la possibilità di far funzionare queste animazioni dal thread principale. Ora puoi avere animazioni fluide, basate sullo scorrimento, che vengono eseguite nel thread principale con solo poche righe di codice aggiuntivo. Che cosa c'è di meglio?

Per scoprire di più sulle animazioni basate sullo scorrimento, consulta questo articolo con tutti i dettagli o visita la pagina scroll-driven-animations.style, che include molte demo.

Allegato con tempistiche differite

Supporto dei browser

• 116
• 116
• x
• x

Origine

Quando viene applicata un'animazione basata sullo scorrimento tramite CSS, il meccanismo di ricerca per trovare lo scorrevole di controllo risale sempre nella struttura ad albero DOM, limitandola solo agli antenati dello scorrevole. Molto spesso, però, l'elemento che deve essere animato non è un elemento secondario dello scorrevole, ma un elemento situato in un sottoalbero completamente diverso.

Per consentire all'elemento animato di trovare una sequenza temporale di scorrimento denominata di un elemento non principale, utilizza la proprietà timeline-scope su un elemento principale condiviso. In questo modo è possibile associare l'elemento scroll-timeline o view-timeline definito con questo nome, ampliando così l'ambito. Con questa opzione attiva, qualsiasi account secondario del publisher principale condiviso può utilizzare la sequenza temporale con quel nome.

Con timeline-scope dichiarato nell'elemento principale condiviso, scroll-timeline dichiarato nello scorrevole può essere trovato dall'elemento che lo utilizza come animation-timeline

Registra schermo demo

Demo live

Demo di animazioni basate sullo scorrimento CSS: allegato della sequenza temporale differita

Scopri di più su timeline-scope.

Animazioni delle proprietà discrete

Un'altra nuova funzionalità del 2023 è la possibilità di animare animazioni distinte, ad esempio da e verso display: none. A partire da Chrome 116, puoi utilizzare display e content-visibility nelle regole delle keyframe. Puoi anche eseguire la transizione di qualsiasi proprietà discreta al punto 50% anziché al punto 0%. Questo risultato si ottiene con la proprietà transition-behavior utilizzando la parola chiave allow-discrete o nella proprietà transition come forma abbreviata.

Animazione discreta Screencast

Animazione discreta Demo

Scopri di più sulla transizione di animazioni distinte.

@starting-style

Supporto dei browser

• 117
• 117
• 129
• 17,5

Origine

La regola CSS @starting-style si basa su nuove funzionalità web per l'animazione da e verso display: none. Questa regola consente di assegnare a un elemento uno stile "prima dell'apertura" che il browser può cercare prima dell'apertura dell'elemento nella pagina. Questo è molto utile per le animazioni di entrata e per animare elementi come un popup o una finestra di dialogo. Può essere utile anche quando crei un elemento e vuoi dargli la possibilità di animarsi. Prendi ad esempio il seguente codice che anima un attributo popover (vedi la sezione successiva) all'interno della visualizzazione e nel livello superiore senza interruzioni dall'esterno dell'area visibile.

@starting-style Screencast

Demo di @starting-style

Scopri di più su @starting-style e su altre animazioni di entrata.

Overlay

Supporto dei browser

• 117
• 117
• x
• x

Origine

La nuova proprietà CSS overlay può essere aggiunta alla transizione per consentire agli elementi con stili di primo livello, come popover e dialog, di uscire dal primo livello in modo fluido. Se non esegui la transizione dell'overlay, l'elemento tornerà immediatamente a essere ritagliato, trasformato e coperto, senza che la transizione avvenga. Analogamente, overlay consente a ::backdrop di eseguire l'animazione in uscita in modo fluido quando viene aggiunto a un elemento di primo livello.

Screencast in overlay

Demo dal vivo overlay

Scopri di più sull'overlay e su altre animazioni di chiusura.

Componenti

Il 2023 è stato un anno importante per l'intersezione tra stile e componenti HTML, con l'arrivo di popover e un sacco di lavoro sul posizionamento delle ancore e sul futuro dello stile dei menu a discesa. Questi componenti semplificano la creazione di pattern di UI comuni senza dover fare affidamento su librerie aggiuntive o creare ogni volta i tuoi sistemi di gestione dello stato da zero.

Popolarità

Supporto dei browser

• 114
• 114
• 125
• 17

Origine

L'API Popover ti aiuta a creare elementi che si sovrappongono al resto della pagina. ad esempio menu, selezione e descrizioni comando. Puoi creare un semplice popup aggiungendo l'attributo popover e un id all'elemento che viene visualizzato e collegando l'attributo id a un pulsante di attivazione utilizzando popovertarget="my-popover". L'API Popover supporta:

• Promozione al livello superiore. I popup vengono visualizzati in un livello separato sopra il resto della pagina, quindi non devi modificare l'indice z.
• Funzionalità di chiusura rapida. Se fai clic all'esterno dell'area del popup, il popup si chiuderà e il focus tornerà al campo precedente.
• Gestione dell'attenzione predefinita. Se apri il popover, la scheda successiva si ferma all'interno del popover.
• Scorciatoie da tastiera accessibili. Se premi il tasto esc o attivi/disattivi due volte, il popover si chiuderà e ripristinerà lo stato attivo.
• Associazioni di componenti accessibili. Collegamento semantico di un elemento popup a un trigger popup.

Registra schermo popover

Demo dal vivo del popup

Righelli orizzontali in un selettore

Un'altra piccola modifica all'HTML introdotta quest'anno in Chrome e Safari è la possibilità di aggiungere elementi di linea orizzontale (tag <hr>) agli elementi <select> per suddividere visivamente i contenuti. In precedenza, l'inserimento di un tag <hr> in un selettore non veniva visualizzato. Tuttavia, quest'anno sia Safari che Chrome supportano questa funzionalità, consentendo una migliore separazione dei contenuti all'interno degli elementi <select>.

Seleziona screenshot

Seleziona Demo dal vivo

Scopri di più sull'utilizzo di hr in select

Pseudoclassi :user-valid e :user-invalid

Supporto dei browser

• 119
• 119
• 88
• 16,5

Origine

Quest'anno, stabili in tutti i browser, :user-valid e :user-invalid si comportano in modo simile alle pseudoclassi :valid e :invalid, ma corrispondono a un controllo del modulo solo dopo che un utente ha interagito in modo significativo con l'input. Un controllo modulo obbligatorio e vuoto corrisponderà a :invalid anche se un utente non ha iniziato a interagire con la pagina. Lo stesso controllo non corrisponderà a :user-invalid finché l'utente non avrà modificato l'input e non lo avrà lasciato in uno stato non valido.

Con questi nuovi selettori, non è più necessario scrivere codice stateful per tenere traccia dell'input modificato da un utente.

:user-* Screencast

Demo dal vivo :user-*

Scopri di più sull'utilizzo degli pseudoelementi di convalida del modulo user-*.

Fisarmonica esclusiva

Supporto dei browser

• 120
• 120
• 130
• 17.2

Un pattern di UI comune sul web è un componente a scomparsa. Per implementare questo pattern, combina alcuni elementi <details>, spesso raggruppandoli visivamente per indicare che appartengono.

La novità di Chrome 120 è il supporto dell'attributo name per gli elementi <details>. Quando viene utilizzato questo attributo, più elementi <details> con lo stesso valore name formano un gruppo semantico. È possibile aprire al massimo un elemento del gruppo alla volta: quando apri uno degli elementi <details> del gruppo, quello aperto in precedenza si chiude automaticamente. Questo tipo di accordion è chiamato accordion esclusivo.

Demo esclusiva dell'elenco a scomparsa

Gli elementi <details> che fanno parte di una scheda a scomparsa esclusiva non devono necessariamente essere fratelli. Possono essere sparsi nel documento.

Conclusione

Il CSS ha avuto una tale rinascita negli ultimi anni, in particolare nel corso del 2023. Se sei alle prime armi con CSS o vuoi solo un ripasso delle nozioni di base, dai un'occhiata al nostro corso senza costi Learn CSS insieme agli altri corsi senza costi disponibili su web.dev.

Ti auguriamo buone feste e ci auguriamo che tu abbia presto la possibilità di integrare alcune di queste nuove funzionalità CSS e UI nel tuo lavoro.

⇾ Il team di DevRel dell'interfaccia utente di Chrome,

Una Kravets

Bramus

Adam Argyle