Ultime novità su CSS e UI web: riepilogo dell'I/O 2024

Una Kravets

La piattaforma web è ricca di innovazioni, con le funzionalità CSS e dell'interfaccia utente web in prima linea in questa entusiasmante evoluzione. Stiamo vivendo un'epoca d'oro per l'interfaccia utente web, con nuove funzionalità CSS che vengono implementate nei browser a un ritmo mai visto prima, aprendo un mondo di possibilità per creare esperienze web belle e coinvolgenti. Questo post del blog approfondirà lo stato attuale di CSS, esplorando alcune delle nuove funzionalità più rivoluzionarie che stanno ridefinendo il modo in cui creiamo applicazioni web, presentate in diretta alla conferenza Google I/O 2024.

Nuove esperienze interattive

Un'esperienza web è fondamentalmente una chiamata e una risposta tra te e i tuoi utenti, ecco perché è così importante investire in interazioni di qualità con gli utenti. Stiamo lavorando a miglioramenti davvero importanti che sbloccano funzionalità mai viste prima sul web per navigare all'interno delle pagine web e tra una pagina e l'altra.

Animazioni basate sullo scorrimento

Come suggerisce il nome, l'API per le animazioni basate sullo scorrimento consente di creare animazioni dinamiche basate sullo scorrimento senza fare affidamento su osservatori dello scorrimento o altri script pesanti.

Creare animazioni basate sullo scorrimento

In modo simile al funzionamento delle animazioni basate sul tempo sulla piattaforma, ora puoi utilizzare l'avanzamento dello scorrimento di uno scorrimento per avviare, mettere in pausa e invertire un'animazione. Quindi, man mano che scorri in avanti, vedrai l'avanzamento dell'animazione e, quando scorri all'indietro, vedrai l'avanzamento in senso inverso. In questo modo puoi creare immagini parziali o a pagina intera con elementi che si animano all'interno della finestra e che si muovono al suo interno, una tecnica nota anche come scrollytelling, per un impatto visivo dinamico.

Le animazioni basate sullo scorrimento possono essere utilizzate per evidenziare contenuti importanti, guidare gli utenti attraverso una storia o semplicemente aggiungere un tocco dinamico alle tue pagine web.

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Il codice precedente definisce un'animazione semplice che viene visualizzata nella finestra di visualizzazione modificando l'opacità e la scala di un'immagine. L'animazione è determinata dalla posizione di scorrimento. Per creare questo effetto, configura prima l'animazione CSS, quindi imposta animation-timeline. In questo caso, la funzione view() con i relativi valori predefiniti monitora l'immagine rispetto alla finestra di visualizzazione (che in questo caso è anche la finestra di scorrimento).

È importante tenere presente il supporto del browser e le preferenze degli utenti, soprattutto per le esigenze di accessibilità. Pertanto, utilizza la regola @supports per verificare se il browser supporta le animazioni basate sullo scorrimento e racchiudi l'animazione basata sullo scorrimento in una query delle preferenze dell'utente come @media (prefers-reduced-motion: no-preference) per rispettare le preferenze di movimento degli utenti. Dopo aver eseguito questi controlli, sai che gli stili funzioneranno e che l'animazione non è problematica per l'utente.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Le animazioni basate sullo scorrimento possono significare esperienze di scrollytelling a pagina intera, ma anche animazioni più sottili come la minimizzazione di una barra dell'intestazione e la visualizzazione di un'ombra mentre scorri un'app web.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

Questa demo utilizza alcune animazioni con fotogrammi chiave diversi: l'intestazione, il testo, la barra di navigazione e lo sfondo, quindi applica a ciascuno l'animazione basata sullo scorrimento corrispondente. Sebbene ognuno abbia uno stile di animazione diverso, tutti hanno la stessa sequenza temporale dell'animazione, lo stesso scorrimento e lo stesso intervallo di animazione, ovvero dalla parte superiore della pagina a 150 pixel.

Vantaggi in termini di prestazioni delle animazioni basate sullo scorrimento

Questa API integrata riduce il carico di codice che dovresti gestire, che si tratti di uno script personalizzato che hai scritto o dell'inclusione di una dipendenza di terze parti aggiuntiva. Inoltre, elimina la necessità di spedire vari osservatori di scorrimento, il che comporta vantaggi in termini di prestazioni piuttosto significativi. Questo perché le animazioni basate sullo scorrimento funzionano sul thread principale quando animano proprietà che possono essere animate sul compositore come trasformazioni e opacità, indipendentemente dal fatto che tu stia utilizzando la nuova API direttamente in CSS o gli hook JavaScript.

Tokopedia ha utilizzato di recente animazioni basate sullo scorrimento per far apparire la barra di navigazione dei prodotti durante lo scorrimento. L'utilizzo di questa API ha comportato alcuni vantaggi significativi, sia per la gestione del codice sia per le prestazioni.

