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 n-* complessa

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.

Scopri di più sulle selezioni nth-* complesse.

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 Ambito

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

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

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.

Initial-letter

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

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.

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

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

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.

Query relative alle dimensioni dei contenitori

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.

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

Query dei contenitori di stile

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

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

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

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

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

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

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

Visualizza transizioni

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.

L'API View Transiziones per applicazioni a pagina singola disponibile 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 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.

Scopri di più su linear(). Per creare curve linear(), utilizza il generatore di curve di transizione 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 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.

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

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.

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.

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

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.

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.

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

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

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

Popolarità

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.

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

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.

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

Fisarmonica esclusiva

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.

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