Funzioni trigonometriche

Chrome 111 ha aggiunto il supporto delle funzioni trigonometriche sin(), cos(), tan(), asin(), acos(), atan() e atan2(), rendendole disponibili su 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 attorno a un centro scelto.

Scopri di più sulle funzioni trigonometriche in CSS.

Selezione complessa dell'elemento n-esimo*

Con il selettore di pseudo-classi :nth-child() è possibile selezionare gli elementi nel DOM in base al loro 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.

Scopri di più sulle selezioni complesse dell'elemento n-esimo*.

Ambito

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 di 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

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

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 rigida.

Scopri di più sull'nidificazione.

Subgrid

Il CSS subgrid ti consente di creare griglie più complesse con un migliore allineamento tra i layout secondari. Consente a una griglia interna a un'altra 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 griglia secondaria è particolarmente utile per allineare elementi fratelli ai contenuti dinamici l'uno dell'altro. 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 modificato in base ai contenuti.

Scopri di più sulla griglia secondaria.

Initial-letter

Lanciata 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 in uno stato abbassato o rialzato. La proprietà accetta due argomenti: il primo per indicare la profondità con cui inserire la lettera nel paragrafo corrispondente e il secondo per indicare quanto sollevarla sopra. Puoi anche combinare entrambe le opzioni, come nella demo seguente.

Screenshot iniziale

Demo della lettera iniziale

Scopri di più su initial-letter.

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 scelta 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.

Scopri di più su text-wrap: balance.

Spazi di colore HD (livello di colore 4)

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, avremo nuovi colori, più colori, nuovi spazi di colore, funzioni di colore 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, ad esempio Oklch o Display P3. - Specifica i colori HDR in Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ e altri ancora. - Creare sfumature con colori HDR, - Interpolare le sfumature in spazi di colore alternativi. - Mescola i colori con color-mix(). - Crea varianti di colore con la sintassi dei colori relativa.

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

funzione color-mix

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.

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() ne mostra solo uno. Le cose si complicano quando inizi a prendere in considerazione gli spazi di colore e a scoprire quanto può essere diverso lo spazio di colore di miscelazione rispetto ai risultati.

Scopri di più su color-mix().

Sintassi del colore relativo

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.

RCS ti consente di eseguire manipolazioni relative e assolute di un colore. Una modifica relativa consiste nel prendere il valore corrente di saturazione o luminosità e modificarlo 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.

Query sui contenitori delle dimensioni

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 personalizzati 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 per l'elemento su cui stai eseguendo la query, quindi, in modo simile a una query sui media, utilizza @container con i parametri di dimensione per applicare gli stili. Oltre alle query dei contenitori, vengono visualizzate le dimensioni delle query dei contenitori. 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.

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

Query sui contenitori di stili

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 in 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 di query sugli stili

Sembra simile all'utilizzo dei nomi delle classi in CSS, ma le query di stile hanno alcuni vantaggi. La prima è che, con le query sugli stili, puoi aggiornare il valore in CSS in base alle esigenze per gli stati pseudo. 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 sugli stili.

Selettore:has()

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 della demo di :has()

Demo dal vivo di :has()

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.

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

Aggiornare la query sui contenuti multimediali

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 ha 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.

Scopri di più su @media (aggiornamento).

Query sui contenuti multimediali basate su script

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 sui contenuti multimediali, una strategia per rilevare se JavaScript era disponibile consisteva nell'inserire un'entità nojs nel codice HTML e rimuoverla con JavaScript. Questi script possono essere rimossi perché ora CSS ha un modo per rilevare JavaScript e modificarlo di conseguenza.

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

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

Le interfacce non opache possono causare mal di testa o essere difficili da vedere per vari tipi di deficit visivi. 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 sui media per prefers-reduced-transparency si adatta bene alle altre query sui media per preferenze, che ti consentono di essere creativo e al contempo di adattarti agli utenti.

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).

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 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. A tale scopo, acquisisce uno snapshot prima e uno dopo, quindi esegue la transizione tra i due. Utilizzando il CSS, puoi controllare cosa viene acquisito e, facoltativamente, personalizzare l'animazione di questi istantanei.

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

Funzione di transizione lineare

Non lasciarti ingannare dal nome di questa funzione. La funzione linear() (da non confondere con la parola chiave linear) consente di creare funzioni di easing complesse in modo semplice, con il compromesso di perdere un po' di 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.

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

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 corrente. Prima dell'evento scrollend, dovevi utilizzare un metodo di timeout impreciso che poteva essere attivato 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 al gesto o meno.

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 di tentativi di fine scorrimento non accurati 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

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. Quando scorri verso l'alto e verso il basso o verso sinistra e verso destra in uno scorrevole orizzontale, l'animazione collegata eseguirà lo scrubbing avanti e indietro in 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.

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

Poiché le animazioni basate sullo scorrimento funzionano con le animazioni CSS e l'API Web Animations, puoi usufruire di tutti i vantaggi offerti da queste API. Inclusa la possibilità di eseguire 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

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, il scroll-timeline o il view-timeline definito con quel nome può essere associato, dandogli un ambito più ampio. In questo modo, qualsiasi entità secondaria di quell'entità principale condivisa può utilizzare la cronologia con quel nome.

Scopri di più su timeline-scope.

Animazioni di proprietà distinte

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.

Scopri di più sulla transizione di animazioni distinte.

@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. Questo è molto utile per le animazioni di entrata e per animare elementi come un popup o una finestra di dialogo. Può essere utile anche ogni volta che crei un elemento e vuoi animarlo. 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.

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

Overlay

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 e non vedrai la transizione. Analogamente, overlay consente a ::backdrop di eseguire l'animazione in modo fluido quando viene aggiunto a un elemento di primo livello.

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

Popup

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. L'apertura del popup imposta la tabulazione successiva all'interno del popup.
• Scorciatoie da tastiera accessibili. Se premi il tasto esc o se esegui il doppio abilitazione/disattivazione, il popup si chiuderà e lo stato attivo tornerà al campo precedente.
• Associazioni di componenti accessibili. Collegamento semantico di un elemento popup a un trigger popup.

Righelli orizzontali in un selettore

Un'altra piccola modifica all'HTML implementata 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

Stabili in tutti i browser quest'anno, :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 del 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 con stato per tenere traccia degli input modificati da un utente.

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

Accordion esclusivo

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

Una 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.

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