"Siamo riusciti a ridurre fino all'80% le nostre righe di codice rispetto all'utilizzo di eventi di scorrimento JS convenzionali e abbiamo osservato che l'utilizzo medio della CPU è diminuito dal 50% al 2% durante lo scorrimento. - Andy Wihalim, Senior Software Engineer, Tokopedia"

Il futuro degli effetti di scorrimento

Sappiamo che questi effetti continueranno a rendere il web un luogo più coinvolgente e stiamo già pensando a cosa potrebbe succedere in futuro. Ciò include la possibilità di utilizzare non solo nuove sequenze temporali di animazione, ma anche un punto di scorrimento per attivare l'inizio di un'animazione, chiamate animazioni attivate dallo scorrimento.

In futuro, i browser avranno ancora più funzionalità di scorrimento. La seguente demo mostra una combinazione di queste funzionalità future. Utilizza CSS scroll-start-target per impostare la data e l'ora iniziali nei selettori e l'evento JavaScript scrollsnapchange per aggiornare la data dell'intestazione, rendendo banale la sincronizzazione dei dati con l'evento acquisito.

Puoi anche utilizzare questo evento per aggiornare un selettore in tempo reale con l'evento JavaScript scrollsnapchanging.

Queste funzionalità specifiche sono attualmente disponibili solo in Canary dietro un flag, ma sbloccano funzionalità precedentemente impossibili o molto difficili da creare nella piattaforma ed evidenziano le possibilità future di interazioni basate sullo scorrimento.

Per scoprire di più su come iniziare a utilizzare le animazioni basate sullo scorrimento, il nostro team ha appena lanciato una nuova serie di video che puoi trovare sul canale YouTube di Chrome for Developers. Qui imparerai le nozioni di base sulle animazioni basate sullo scorrimento da Bramus Van Damme, tra cui il funzionamento della funzionalità, il vocabolario, i vari modi per creare effetti e come combinarli per creare esperienze coinvolgenti. Si tratta di una serie di video da non perdere.

Visualizza transizioni

Abbiamo appena parlato di una nuova potente funzionalità che anima all'interno delle pagine web, ma esiste anche una nuova potente funzionalità chiamata transizioni di visualizzazione per animare tra le visualizzazioni di pagina e creare un'esperienza utente senza interruzioni. Le transizioni di visualizzazione introducono un nuovo livello di fluidità nel web, consentendoti di creare transizioni fluide tra diverse visualizzazioni all'interno di una singola pagina o anche tra pagine diverse.

Airbnb è una delle aziende che sta già sperimentando l'integrazione delle transizioni di visualizzazione nella propria UI per un'esperienza di navigazione web fluida e senza interruzioni. Ciò include la barra laterale dell'editor di schede, la modifica delle foto e l'aggiunta di comfort, il tutto in un flusso utente fluido.

Anche se questi effetti a schermo intero sono belli e fluidi, puoi anche creare microinterazioni, come in questo esempio in cui la visualizzazione elenco viene aggiornata in base all'interazione dell'utente. Questo effetto può essere ottenuto facilmente con le transizioni di visualizzazione.

Il modo per attivare rapidamente le transizioni di visualizzazione nella tua applicazione a pagina singola è semplice come racchiudere un'interazione utilizzando document.startViewTransition e assicurarsi che ogni elemento in transizione abbia un view-transition-name, in linea o dinamicamente utilizzando JavaScript durante la creazione dei nodi DOM.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Visualizzare le classi di transizione

I nomi delle transizioni di visualizzazione possono essere utilizzati per applicare animazioni personalizzate alla transizione di visualizzazione, anche se questa operazione può diventare complessa con molte transizioni di elementi. Il primo nuovo aggiornamento alle transizioni di visualizzazione di quest'anno semplifica questo problema e introduce la possibilità di creare classi di transizione di visualizzazione che possono essere applicate alle animazioni personalizzate.

Visualizzare i tipi di transizione

Un altro grande miglioramento per le transizioni di visualizzazione è il supporto dei tipi di transizione di visualizzazione. I tipi di transizione di visualizzazione sono utili quando vuoi un tipo diverso di transizione visiva durante l'animazione da e verso le visualizzazioni di pagina.

Ad esempio, potresti voler animare una home page in una pagina del blog in modo diverso da come la pagina del blog torna alla home page. Oppure potresti voler scambiare le pagine in modi diversi, come in questo esempio, da sinistra a destra e viceversa. Prima era difficile da fare. Potevi aggiungere classi al DOM per applicare stili e poi dovevi rimuoverle. I tipi di transizione di visualizzazione consentono al browser di liberare spazio dalle vecchie transizioni anziché richiedere di farlo manualmente prima di avviarne di nuove, svolgendo questo lavoro per te.

