Funzioni trigonometriche

In Chrome 111 è stato aggiunto il supporto delle funzioni trigonometriche sin(), cos(), tan(), asin(), acos(), atan() e atan2(), rendendole disponibili in tutti i principali motori. Queste funzioni sono molto utili ai fini dell'animazione e del 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-esima* complessa

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 in modo preciso gli elementi da selezionare.

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

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

Scopri di più sulle selezioni complesse n-esime*.

Ambito

In Chrome 118 è stato aggiunto il supporto di @scope, una regola at che consente di associare il selettore di ambito a un sottoalbero specifico del documento. Con gli stili con ambito, puoi definire con precisione gli elementi selezionati senza dover scrivere selettori troppo specifici o accoppiarli strettamente alla struttura DOM.

Un sottoalbero basato su ambito è definito da una radice di ambito (il limite superiore) e da un limite di 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 avranno come target solo gli elementi all'interno del sottoalbero sagomato. Ad esempio, la seguente regola di stile basata sull'ambito ha come target solo gli elementi <img> che si trovano tra l'elemento .card e qualsiasi componente nidificato corrispondente dal 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 sull'ambito

Demo dal vivo dell'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 subisce l'impatto@scope.

Nesting

Prima di nidificare, ogni selettore doveva essere dichiarato esplicitamente, separatamente l'uno dall'altro. Questo porta alla ripetizione, al caricamento collettivo del foglio di stile e a un'esperienza di creazione sparsa. Ora è possibile continuare i selettori con regole di stile correlate raggruppate all'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 di selettori ripetuti e centralizzare gli stili dei componenti. La sintassi inizialmente rilasciata con una limitazione che richiedeva l'utilizzo di & in varie posizioni, ma successivamente è stata eliminata con un aggiornamento di sintassi semplificato di nidificazione.

Scopri di più sulla nidificazione.

Griglia

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 sottogriglia è particolarmente utile per allineare i gemelli ai contenuti dinamici reciproci. In questo modo, copywriter, UX writer e traduttori non devono tentare di creare un testo per il progetto che si adatti al layout. Con la griglia secondaria, il layout può essere regolato per adattarsi ai contenuti.

Scopri di più sulla griglia secondaria.

Lettera iniziale

Arrivata 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 Eliminato o In rilievo. La proprietà accetta due argomenti: il primo per determinare l'entità del rilascio della lettera nel paragrafo corrispondente e il secondo per determinare quanto aumentare la lettera al di sopra. Puoi anche utilizzare una combinazione di entrambi, come mostrato nella demo seguente.

Screenshot con la lettera iniziale

Demo con la lettera iniziale

Scopri di più sulla lettera iniziale.

text-wrap: equilibrio e grazia

In qualità di sviluppatore, non conosci le dimensioni finali, la dimensione del carattere o persino la lingua di un titolo o di un paragrafo. Tutte le variabili necessarie per un trattamento efficace ed estetico del testo a capo sono disponibili nel browser. Poiché il browser conosce tutti i fattori, come dimensioni del carattere, lingua e area assegnata, è ideale per gestire un layout di testo avanzato e di alta qualità.

È qui che entrano in gioco due nuove tecniche di testo a capo, una chiamata balance e l'altra pretty. Il valore balance cerca di creare un blocco di testo armonioso, mentre pretty cerca di prevenire gli orfani e garantire una sillabazione salutare. Entrambe queste attività sono tradizionalmente eseguite a mano ed è fantastico dare il lavoro al browser e farlo funzionare in qualsiasi lingua tradotta.

Scopri di più su text-wrap: saldo.

Spazi colore HD (livello colore 4)

Dall'hardware al software, dal CSS alle luci lampeggianti, i nostri computer possono avere bisogno di molto lavoro per cercare di rappresentare i colori con la stessa qualità che gli occhi umani vedono. Nel 2023 abbiamo nuovi colori, più colori, nuovi spazi colore, funzioni colore e nuove funzionalità.

Ora CSS e colore possono: - Controllare se l'hardware dello schermo dell'utente è in grado di riprodurre colori HDR a un'ampia gamma di colori. - Verifica che il browser dell'utente comprenda 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. - Combina i colori con color-mix(). - Creare varianti di colore con la relativa sintassi dei colori.

Scopri di più su Colore 4 e spazi colore.

funzione color-mix

Mescolare i colori è un'attività classica e nel 2023 anche i CSS possono farlo. Non solo puoi combinare il bianco o il nero con un colore, ma anche la trasparenza, e fare tutto questo nello spazio colore che preferisci. È allo stesso tempo una funzionalità colore di base e una funzionalità colore avanzata.

