Funzioni trigonometriche

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.

Scopri di più sulle funzioni trigonometriche in CSS.

Selezione complessa n-esima

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

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

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

Scopri di più sulle selezioni complesse nth-*.

Ambito

Chrome 118 ha aggiunto il supporto di @scope, una regola at che consente di limitare la corrispondenza del selettore a un sottoalbero specifico del documento. Con lo stile con ambito, puoi essere molto specifico sugli elementi che selezioni senza dover scrivere selettori eccessivamente specifici o accoppiarli strettamente alla struttura DOM.

Un sottoalbero con ambito è definito da una radice di definizione dell'ambito (il limite superiore) e da un limite di definizione dell'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 dell'albero secondario estratto. Ad esempio, la seguente regola di stile con ambito specifico 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 seguente demo, gli elementi <img> nel componente carosello non vengono abbinati a causa del limite di ambito applicato.

Screenshot della demo dell'ambito

Demo live di Scope

Scopri di più su @scope nell'articolo "Come utilizzare @scope per limitare la copertura dei selettori". In questo articolo scoprirai di più sul selettore :scope, su come viene gestita la specificità, sugli ambiti senza preludio e su come la cascata viene influenzata da@scope.

Nesting

Prima dell'annidamento, ogni selettore doveva essere dichiarato in modo esplicito, separatamente dagli altri. Ciò comporta ripetizioni, fogli di stile collettivi e un'esperienza di creazione dispersiva. 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 */
}

L'annidamento può ridurre il peso di un foglio di stile, l'overhead dei selettori ripetuti e centralizzare gli stili dei componenti. La sintassi inizialmente rilasciata con una limitazione che richiedeva l'utilizzo di & in varie posizioni è stata poi eliminata con un aggiornamento della sintassi di nidificazione rilassata.

Scopri di più sull'annidamento.

Subgrid

CSS subgrid ti consente di creare griglie più complesse con un migliore allineamento tra i layout secondari. Consente a una griglia 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.

La sottogriglia è particolarmente utile per allineare gli elementi secondari ai contenuti dinamici degli altri elementi secondari. In questo modo, i copywriter, gli UX writer e i traduttori non devono più tentare di creare testi per i progetti che "si adattino" al layout. Con la sottogriglia, il layout può essere modificato in base ai contenuti.

Scopri di più sulla sottogriglia.

Initial-letter

Disponibile all'inizio dell'anno in Chrome 110, la proprietà initial-letter è una funzionalità CSS piccola ma potente che imposta lo stile per il posizionamento delle lettere iniziali. Puoi posizionare le lettere in stato abbassato o rialzato. La proprietà accetta due argomenti: il primo indica la profondità con cui inserire la lettera nel paragrafo corrispondente, mentre il secondo indica di quanto sollevare la lettera sopra il paragrafo. Puoi anche utilizzare una combinazione di entrambi, come nella seguente demo.

Screenshot della lettera iniziale

Demo della lettera iniziale

Scopri di più su initial-letter.

text-wrap: balance and pretty

In qualità di sviluppatore, non conosci le dimensioni finali, le dimensioni del carattere o persino la lingua di un titolo o di un paragrafo. Tutte le variabili necessarie per un trattamento efficace ed estetico del ritorno a capo del testo si trovano nel browser. Poiché il browser conosce tutti i fattori, come le dimensioni del carattere, la lingua e l'area allocata, è un ottimo candidato per la gestione di layout di testo avanzati e di alta qualità.

È qui che entrano in gioco due nuove tecniche di disposizione del testo, una chiamata balance e l'altra pretty. Il valore balance mira a creare un blocco di testo armonioso, mentre pretty mira a evitare le orfane e garantire una sillabazione corretta. Entrambe queste attività sono sempre state svolte manualmente ed è fantastico affidarle al browser e farle funzionare per qualsiasi lingua tradotta.

Scopri di più su text-wrap: balance.

Spazi colore HD (livello di colore 4)

Dall'hardware al software, dal CSS alle luci lampeggianti, i nostri computer devono lavorare molto per cercare di rappresentare i colori in modo fedele a come li vedono i nostri occhi. Nel 2023 abbiamo introdotto nuovi colori, più colori, nuovi spazi colore, funzioni di colore e nuove funzionalità.

CSS e colore ora possono: - Controllare se l'hardware dello schermo degli utenti è in grado di gestire colori HDR ad ampia gamma. - Controlla 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. - Crea sfumature con colori HDR. - Interpolare le sfumature in spazi colore alternativi. - Mescola i colori con color-mix(). - Crea varianti di colore con la sintassi dei colori relativi.