Puoi configurare i tipi all'interno della funzione document.startViewTransition, che ora accetta un oggetto. update è la funzione di callback che aggiorna il DOM e types è un array con i tipi.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Transizioni tra visualizzazioni di più pagine

La potenza del web risiede nella sua vastità. Molte applicazioni non sono costituite da una sola pagina, ma da un robusto insieme di più pagine. Per questo motivo, siamo felici di annunciare che stiamo implementando il supporto delle transizioni di visualizzazione tra documenti per le applicazioni multipagina in Chromium 126.

Questo nuovo insieme di funzionalità cross-document include esperienze web che si trovano nella stessa origine, ad esempio la navigazione da web.dev a web.dev/blog, ma non include la navigazione cross-origin, ad esempio la navigazione da web.dev a blog.web.dev o a un altro dominio come google.com.

Una delle principali differenze con le transizioni di visualizzazione nello stesso documento è che non è necessario racchiudere la transizione con document.startViewTransition(). Attiva invece entrambe le pagine coinvolte nella transizione della visualizzazione utilizzando la regola CSS @view-transition.

@view-transition {
  navigation: auto;
}

Per un effetto più personalizzato, puoi collegare JavaScript utilizzando i nuovi listener di eventi pageswap o pagereveal, che ti danno accesso all'oggetto di transizione della visualizzazione.

Con pageswap puoi apportare modifiche dell'ultimo minuto alla pagina in uscita subito prima che vengano acquisite le vecchie istantanee, mentre con pagereveal puoi personalizzare la nuova pagina prima che inizi il rendering dopo l'inizializzazione.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

In futuro, prevediamo di espandere le transizioni di visualizzazione, tra cui:

• Transizioni con ambito: consentono di limitare una transizione a un sottoalbero DOM, consentendo al resto della pagina di continuare a essere interattivo e supportando l'esecuzione simultanea di più transizioni di visualizzazione.
• Transizioni di visualizzazione basate sui gesti: utilizza i gesti di trascinamento o scorrimento per attivare una transizione di visualizzazione tra documenti per un'esperienza più nativa sul web.
• Corrispondenza della navigazione in CSS: personalizza la transizione di visualizzazione tra documenti direttamente in CSS come alternativa all'utilizzo degli eventi pageswap e pagereveal in JavaScript Per saperne di più sulle transizioni di visualizzazione per le applicazioni multipagina, incluso come configurarle nel modo più efficiente con il pre-rendering, guarda il seguente intervento di Bramus Van Damme:

Componenti UI abilitati al motore: semplificazione delle interazioni complesse

La creazione di applicazioni web complesse non è un'impresa facile, ma CSS e HTML si stanno evolvendo per rendere questo processo molto più gestibile. Nuove funzionalità e miglioramenti semplificano la creazione di componenti UI, consentendoti di concentrarti sulla creazione di esperienze straordinarie. Ciò avviene grazie a uno sforzo collaborativo che coinvolge diversi organismi di standardizzazione e gruppi della community chiave, tra cui il CSS Working Group, l'Open UI Community Group e il WHATWG (Web Hypertext Application Technology Working Group).