Puoi considerare color-mix() come un momento nel tempo di un gradiente. Dove un gradiente mostra tutti i passaggi necessari per passare dal blu al bianco, color-mix() mostra un solo passaggio. Le cose diventano più avanzate non appena inizi a prendere in considerazione gli spazi colore e scopri quanto può essere diverso lo spazio colore combinato con i risultati.

Scopri di più su color-mix().

Sintassi dei colori relativa

La sintassi del colore relativo (RCS) è un metodo complementare a color-mix() per creare varianti di colore. È leggermente più potente di color-mix() ma anche una strategia diversa per lavorare con i colori. color-mix() potrebbe mescolare il colore bianco per schiarire un colore, dove RCS fornisce 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 su un colore. Una variazione relativa è una variazione relativa in cui prendi l'attuale valore di saturazione o luminosità e lo modifichi con calc(). Per modifica assoluta si intende sostituire il valore di un canale con uno completamente nuovo, ad esempio impostando l'opacità al 50%. Questa sintassi ti offre strumenti significativi per la tematizzazione, solo in varianti temporali e altro ancora.

Scopri di più sulla sintassi relativa dei colori.

Dimensioni delle query dei container

Anziché utilizzare le informazioni sulle dimensioni globali dell'area visibile per applicare gli stili CSS, le query relative al contenitore supportano l'esecuzione di query su un elemento principale all'interno della pagina. Ciò significa che ai componenti è possibile applicare uno stile dinamico in più layout e in più visualizzazioni. Le query container per dimensione sono diventate stabili in tutti i browser moderni a San Valentino di quest'anno (14 febbraio).

Per utilizzare questa funzionalità, imposta prima il contenimento dell'elemento su cui stai eseguendo la query e quindi, come per una query supporti, utilizza @container con i parametri di dimensione per applicare gli stili. Insieme alle query container, puoi ottenere le dimensioni delle query del contenitore. Nella demo seguente, le dimensioni della query del contenitore cqi (che rappresentano le dimensioni del contenitore in linea) vengono utilizzate per dimensionare l'intestazione della scheda.

Scopri di più sull'utilizzo delle query contenitore.

Applicare uno stile alle query container

Le query di stile sono arrivate con l'implementazione parziale 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 se esiste un valore di proprietà personalizzata o è impostato su un determinato valore, ad esempio @container style(--rain: true).

Screenshot della query di stile

Demo sulle query di stile

Anche se sembra 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 esigenze degli 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 relative allo stile.

Selettore:has()

Per quasi 20 anni gli sviluppatori hanno chiesto un "selettore principale" in CSS. Ora è possibile grazie al selettore :has() fornito in Chrome 105. Ad esempio, se utilizzi .card:has(img.hero) verranno selezionati gli elementi .card che hanno un'immagine hero come bambini.

Screenshot demo :has()

Demo dal vivo :has()

Poiché :has() accetta un elenco di selettori relativo come argomento, puoi selezionare molto di più rispetto all'elemento principale. Utilizzando vari combinatori CSS, è possibile non solo salire nell'albero DOM, ma anche effettuare selezioni laterali. Ad esempio, li:has(+ li:hover) selezionerà l'elemento <li> che precede l'elemento <li> al momento del passaggio del mouse.

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

Aggiorna query supporti

La query supporti update ti offre un modo per adattare l'UI alla frequenza di aggiornamento di un dispositivo. La funzionalità può segnalare un valore pari a fast, slow o none relativo alle funzionalità dei diversi dispositivi.

La maggior parte dei dispositivi per cui progetti ha probabilmente una frequenza di aggiornamento veloce. Sono inclusi i computer e la maggior parte dei dispositivi mobili. Gli eReader e i dispositivi, come i sistemi di pagamento a bassa potenza, 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 della visualizzazione errati.

Scopri di più su @media (aggiornamento).

Esecuzione di script su query supporti

La query supporti scripting può essere utilizzata per verificare se JavaScript è disponibile o meno. Questa opzione è molto utile per il miglioramento progressivo. Prima di questa query supporti, una strategia per rilevare la disponibilità di JavaScript consisteva nell'inserire una classe nojs nel codice HTML e rimuoverla con JavaScript. Questi script possono essere rimossi, in quanto CSS ha ora 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.

Considera l'idea di cambiare tema su un sito web: la query supporti di scripting può aiutare a far funzionare il passaggio rispetto alla preferenza di sistema poiché non è disponibile JavaScript. In alternativa, valuta l'idea di usare un componente per l'opzione Cambia: se è disponibile JavaScript, l'opzione può essere fatta scorrere con un gesto invece di attivarla o disattivarla. Molte grandi opportunità di aggiornare l'UX se lo script è disponibile e offre un'esperienza di base significativa se lo script è disattivato.