Scopri di più su Color 4 e spazi colore.

funzione color-mix

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

Puoi pensare a color-mix() come a un momento nel tempo di un gradiente. Mentre un gradiente mostra tutti i passaggi necessari per passare dal blu al bianco, color-mix() mostra un solo passaggio. Le cose si fanno più complesse quando inizi a prendere in considerazione gli spazi colore e a capire quanto lo spazio colore di fusione possa influire sui risultati.

Scopri di più su color-mix().

Sintassi del colore relativo

La sintassi del colore relativo (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 un accesso preciso al canale di luminosità e la possibilità di utilizzare calc() sul canale per ridurre o aumentare la luminosità in modo programmatico.

RCS consente di eseguire manipolazioni relative e assolute di un colore. Una modifica relativa è una modifica in cui prendi il valore corrente di saturazione o luminosità e lo modifichi con calc(). Una modifica assoluta è quella in cui sostituisci un valore del canale con uno completamente nuovo, ad esempio impostando l'opacità al 50%. Questa sintassi ti offre strumenti significativi per la creazione di temi, varianti just-in-time e altro ancora.

Scopri di più sulla sintassi del colore relativo.

Query sui contenitori di dimensioni

Anziché utilizzare le informazioni sulle dimensioni globali della finestra per applicare gli stili CSS, le query sui contenitori supportano l'interrogazione di un elemento principale all'interno della pagina. Ciò significa che i componenti possono essere stilizzati in modo dinamico in più layout e in più visualizzazioni. 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 sull'elemento su cui esegui la query, quindi, in modo simile a una media query, utilizza @container con i parametri di dimensione per applicare gli stili. Oltre alle query sui contenitori, vengono visualizzate le dimensioni delle query sui contenitori. Nella demo seguente, la dimensione della query sul contenitore cqi (che rappresenta la dimensione del contenitore in linea) viene utilizzata per dimensionare l'intestazione della scheda.

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

Query sui container di stile

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

Screenshot della query di stile

Demo della query di stile

Sebbene possa sembrare simile all'utilizzo dei nomi delle classi in CSS, le query di stile presentano alcuni vantaggi. Il primo è che con le query di stile puoi aggiornare il valore in CSS in base alle necessità per gli pseudo-stati. 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 come style(font-style: italic).

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

:Selettore has()

Per quasi 20 anni gli sviluppatori hanno chiesto un "selettore principale" in CSS. Con il selettore :has() introdotto in Chrome 105, ora è possibile. Ad esempio, l'utilizzo di .card:has(img.hero) selezionerà gli elementi .card che hanno un'immagine hero come elemento secondario.

:has() Demo Screenshot

:has() Live Demo

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 l'albero DOM, ma anche eseguire selezioni laterali. Ad esempio, li:has(+ li:hover) selezionerà l'elemento <li> che precede l'elemento <li> su cui è attualmente posizionato il cursore.

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

Aggiornare la media query

La media query update ti consente di adattare la UI alla frequenza di aggiornamento di un dispositivo. La funzionalità può segnalare un valore di fast, slow o none, che si riferisce alle funzionalità di diversi dispositivi.

La maggior parte dei dispositivi per cui progetti probabilmente ha una frequenza di aggiornamento rapida. Sono inclusi i computer e la maggior parte dei dispositivi mobili. Gli eReader e i dispositivi come i sistemi di pagamento a basso consumo energetico potrebbero avere una frequenza di aggiornamento lenta. Sapere che il dispositivo non è in grado di gestire animazioni o aggiornamenti frequenti significa che puoi risparmiare batteria o aggiornamenti di visualizzazione difettosi.

Scopri di più su @media (update).

Query multimediale di scripting

La media query di scripting può essere utilizzata per verificare se JavaScript è disponibile. Questo è molto utile per il miglioramento progressivo. Prima di questa media query, una strategia per rilevare se JavaScript era disponibile consisteva nell'inserire una classe nojs nel codice HTML e rimuoverla con JavaScript. Questi script possono essere rimossi perché ora CSS ha un modo per rilevare JavaScript e adattarsi di conseguenza.

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

Prendi in considerazione il cambio di tema su un sito web. La media query di scripting può aiutarti a far funzionare il cambio in base alle preferenze di sistema, poiché non è disponibile JavaScript. In alternativa, prendi in considerazione un componente di commutazione: se JavaScript è disponibile, l'interruttore può essere attivato con un gesto anziché semplicemente attivato e disattivato. Ci sono molte ottime opportunità per migliorare l'esperienza utente se gli script sono disponibili, fornendo al contempo un'esperienza di base significativa se gli script sono disattivati.

Scopri di più sugli script.

Query supporti con trasparenza ridotta

Le interfacce non opache possono causare mal di testa o essere un problema visivo per vari tipi di disabilità visive. Per questo motivo, Windows, macOS e iOS hanno preferenze di sistema che possono ridurre o rimuovere la trasparenza dalla UI. Questa media query per prefers-reduced-transparency si adatta bene alle altre media query delle preferenze, che ti consentono di essere creativo e di adattarti agli utenti.

In alcuni casi, puoi fornire un layout alternativo in cui i contenuti non si sovrappongono ad altri contenuti. In altri casi, l'opacità di un colore può essere regolata in modo che sia opaco o quasi opaco. Il seguente post del blog contiene altre demo stimolanti che si adattano alle preferenze dell'utente. Dai un'occhiata se ti incuriosisce sapere quando questa media query è utile.

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

Visualizzare le transizioni

Le transizioni di visualizzazione hanno un impatto enorme sull'esperienza utente di una pagina. Con l'API View Transitions, puoi creare transizioni visive tra due stati di pagina della tua applicazione a pagina singola. Queste transizioni possono essere transizioni di pagina intera o elementi più piccoli di una pagina, ad esempio l'aggiunta o la rimozione di un nuovo elemento a 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 il resto. A questo scopo, acquisisce uno snapshot prima e dopo, quindi esegue la transizione tra i due. Utilizzando CSS puoi controllare cosa viene acquisito e, se vuoi, personalizzare l'animazione di questi snapshot.

L'API View Transitions per le applicazioni a pagina singola è stata rilasciata in Chrome 111. Scopri di più sulle transizioni di visualizzazione.

Funzione di accelerazione lineare

Non lasciarti ingannare dal nome di questa funzione. La funzione linear() (da non confondere con la parola chiave linear) ti consente di creare funzioni di accelerazione complesse in modo semplice, con il compromesso di perdere un po' di precisione.

Prima di linear(), distribuito in Chrome 113, era impossibile creare effetti di rimbalzo o molla in CSS. Grazie a linear() è possibile approssimare queste accelerazioni semplificandole in una serie di punti, quindi interpolando linearmente tra questi punti.

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

Fine scorrimento

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 attuale. 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 di fine scorrimento perfettamente sincronizzato che rileva se un utente è ancora a metà gesto o meno.

Era importante che il browser possedesse questa funzionalità perché JavaScript non può rilevare la presenza di un dito sullo schermo durante lo scorrimento. Le informazioni semplicemente non sono disponibili. I blocchi di codice di tentativo di fine scorrimento imprecisi ora possono essere eliminati e sostituiti con un evento di alta precisione di proprietà del browser.

Scopri di più su scrollend.

Animazioni basate sullo scorrimento

Le animazioni basate sullo scorrimento sono una funzionalità entusiasmante disponibile a partire da Chrome 115. Questi 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. Quando scorri verso l'alto e verso il basso o verso sinistra e verso destra in uno scorrimento orizzontale, l'animazione collegata viene riprodotta in avanti e indietro in risposta diretta.

Con una ScrollTimeline puoi monitorare l'avanzamento complessivo di uno scorrimento, come mostrato nella seguente demo. Man mano che scorri fino alla fine della pagina, il testo si rivela carattere per carattere.

Con ViewTimeline puoi monitorare un elemento mentre attraversa la porta di scorrimento. Funziona in modo simile a come IntersectionObserver monitora un elemento. Nella seguente demo, ogni immagine si rivela dal momento in cui entra nel riquadro di scorrimento fino a quando non si trova al centro.

Poiché le animazioni basate sullo scorrimento funzionano con le animazioni CSS e l'API Web Animations, puoi sfruttare tutti i vantaggi offerti da queste API. Ciò include la possibilità di eseguire queste animazioni al di fuori del thread principale. Ora puoi avere animazioni fluide e scorrevoli, basate sullo scorrimento, eseguite al di fuori del thread principale con poche righe di codice aggiuntive. Cosa c'è di meglio?

Per saperne 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

Quando si applica un'animazione basata sullo scorrimento tramite CSS, il meccanismo di ricerca per trovare lo scroller di controllo risale sempre l'albero DOM, limitandosi agli antenati di scorrimento. Molto spesso, però, l'elemento da animare non è un elemento secondario dello scroller, ma un elemento che si trova in un albero secondario completamente diverso.

Per consentire all'elemento animato di trovare una sequenza temporale di scorrimento denominata di un elemento non predecessore, utilizza la proprietà timeline-scope su un elemento padre condiviso. In questo modo, il scroll-timeline o il view-timeline definito con quel nome può essere collegato, ampliando il suo ambito. In questo modo, qualsiasi figlio del genitore condiviso può utilizzare la cronologia con quel nome.

Scopri di più su timeline-scope.

Animazioni delle proprietà discrete

Un'altra nuova funzionalità del 2023 è la possibilità di animare animazioni discrete, ad esempio l'animazione da e verso display: none. A partire da Chrome 116, puoi utilizzare display e content-visibility nelle regole dei fotogrammi chiave. Puoi anche eseguire la transizione di qualsiasi proprietà discreta al 50% anziché allo 0%. Ciò si ottiene con la proprietà transition-behavior utilizzando la parola chiave allow-discrete o nella proprietà transition come abbreviazione.

Scopri di più sulla transizione delle animazioni discrete.

@starting-style

La regola CSS @starting-style si basa su nuove funzionalità web per l'animazione da e verso display: none. Questa regola fornisce un modo per assegnare a un elemento uno stile "prima dell'apertura" che il browser può cercare prima che l'elemento venga aperto nella pagina. È molto utile per le animazioni di entrata e per animare elementi come un popover o una finestra di dialogo. Può essere utile anche quando crei un elemento e vuoi dargli la possibilità di animarsi. Prendi in considerazione il seguente esempio, che anima un attributo popover (vedi la sezione successiva) in modo che venga visualizzato e si sposti senza problemi nel livello superiore dall'esterno del viewport.

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

Overlay

La nuova proprietà CSS overlay può essere aggiunta alla transizione per consentire agli elementi con stili di livello superiore, come popover e dialog, di uscire dal livello superiore in modo uniforme. Se non utilizzi la transizione di sovrapposizione, l'elemento tornerà immediatamente a essere ritagliato, trasformato e coperto e non vedrai la transizione. Allo stesso modo, overlay consente a ::backdrop di animarsi in modo uniforme quando viene aggiunto a un elemento del livello superiore.

Scopri di più sulla sovrapposizione e su altre animazioni di uscita.

Popover

L'API Popover ti aiuta a creare elementi che si sovrappongono al resto della pagina. Questi potrebbero includere menu, selezioni e descrizioni comando. Puoi creare un semplice popover aggiungendo l'attributo popover e un id all'elemento che viene visualizzato e collegando il relativo attributo id a un pulsante di chiamata utilizzando popovertarget="my-popover". L'API Popover supporta:

• Promozione al livello superiore. I popup vengono visualizzati su un livello separato sopra il resto della pagina, quindi non devi preoccuparti dell'indice z.
• Funzionalità di chiusura rapida. Se fai clic al di fuori dell'area del popover, questo si chiuderà e il focus tornerà alla pagina.
• Gestione della messa a fuoco predefinita. L'apertura del popup lo rende la prossima interruzione della scheda all'interno del popup.
• Assegnazioni di tastiera accessibili. Se premi il tasto esc o se attivi/disattivi due volte, il popover si chiude e lo stato attivo di selezione torna alla posizione precedente.
• Binding dei componenti accessibili. Collegamento semantico di un elemento popover a un trigger popover.

Regole orizzontali nella selezione

Un'altra piccola modifica all'HTML, implementata quest'anno in Chrome e Safari, è la possibilità di aggiungere elementi di regola orizzontale (tag <hr>) agli elementi <select> per separare visivamente i contenuti. In precedenza, l'inserimento di un tag <hr> in una selezione non veniva visualizzato. Quest'anno, però, 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

Pseudo classi :user-valid e :user-invalid

Stabili in tutti i browser quest'anno, :user-valid e :user-invalid si comportano in modo simile alle pseudo-classi :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.

Scopri di più sull'utilizzo degli pseudo-elementi di convalida dei moduli user-*.

Fisarmonica esclusiva

Un pattern comune dell'interfaccia utente sul web è un componente a fisarmonica. Per implementare questo pattern, combini alcuni elementi <details>, spesso raggruppandoli visivamente per indicare che appartengono insieme.

La novità di Chrome 120 è il supporto dell'attributo name sugli elementi <details>. Quando viene utilizzato questo attributo, più elementi <details> con lo stesso valore name formano un gruppo semantico. Al massimo un elemento del gruppo può essere aperto contemporaneamente: quando apri uno degli elementi <details> del gruppo, quello aperto in precedenza si chiuderà automaticamente. Questo tipo di fisarmonica è chiamato fisarmonica esclusiva.

Gli elementi <details> che fanno parte di una fisarmonica esclusiva non devono necessariamente essere elementi di pari livello. Possono essere sparsi nel documento.