Uno dei principali punti critici per gli sviluppatori è una richiesta apparentemente semplice: la possibilità di applicare uno stile ai menu a discesa (l'elemento select). Sebbene all'apparenza sembri semplice, si tratta di un problema complesso che tocca molti aspetti della piattaforma: dal layout e dal rendering allo scorrimento e all'interazione, dallo stile dello user agent e dalle proprietà CSS fino alle modifiche allo stesso HTML.

Un menu a discesa è composto da molti elementi e include molti stati da prendere in considerazione, ad esempio:

• Associazioni da tastiera (per avviare/interrompere l'interazione)
• Fai clic per chiudere
• Gestione dei popup attivi (chiude gli altri popup quando ne viene aperto uno)
• Gestione dello stato attivo delle schede
• Visualizzazione del valore dell'opzione selezionata
• Stile di interazione con le frecce
• Gestione dello stato (apertura/chiusura)

Al momento è difficile gestire autonomamente tutto questo stato, ma anche la piattaforma non lo semplifica. Per risolvere il problema, abbiamo suddiviso questi elementi e stiamo implementando alcune funzionalità primitive che consentiranno di applicare stili ai menu a discesa, ma anche di fare molto di più.

API Popover

Innanzitutto, abbiamo rilasciato un attributo globale chiamato popover, che, con mio grande piacere, ha raggiunto lo stato di disponibilità di base poche settimane fa.

Gli elementi popover sono nascosti con display: none finché non vengono aperti con un invoker, ad esempio un pulsante o con JavaScript. Per creare un popover di base, imposta l'attributo popover sull'elemento e collega il relativo ID a un pulsante utilizzando popovertarget. Ora, il pulsante è l'invoker,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Con l'attributo popover ora abilitato, il browser gestisce molti comportamenti chiave senza ulteriori script, tra cui:

• Promozione al livello superiore: Un livello separato sopra il resto della pagina, in modo da non dover giocare con z-index.
• Funzionalità di chiusura rapida: Se fai clic al di fuori dell'area del popover, questo si chiuderà e il focus tornerà alla pagina.
• Gestione dello stato attivo della scheda predefinito: l'apertura del popup sposta lo stato attivo della scheda successiva all'interno del popup.
• Binding della tastiera integrata: se premi il tasto esc o lo attivi due volte, il popup si chiude e lo stato attivo di selezione viene ripristinato.
• Binding dei componenti predefiniti : il browser collega semanticamente un popup al relativo trigger.

Potresti persino utilizzare questa API popover oggi senza rendertene conto. GitHub ha implementato il popover nel menu "Novità" della home page e nella panoramica della revisione delle richieste di pull. Hanno migliorato progressivamente questa funzionalità utilizzando il polyfill popover, creato da Oddbird con il significativo supporto di Keith Cirkel di GitHub, per supportare i browser meno recenti.

"Siamo riusciti a ritirare letteralmente migliaia di righe di codice eseguendo la migrazione al popover. Il popover ci aiuta eliminando la necessità di combattere con i numeri magici dell'indice Z. La corretta relazione dell'albero di accessibilità stabilita con il comportamento dichiarativo dei pulsanti e i comportamenti di messa a fuoco integrati rendono molto più semplice per il nostro sistema di progettazione implementare i pattern nel modo giusto." - Keith Cirkel, ingegnere software, GitHub

Animare gli effetti di entrata e uscita

Quando hai dei popup, probabilmente vorrai aggiungere un po' di interazione. Nell'ultimo anno sono state introdotte quattro nuove funzionalità di interazione per supportare l'animazione dei popup. tra cui:

La possibilità di animare display e content-visibility su una sequenza temporale dei fotogrammi chiave.

La proprietà transition-behavior con la parola chiave allow-discrete per attivare le transizioni di proprietà discrete come display.

La regola @starting-style per animare gli effetti di entrata da display: none e nel livello superiore.

La proprietà di overlay per controllare il comportamento del livello superiore durante un'animazione.

Queste proprietà funzionano per qualsiasi elemento che stai animando nel livello superiore, che si tratti di un popover o di una finestra di dialogo. Nel complesso, per una finestra di dialogo con sfondo, il codice ha il seguente aspetto:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Innanzitutto, configura @starting-style, in modo che il browser sappia quali stili animare questo elemento nel DOM. Questa operazione viene eseguita sia per la finestra di dialogo sia per lo sfondo. Poi, applica uno stile allo stato aperto sia per la finestra di dialogo che per lo sfondo. Per una finestra di dialogo, utilizza l'attributo open e per un popover lo pseudo-elemento ::popover-open. Infine, anima opacity, display e overlay utilizzando la parola chiave allow-discrete per attivare la modalità di animazione in cui le proprietà discrete possono essere transitate.

Posizionamento dell'ancoraggio

Il popover è solo l'inizio della storia. Un aggiornamento molto interessante è che il supporto per il posizionamento dell'ancora è ora disponibile a partire da Chrome 125.

Utilizzando il posizionamento dell'ancora, con poche righe di codice, il browser può gestire la logica per collegare un elemento posizionato a uno o più elementi di ancoraggio. Nell'esempio seguente, una semplice descrizione comando è ancorata a ogni pulsante, posizionata nella parte inferiore centrale.

Configura una relazione di posizionamento dell'ancora in CSS utilizzando la proprietà anchor-name sull'elemento di ancoraggio (in questo caso il pulsante) e la proprietà position-anchor sull'elemento posizionato (in questo caso, la descrizione comando). Quindi, applica il posizionamento assoluto o fisso rispetto all'ancora utilizzando la funzione anchor(). Il seguente codice posiziona la parte superiore della descrizione comando nella parte inferiore del pulsante.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

In alternativa, utilizza il nome dell'ancora direttamente nella funzione di ancoraggio e salta la proprietà position-anchor. Questa opzione può essere utile quando si esegue l'ancoraggio a più elementi.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Infine, utilizza la nuova parola chiave anchor-center per le proprietà justify e align per centrare l'elemento posizionato rispetto al relativo ancoraggio.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Sebbene sia molto comodo utilizzare il posizionamento dell'ancora con il popup, il popup non è assolutamente un requisito per utilizzare il posizionamento dell'ancora. Il posizionamento dell'ancora può essere utilizzato con due o più elementi per creare una relazione visiva. Infatti, la seguente demo, ispirata a un articolo di Roman Komarov, mostra uno stile di sottolineatura ancorato agli elementi di elenco quando li passi con il mouse o li selezioni con il tasto Tab.

Questo esempio utilizza la funzione di ancoraggio per impostare la posizione di ancoraggio utilizzando le proprietà fisiche di left, right e bottom. Quando passi il mouse sopra uno dei link, l'ancora di destinazione cambia e il browser sposta la destinazione per applicare il posizionamento, animando contemporaneamente il colore per creare un effetto pulito.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area posizionamento

Oltre al posizionamento assoluto direzionale predefinito che probabilmente hai già utilizzato, è stato incluso un nuovo meccanismo di layout che fa parte dell'API di posizionamento dell'ancora chiamato area di inserimento. L'area di rientro semplifica il posizionamento degli elementi rispetto ai rispettivi ancoraggi e funziona su una griglia di 9 celle con l'elemento di ancoraggio al centro. Ad esempio, inset-area: top posiziona l'elemento posizionato in alto, mentre inset-area: bottom lo posiziona in basso.

Una versione semplificata della prima demo dell'ancora si presenta così con inset-area:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Puoi combinare questi valori posizionali con le parole chiave di intervallo per iniziare dalla posizione centrale e spostarti a sinistra, a destra o su tutta la larghezza per occupare l'intero insieme di colonne o righe disponibili. Puoi utilizzare anche le proprietà logiche. Per visualizzare e comprendere meglio questo meccanismo di layout, consulta questo strumento in Chrome 125+:

Poiché questi elementi sono ancorati, l'elemento posizionato si sposta dinamicamente nella pagina man mano che si sposta l'ancoraggio. In questo caso, abbiamo elementi della scheda con stile container-query, che vengono ridimensionati in base alle loro dimensioni intrinseche (cosa che non si poteva fare con le media query) e il menu ancorato si sposterà con il nuovo layout man mano che l'interfaccia utente della scheda cambia.

Posizioni degli annunci ancorati dinamici con position-try-options

I menu e la navigazione nei sottomenu sono molto più facili da creare con una combinazione di posizionamento di ancoraggio e popover. Inoltre, quando raggiungi il bordo di un viewport con l'elemento ancorato, puoi lasciare che il browser gestisca la modifica del posizionamento. Puoi farlo in diversi modi. Il primo consiste nel creare regole di posizionamento personalizzate. In questo caso, il sottomenu è inizialmente posizionato a destra del pulsante "vetrina". Tuttavia, puoi creare un blocco @position-try per quando non c'è spazio sufficiente a destra del menu, assegnandogli un identificatore personalizzato --bottom. Quindi, collega questo blocco @position-try all'ancora utilizzando position-try-options.

Ora il browser passerà da uno stato ancorato all'altro, provando prima la posizione corretta e poi spostandosi in basso. E questo può essere fatto con una bella transizione.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

Oltre alla logica di posizionamento esplicita, il browser fornisce alcune parole chiave se vuoi alcune interazioni di base, come capovolgere l'ancora nelle indicazioni a blocchi o in linea.

position-try-options: flip-block, flip-inline;

Per un'esperienza di inversione semplice, sfrutta questi valori delle parole chiave di inversione ed evita di scrivere del tutto una definizione position-try. In questo modo, puoi avere un elemento di ancoraggio reattivo alla posizione e completamente funzionale con poche righe di CSS.

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

Scopri di più sull'utilizzo del posizionamento dell'ancora.

Il futuro della UI a livelli

Le esperienze tethered sono ovunque e il set di funzionalità mostrato in questo post è un ottimo punto di partenza per liberare la creatività e controllare meglio gli elementi posizionati in modo ancorato e le interfacce a più livelli. Ma questo è solo l'inizio. Ad esempio, al momento popover funziona solo con i pulsanti come elemento di invocazione o con JavaScript. Per qualcosa come le anteprime in stile Wikipedia, un pattern visto su tutta la piattaforma web, è necessario poter interagire e attivare un popup da un link e dall'utente che mostra interesse senza necessariamente fare clic, ad esempio con il passaggio del mouse o la messa a fuoco della scheda.

Come passaggio successivo per l'API popover, stiamo lavorando su interesttarget per soddisfare queste esigenze e semplificare la ricreazione di queste esperienze con gli hook di accessibilità appropriati integrati. Si tratta di un problema di accessibilità difficile da risolvere, con molte domande aperte sui comportamenti ideali, ma la risoluzione e la normalizzazione di questa funzionalità a livello di piattaforma dovrebbe migliorare queste esperienze per tutti.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Inoltre, grazie al lavoro di due sviluppatori di terze parti, Keith Cirkel e Luke Warlow, è disponibile un altro invoker generale orientato al futuro (invoketarget) da testare in Canary. invoketarget supporta l'esperienza di sviluppo dichiarativa che popovertarget fornisce popup normalizzati per tutti gli elementi interattivi, inclusi <dialog>, <details>, <video>, <input type="file"> e altri ancora.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

Siamo consapevoli che esistono casi d'uso non ancora coperti da questa API. Ad esempio, lo stile della freccia che collega un elemento ancorato alla sua ancora, soprattutto quando la posizione dell'elemento ancorato cambia, e l'attivazione di un elemento per “scorrere” e rimanere nell'area visibile anziché allinearsi a un'altra posizione impostata quando raggiunge il suo riquadro di delimitazione. Siamo entusiasti di questa potente API, ma non vediamo l'ora di espandere ulteriormente le sue funzionalità in futuro.

Selezione con stile

Utilizzando popover e anchor insieme, il team ha fatto progressi per consentire finalmente un menu a discesa di selezione personalizzabile. La buona notizia è che sono stati fatti molti progressi. La cattiva notizia è che al momento questa API è ancora in fase sperimentale. Tuttavia, sono felice di condividere alcune demo live e aggiornamenti sui nostri progressi e spero di ricevere alcuni dei vostri feedback. Innanzitutto, sono stati fatti progressi su come attivare per gli utenti la nuova esperienza di selezione personalizzabile. Il modo attuale, ancora in fase di sviluppo, per farlo è utilizzare una proprietà di aspetto in CSS, impostata su appearance: base-select. Una volta impostato l'aspetto, verrà attivata una nuova esperienza di selezione personalizzabile.

select {
  appearance: base-select;
}

Oltre a appearance: base-select, sono disponibili alcuni nuovi aggiornamenti HTML. Questi includono la possibilità di racchiudere le opzioni in un datalist per la personalizzazione e la possibilità di aggiungere contenuti non interattivi arbitrari come immagini nelle opzioni. Avrai anche accesso a un nuovo elemento, <selectedoption>, che rifletterà il contenuto delle opzioni al suo interno, che potrai poi personalizzare in base alle tue esigenze. Questo elemento è molto utile.

Elemento visivo della demo

Demo live

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Il seguente codice mostra la personalizzazione di <selectedoption> nella UI di Gmail, dove un'icona visiva rappresenta il tipo di risposta selezionato per risparmiare spazio. Puoi utilizzare gli stili di visualizzazione di base in selectedoption per differenziare lo stile delle opzioni da quello dell'anteprima. In questo caso, il testo visualizzato nell'opzione può essere nascosto visivamente in selectedoption.

Elemento visivo della demo

Demo live

selectedoption .text {
  display: none;
}

Uno dei maggiori vantaggi del riutilizzo dell'elemento <select> per questa API è la compatibilità con le versioni precedenti. In questa selezione di paesi, puoi visualizzare un'interfaccia utente personalizzata con immagini di bandiere nelle opzioni per facilitare l'analisi dei contenuti da parte degli utenti. Poiché i browser non supportati ignorano le righe che non comprendono, come il pulsante personalizzato, l'elenco dati, selectedoption e le immagini all'interno delle opzioni, il fallback sarà simile all'attuale UI di selezione predefinita.

Con le selezioni personalizzabili, le possibilità sono infinite. Mi piace particolarmente questo selettore di paesi in stile Airbnb perché ha uno stile intelligente per il responsive design. Puoi fare questo e molto altro con la prossima selezione con stili, che la rende un'aggiunta molto necessaria alla piattaforma web.

Accordion esclusivo

La risoluzione di problemi di stile selezionati (e di tutti gli elementi correlati) non è l'unico componente dell'interfaccia utente su cui si è concentrato il team di Chrome. Il primo aggiornamento dei componenti aggiuntivi è la possibilità di creare fisarmoniche esclusive, in cui è possibile aprire un solo elemento alla volta.

Per abilitare questa funzionalità, applica lo stesso valore del nome a più elementi di dettaglio, creando così un gruppo di dettagli connessi, in modo simile a un gruppo di pulsanti di opzione.

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid e :user-invalid

Un altro miglioramento dei componenti della UI riguarda le pseudo-classi :user-valid e :user-invalid. Stabili di recente in tutti i browser, le pseudo-classi :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. Ciò significa che è necessario molto meno codice per determinare se un valore del modulo è stato utilizzato o è diventato "sporco", il che può essere molto utile per fornire feedback agli utenti e riduce molti script che sarebbero necessari per farlo in passato.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

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

field-sizing: content

Un altro aggiornamento utile dei componenti implementato di recente è field-sizing: content, che può essere applicato ai controlli modulo come input e aree di testo. In questo modo, le dimensioni dell'input possono aumentare o diminuire a seconda dei contenuti. field-sizing: content può essere particolarmente utile per le aree di testo, in quanto non sono più limitate a dimensioni fisse in cui potrebbe essere necessario scorrere verso l'alto per vedere cosa hai scritto nelle parti precedenti del prompt in una casella di immissione troppo piccola.

textarea, select, input {
  field-sizing: content;
}

Scopri di più sul dimensionamento dei campi.

<hr> in <select>

La possibilità di attivare l'elemento <hr> o la regola orizzontale nelle selezioni è un'altra funzionalità dei componenti piccola ma utile. Sebbene non abbia un grande utilizzo semantico, ti aiuta a separare bene i contenuti all'interno di un elenco di selezione, in particolare i contenuti che potresti non voler necessariamente raggruppare con un'opzione, come un valore segnaposto.

Seleziona Screenshot

Seleziona Demo dal vivo

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Scopri di più sull'utilizzo di hr in select

Miglioramenti della qualità della vita

Siamo in continua evoluzione e non solo per quanto riguarda interazioni e componenti. Nell'ultimo anno sono stati rilasciati molti altri aggiornamenti che migliorano la qualità della vita.

Nidificazione con lookahead

L'annidamento CSS nativo è stato implementato in tutti i browser l'anno scorso e da allora è stato migliorato per supportare la prelettura, il che significa che & prima dei nomi degli elementi non è più un requisito. In questo modo, l'annidamento risulta molto più ergonomico e simile a quello a cui ero abituato in passato.

Uno degli aspetti che preferisco dell'annidamento CSS è che consente di bloccare visivamente i componenti e, all'interno di questi componenti, includere stati e modificatori, come query sui contenitori e query supporti. In precedenza, ero solito raggruppare tutte queste query nella parte inferiore del file per motivi di specificità. Ora puoi scriverli in modo sensato, proprio accanto al resto del codice.

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Align-content per il layout a blocchi

Un altro cambiamento molto interessante è la possibilità di utilizzare meccanismi di centratura come align-content nel layout a blocchi. Ciò significa che ora puoi eseguire operazioni come il centraggio verticale all'interno di un div senza dover applicare il layout flessibile o a griglia e senza effetti collaterali come l'impedimento del collasso dei margini, che potresti non volere da questi algoritmi di layout.

Screenshot

Demo live

div {
  align-content: center;
}

Disposizione del testo: bilanciata e carina

A proposito di layout, il layout del testo è stato migliorato con l'aggiunta di text-wrap: balance e pretty. text-wrap: balance viene utilizzato per un blocco di testo più uniforme, mentre text-wrap: pretty si concentra sulla riduzione delle parole isolate nell'ultima riga del testo.

h1 {
  text-wrap: balance;
}

Scopri di più su text-wrap: balance.

Aggiornamenti della tipografia internazionale

Gli aggiornamenti del layout tipografico per le funzionalità di testo CJK hanno ricevuto molti aggiornamenti interessanti nell'ultimo anno, come la funzionalità word-break: auto-phrase che va a capo in corrispondenza del confine naturale della frase.

e text-spacing-trim, che applica la crenatura tra i segni di punteggiatura per migliorare la leggibilità della tipografia cinese, giapponese e coreana e ottenere risultati più piacevoli alla vista.

Sintassi del colore relativo

Nel mondo dei temi di colore, abbiamo visto un grande aggiornamento con la sintassi dei colori relativi.

In questo esempio, i colori utilizzano i temi basati su Oklch. Man mano che il valore della tonalità si adatta in base al cursore, l'intero tema cambia. Ciò può essere ottenuto con la sintassi del colore relativo. Lo sfondo utilizza il colore principale, in base alla tonalità, e regola i canali di luminosità, croma e tonalità per modificarne il valore. --i è l'indice del fratello nell'elenco per la gradazione dei valori, che mostra come combinare la progressione con proprietà personalizzate e la sintassi dei colori relativi per creare temi.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

Funzione light-dark()

Insieme alla funzione light-dark(), la creazione di temi è diventata molto più dinamica e semplificata.

La funzione light-dark() è un miglioramento ergonomico che semplifica le opzioni di temi a colori, in modo da poter scrivere gli stili dei temi in modo più conciso, come dimostrato in modo chiaro in questo diagramma visivo di Adam Argyle. In precedenza, per configurare le opzioni dei temi erano necessari due blocchi di codice diversi (il tema predefinito e una query sulle preferenze dell'utente). Ora, puoi scrivere queste opzioni di stile per i temi chiari e scuri nella stessa riga di CSS utilizzando la funzione light-dark().

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

Se l'utente ha selezionato un tema chiaro, il pulsante avrà uno sfondo blu chiaro. Se l'utente ha selezionato un tema scuro, il pulsante avrà uno sfondo blu scuro.

Selettore :has()

E non potrei parlare di UI moderne senza menzionare uno dei punti salienti dell'interoperabilità più significativi dell'ultimo anno, ovvero il selettore :has(), disponibile su tutti i browser da dicembre dello scorso anno. Questa API è rivoluzionaria per la scrittura di stili logici.

Il selettore :has() ti consente di verificare se un elemento secondario ha elementi secondari specifici o se questi elementi secondari si trovano in uno stato specifico e può fungere anche da selettore principale.

:has() si è già dimostrato particolarmente utile per molte aziende, tra cui PolicyBazaar, che utilizza :has() per applicare uno stile ai blocchi in base ai contenuti interni, ad esempio nella sezione di confronto, dove lo stile si adatta se è presente un piano da confrontare nel blocco o se è vuoto.

"Con il selettore :has(), siamo riusciti a eliminare la convalida basata su JavaScript della selezione dell'utente e a sostituirla con una soluzione CSS che funziona perfettamente per noi con la stessa esperienza di prima.– Aman Soni, Tech Lead, PolicyBazaar"

Query sui container

Un'altra aggiunta fondamentale al web, ora disponibile e in crescita di utilizzo, sono le query sui contenitori, che consentono di eseguire query sulle dimensioni intrinseche di un elemento padre per applicare gli stili: uno strumento molto più preciso rispetto alle query supporti, che eseguono query solo sulle dimensioni del viewport.

Angular ha recentemente lanciato un nuovo sito di documentazione su angular.dev utilizzando le query sui contenitori per applicare lo stile ai blocchi di intestazione in base allo spazio disponibile nella pagina. Quindi, anche se il layout cambia e passa da un layout della barra laterale a più colonne a un layout a una sola colonna, i blocchi di intestazione possono autoregolarsi.

Senza le query sui contenitori, ottenere un risultato simile era piuttosto difficile e dannoso per le prestazioni, in quanto richiedeva osservatori di ridimensionamento e di elementi. Ora, è banale applicare uno stile a un elemento in base alle dimensioni del relativo elemento padre.

@property

Infine, siamo felici di annunciare che a breve @property verrà aggiunto a Baseline. Si tratta di una funzionalità chiave per fornire un significato semantico alle proprietà personalizzate CSS (note anche come variabili CSS) e consente una serie di nuove funzionalità di interazione. @property consente inoltre di utilizzare significato contestuale, controllo del tipo, valori predefiniti e di riserva in CSS. Apertura delle porte a funzionalità ancora più robuste come le query di stile di intervallo. Si tratta di una funzionalità che non è mai stata possibile prima e che ora fornisce una grande profondità al linguaggio CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Conclusione

Con tutte queste nuove e potenti funzionalità dell'interfaccia utente disponibili su tutti i browser, le possibilità sono infinite. Nuove esperienze interattive con animazioni basate sullo scorrimento e transizioni di visualizzazione rendono il web più fluido e interattivo in modi mai visti prima. Inoltre, i componenti dell'UI di livello successivo rendono più facile che mai creare componenti robusti e personalizzati in modo ottimale senza eliminare l'intera esperienza nativa. Infine, i miglioramenti della qualità della vita in termini di architettura, layout, tipografia e design reattivo non solo risolvono i piccoli grandi problemi, ma forniscono anche agli sviluppatori gli strumenti necessari per creare interfacce complesse che funzionano su una varietà di dispositivi, fattori di forma ed esigenze degli utenti.

Queste nuove funzionalità ti consentono di rimuovere gli script di terze parti per le funzionalità che richiedono molte risorse, come lo scrollytelling e il collegamento degli elementi tra loro con il posizionamento dell'ancora, creare transizioni di pagina fluide, infine applicare uno stile ai menu a discesa e migliorare la struttura complessiva del codice in modo nativo.

Non è mai stato un momento migliore per essere uno sviluppatore web. Non si vedeva tanto entusiasmo dall'annuncio di CSS3. Funzionalità che abbiamo sempre desiderato ma che in passato potevamo solo sognare stanno finalmente diventando realtà e parte della piattaforma. È grazie alla tua voce che possiamo dare la priorità a queste funzionalità e finalmente realizzarle. Stiamo lavorando per semplificare le attività più difficili e noiose in modo nativo, così potrai dedicare più tempo alla creazione di ciò che conta, come le funzionalità principali e i dettagli di design che distinguono il tuo brand.

Per saperne di più su queste nuove funzionalità man mano che vengono implementate, visita developer.chrome.com e web.dev, dove il nostro team condivide le ultime novità sulle tecnologie web. Prova le animazioni basate sullo scorrimento, le transizioni di visualizzazione, il posizionamento degli ancoraggi o anche la selezione con stili e facci sapere cosa ne pensi. Siamo qui per ascoltarti e aiutarti.