Scopri di più su script.

Query multimediale con trasparenza ridotta

Le interfacce non opache possono causare mal di testa o essere un problema visivo per vari tipi di difetti alla vista. Ecco perché Windows, macOS e iOS hanno preferenze di sistema che possono ridurre o rimuovere la trasparenza dall'interfaccia utente. Questa query supporti prefers-reduced-transparency si adatta bene alle altre query supporti preferite, che ti consentono di scatenare la tua creatività e di adattare la tua creatività agli utenti.

In alcuni casi, puoi fornire un layout alternativo che non abbia contenuti che si sovrappongono ad altri contenuti. In altri casi, l'opacità di un colore può essere regolata in modo da risultare opaco o quasi opaco. Il seguente post del blog contiene demo più stimolanti che si adattano alle preferenze degli utenti; date un'occhiata se siete curiosi di sapere quando questa query sui contenuti multimediali è utile.

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

Visualizzare le transizioni

Le transizioni delle visualizzazioni hanno un impatto enorme sull'esperienza utente di una pagina. Con l'API View Transiziones, puoi creare transizioni visive tra due stati di pagina dell'applicazione a pagina singola. Possono essere transizioni di pagina intera o elementi più piccoli di una pagina come l'aggiunta o la rimozione di un nuovo elemento a un elenco.

Il fulcro dell'API View Transiziones è la funzione document.startViewTranstion. Passa una funzione che aggiorna il DOM al nuovo stato e l'API si occupa di tutto. Per farlo, scatta un'istantanea del prima e del dopo, quindi passa da una fase all'altra. Con CSS puoi controllare ciò che viene acquisito e, facoltativamente, personalizzare l'animazione delle istantanee.

L'API View Transiziones per applicazioni a pagina singola fornita in Chrome 111. Scopri di più su Visualizza transizioni.

Funzione di easing lineare

Non farti ingannare dal nome di questa funzione. La funzione linear() (da non confondere con la linearparola chiave) consente di creare funzioni di easing complesse in modo semplice, senza compromettere la precisione.

Prima del giorno linear(), disponibile con Chrome 113, non era possibile creare effetti di rimbalzo o molla in CSS. Grazie a linear()è possibile avvicinarsi all'interpolazione semplificandole in una serie di punti e interpolando in modo lineare tra i due punti.

Scopri di più su linear(). Per creare curve linear(), utilizza il generatore di easing 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 non preciso che poteva attivarsi mentre il dito dell'utente era ancora sullo schermo. Con l'evento scrollend, hai un evento di scrollend perfettamente sincronizzato, che capisce se un utente sta ancora facendo o meno il gesto.

Questo era importante per il browser perché JavaScript non è in grado di monitorare la presenza di dita sullo schermo durante uno scorrimento; le informazioni semplicemente non sono disponibili. Ora è possibile eliminare blocchi di codice non preciso per il tentativo di fine di scorrimento e sostituirli con un evento ad alta precisione di proprietà del browser.

Scopri di più su scrollend.

Animazioni con scorrimento

Le animazioni con scorrimento sono una funzionalità molto interessante disponibile a partire da Chrome 115. che ti consentono di acquisire un'animazione CSS esistente o creata con l'API Web Animations e di accoppiarla all'offset di scorrimento di uno scroller. Quando scorri verso l'alto e verso il basso, o verso sinistra e verso destra in una barra di scorrimento orizzontale, l'animazione collegata scorre avanti e indietro in risposta diretta.

Con una sequenza di scorrimento puoi tenere traccia dell'avanzamento complessivo di una barra di scorrimento, come mostrato nella demo seguente. Mentre scorri fino alla fine della pagina, il testo si rivela carattere per carattere.

Con ViewTimeline puoi tenere traccia di un elemento mentre attraversa la finestra di scorrimento. Questo processo funziona in modo simile al monitoraggio di un elemento da parte di IntersectionObservationr. Nella demo seguente, ogni immagine si rivela dal momento in cui entra nella porta di scorrimento fino a quando non è al centro.

Poiché le animazioni basate su scorrimento funzionano con le animazioni CSS e l'API Web Animations, puoi trarre vantaggio da tutti i vantaggi offerti da queste API. Ciò include la possibilità di eseguire queste animazioni dal thread principale. Ora puoi avere animazioni fluide e fluide, guidate da scorrimento, che escono dal thread principale con poche righe di codice in più. Cosa non ti piace?

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

Allegato della sequenza temporale differita

Quando si applica un'animazione con scorrimento tramite CSS, il meccanismo di ricerca per trovare lo scroller di controllo percorre sempre l'albero DOM, limitandolo allo scorrimento dei soli predecessori. Molto spesso, però, l'elemento che deve essere animato non è un elemento secondario dello scroller, ma un elemento situato in un sottoalbero completamente diverso.

Per consentire all'elemento animato di trovare una sequenza temporale di scorrimento denominata di un non predecessore, utilizza la proprietà timeline-scope su un elemento principale condiviso. In questo modo, i valori scroll-timeline o view-timeline definiti con questo nome possono essere associati, in modo da avere un ambito più ampio. Una volta configurata questa impostazione, tutte le risorse secondarie del genitore condiviso possono utilizzare la sequenza temporale con quel nome.

Scopri di più su timeline-scope.

Animazioni di proprietà discrete

Un'altra nuova funzionalità del 2023 sarà la possibilità di animare animazioni discrete, come l'animazione da e verso display: none. A partire da Chrome 116, puoi utilizzare display e content-visibility nelle regole per i fotogrammi chiave. Puoi anche eseguire la transizione di qualsiasi proprietà discreta al punto del 50% anziché al punto dello 0%. Puoi ottenere questo risultato con la proprietà transition-behavior utilizzando la parola chiave allow-discrete o nella proprietà transition in breve tempo.

Scopri di più sulla transizione di 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 consente di assegnare a un elemento lo stile "before-open" che il browser può cercare prima che venga aperto sulla pagina. Questa funzionalità è molto utile per le animazioni di voci e per l'animazione di elementi come popover o finestre di dialogo. Può essere utile anche quando crei un elemento in cui vuoi avere la possibilità di animarlo. Prendi in esame l'esempio riportato di seguito, che anima un attributo popover (vedi la sezione successiva) nell'area visibile e nel livello superiore in modo uniforme dall'esterno dell'area visibile.

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

In 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 animarsi senza interruzioni dal livello superiore. Se non esegui la transizione dell'overlay, l'elemento tornerà subito a essere tagliato, trasformato e coperto e non vedrai avvenire la transizione. Analogamente, overlay consente a ::backdrop di animarsi in modo fluido quando viene aggiunto a un elemento di livello superiore.

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

Popover

L'API Popover consente di creare elementi da posizionare in alto sul resto della pagina. Potrebbero essere inclusi menu, selezione e descrizioni comando. Puoi creare un popover semplice aggiungendo l'attributo popover e un id all'elemento popup e collegando il relativo attributo id a un pulsante di chiamata utilizzando popovertarget="my-popover". L'API Popover supporta:

• Promozione al livello superiore. I popover verranno visualizzati in un livello separato sopra il resto della pagina, in modo da non dover sperimentare con z-index.
• Funzionalità per ignorare la sveglia. Se fai clic all'esterno dell'area popover, il popover verrà chiuso e verrà ripristinato lo stato attivo.
• Gestione predefinita dell'elemento attivo. Quando apri il popover, la tabulazione successiva viene bloccata all'interno del popover.
• Associazioni da tastiera accessibili. Premi il tasto esc o attiva/disattiva due volte il popover per chiudere il popover e ripristinare lo stato attivo.
• Associazioni di componenti accessibili. La connessione di un elemento popover a un popover attiva in modo semantico.

Regole orizzontali nella selezione

Un'altra piccola modifica al codice HTML introdotta quest'anno in Chrome e Safari è la possibilità di aggiungere elementi con regole orizzontali (tag <hr>) agli elementi <select> per suddividere visivamente i contenuti. In precedenza, l'inserimento di un tag <hr> in un elemento di selezione non veniva visualizzato. Quest'anno sia Safari sia Chrome supportano questa funzionalità, che consente 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 valide e non valide per utente

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 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 ha modificato l'input e lo ha 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 di pseudo elementi di convalida del modulo utente-*.

Fisarmonica esclusiva

Un pattern di UI comune sul web è un componente accordion. 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 su elementi <details>. Quando viene utilizzato questo attributo, più elementi <details> con lo stesso valore name formano un gruppo semantico. Può essere aperto al massimo un elemento del gruppo contemporaneamente: quando apri uno degli elementi <details> del gruppo, quello precedentemente aperto verrà chiuso automaticamente. Questo tipo di fisarmonica è chiamato fisarmonica esclusiva.

Gli elementi <details> che fanno parte di un'esclusiva accordion non devono necessariamente essere fratelli e sorelle. possono essere sparse nel documento.