Novità dell'interfaccia utente web: riepilogo dell'I/O 2025

Una Kravets

Data di pubblicazione: 14 agosto 2025

Con la conclusione della stagione degli eventi Google I/O, questo post riassume i principali momenti salienti per CSS e UI web condivisi durante gli eventi di quest'anno.

Funzionalità incredibilmente potenti che un tempo gli sviluppatori potevano solo sognare sono arrivate nei browser e stanno raggiungendo la compatibilità cross-browser più velocemente che mai. Tuttavia, nonostante questi progressi, alcuni dei pattern UI più comuni rimangono sorprendentemente difficili da implementare correttamente. Spesso devi fare affidamento su framework JavaScript, trucchi CSS complessi e montagne di codice personalizzato per creare componenti che dovrebbero essere più semplici.

Il team di Chrome, in collaborazione con altri fornitori di browser, enti di standardizzazione come CSSWG e WHATWG e gruppi della community come Open UI, si sta concentrando sul rendere questi pattern fondamentali dell'interfaccia utente davvero semplici da implementare.

Menu di selezione personalizzabili

L'elemento <select> è essenziale per i moduli, ma la sua struttura interna è sempre stata protetta dal browser, rendendo quasi impossibile uno stile CSS coerente e completo. Per creare un <select> migliore è necessario comprendere i suoi elementi costitutivi: l'API Popover e l'API CSS Anchor Positioning.

L'API Popover: ora in Baseline

Un menu a discesa personalizzato richiede una casella mobile di opzioni che appare sopra tutti gli altri elementi dell'interfaccia utente, è facile da chiudere e gestisce correttamente lo stato attivo. L'API Popover gestisce tutto questo e, a partire da quest'anno, ha raggiunto lo stato Baseline Newly available, il che significa che è stabile in tutti i principali browser.

La creazione di un popover richiede due parti: un elemento trigger (ad esempio un <button>) e l'elemento popover stesso. Collega i due elementi fornendo al popup un id e l'attributo [popover], quindi fai riferimento a id nell'attributo [popovertarget] del pulsante.

L'API Popover gestisce l'intero ciclo di vita dell'elemento, fornendo:

• Rendering del livello superiore: non dovrai più preoccuparti dello z-index.
• Funzionalità di chiusura leggera facoltative: si chiude quando un utente fa clic all'esterno dell'area del popover.
• Gestione automatica dello stato attivo: il browser gestisce la navigazione tra le schede all'interno e all'esterno del popup.
• Binding accessibili: il modello di interazione sottostante viene gestito in modo nativo.

L'elemento <dialog> viene aggiornato

Sebbene il popover sia potente, non è sempre la scelta giusta. Ad esempio, nelle interazioni di blocco della pagina che richiedono il feedback dell'utente, è più appropriata una finestra modale <dialog>.

In passato, <dialog> non offriva alcune delle comodità di [popover], ma la situazione sta cambiando. Con il nuovo attributo closedby="any", le finestre di dialogo modali ora supportano la funzionalità di chiusura leggera, che si chiude quando l'utente fa clic all'esterno o preme il tasto Esc.

Inoltre, gli invocatori di comandi ([command] e [commandfor]) forniscono un modo dichiarativo e senza JavaScript per collegare un pulsante a un'azione, ad esempio l'apertura di una finestra di dialogo con command="show-modal".

Posizionamento dell'ancoraggio CSS

Una volta visualizzato un popover, deve essere posizionato rispetto all'elemento che lo ha aperto. Il calcolo manuale con JavaScript è fragile e può influire negativamente sul rendimento.

A partire da Chrome 125, puoi utilizzare l'API CSS Anchor Positioning. Questa nuova funzionalità collega in modo dichiarativo un elemento a un altro, gestendo automaticamente il riposizionamento quando si avvicina al bordo dello schermo. Questa funzionalità fa parte di Interop 2025, un'iniziativa cross-browser per implementare le funzionalità più richieste, il che significa che possiamo aspettarci che sia disponibile in tutti i principali browser entro la fine del 2025.

Sebbene tu possa collegare esplicitamente gli elementi con le proprietà anchor-name e position-anchor, un aggiornamento nella specifica e in Chrome 133 crea una relazione di ancoraggio implicita tra un <popover> e il relativo <button> di chiamata. Ciò semplifica notevolmente il codice e significa che ora puoi posizionare il popover con una sola riga di CSS, ad esempio: position-area: bottom span-left.

Lo strumento di ancoraggio di chrome.dev mostra come utilizzare position-area per ottenere il posizionamento che ti interessa:

Fai un ulteriore passo avanti e fai in modo che il browser riposizioni gli ancoraggi, impedendo che escano dallo schermo, definendo i fallback con position-try-fallbacks. La seguente demo mostra un popover che utilizza questa proprietà per la logica di riposizionamento integrata:

Un'esperienza davvero personalizzabile <select>

Con questi elementi costitutivi nelle versioni precedenti, lo stile nativo per il web per gli elementi <select> è finalmente arrivato in Chrome 134. Sono inclusi una nuova proprietà appearance, nuovi pseudo-elementi e l'elemento <selectedcontent>.

Per sbloccare la personalizzazione, applica appearance: base-select; all'elemento <select> e al suo nuovo pseudo-elemento ::picker(select), che ha come target l'elenco a discesa delle opzioni. Vengono esposte nuove parti interne per lo stile, tra cui:

• <selectedcontent>: rappresenta il contenuto dell'opzione selezionata mostrata nel pulsante.
• ::picker-icon: l'icona freccia menu a discesa
• <option>:checked e ::checkmark: per applicare lo stile all'opzione selezionata e al relativo indicatore di segno di spunta

Ciò consente di inserire contenuti avanzati all'interno delle opzioni e di controllare in modo granulare la visualizzazione. Ad esempio, puoi mostrare un'icona e un sottotitolo nell'elenco delle opzioni, ma nasconderli nello stato chiuso utilizzando display: none all'interno di selectedcontent.

Il vantaggio principale è che questa API può essere migliorata progressivamente. Nei browser che non supportano queste funzionalità, gli utenti continueranno a visualizzare un selettore web nativo funzionale. Ottieni un aspetto personalizzato preservando l'accessibilità integrata, la navigazione da tastiera e l'integrazione dei moduli dell'elemento di selezione nativo del web.

Caroselli

I caroselli sono ovunque sul web, non solo nelle sezioni hero. Sono inclusi i contenuti scorrevoli orizzontalmente in layout compatti come l'interfaccia utente di uno store. Tuttavia, la creazione di caroselli sul web è ancora difficile, con molte considerazioni da fare, come la gestione dello stato, lo scorrimento a scatti, l'interattività e l'accessibilità. Ma se ci pensi, i caroselli sono essenzialmente aree di scorrimento sofisticate con ulteriori funzionalità dell'interfaccia utente.

Introduzione agli scroller

Per creare un carosello, inizia con un elenco di elementi che superano il contenitore. Per nascondere la barra di scorrimento orizzontale mantenendo i contenuti scorrevoli, utilizza scrollbar-width: none. Inoltre, per rendere lo scorrimento più "scattante", applica scroll-snap-type e scroll-snap-align, che assicurano che gli elementi si blocchino in posizione mentre l'utente scorre la pagina.

Precedente e successivo con un ::scroll-button

Il nuovo pseudo-elemento ::scroll-button(), introdotto in Chrome 135, indica al browser di generare pulsanti "Avanti" e "Indietro" accessibili e con stato. Il browser gestisce automaticamente i ruoli ARIA corretti, l'ordine di tabulazione e disattiva persino i pulsanti quando raggiungi l'inizio o la fine, il tutto senza JavaScript aggiuntivo.

Per avviare i pulsanti di scorrimento, fornisci loro contenuti e un'etichetta accessibile, come segue:

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

Applica uno stile a questi pulsanti e posizionali rispetto al carosello principale con il posizionamento dell'ancora CSS, che è l'approccio consigliato.

Navigazione diretta con ::scroll-marker

Per gli indicatori a punti o le miniature, gli pseudo-elementi ::scroll-marker e ::scroll-marker-group associano i marcatori di navigazione direttamente agli elementi nel contenitore di scorrimento. Il browser tratta il gruppo come un tablist e gestisce la navigazione da tastiera.

Analogamente ai pulsanti di scorrimento, avvia i marcatori di scorrimento attivando la proprietà content e fornendo un'etichetta accessibile. Nell'esempio seguente, un attributo dati viene utilizzato per impostare l'etichetta per il marcatore di scorrimento. Inoltre, posiziona i segni di scorrimento in ::scroll-marker-group utilizzando la proprietà scroll-marker-group. Infine, applica uno stile al marcatore attivo utilizzando la nuova pseudo-classe :target-current. Ecco un esempio di come potrebbe apparire per un carosello di base:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

Query sullo stato di scorrimento

Le nuove funzionalità CSS correlate allo scorrimento ti consentono di creare caroselli più dinamici e interattivi. La query sullo stato di scorrimento è una nuova media query che viene applicata in base allo stato di uno scorrimento. Esistono tre diversi tipi di query sullo stato di scorrimento, a cui è possibile accedere utilizzando scroll-state() in un'istruzione @container. Sono:

• scroll-state(snapped): corrisponde quando un elemento si trova nella posizione "agganciata". Nei caroselli, è l'elemento al centro del carosello.
• scroll-state(stuck): applica uno stile a un elemento, ad esempio un'intestazione, quando il relativo elemento principale diventa fisso.
• scroll-state(scrollable): aggiungi indicatori visivi, ad esempio una dissolvenza, per mostrare che ci sono altri contenuti da scorrere.

Riepilogo

Una combinazione di nuove primitive del carosello CSS, query sullo stato di scorrimento e posizionamento dell'ancora semplifica la creazione di caroselli personalizzati e interattivi. Fai un ulteriore passo avanti incorporando le animazioni basate sullo scorrimento per collegare le animazioni direttamente alla posizione di scorrimento, creando effetti performanti come la scalabilità e la dissolvenza degli elementi man mano che scorrono nella visualizzazione. Queste animazioni vengono eseguite al di fuori del thread principale, consentendo un'esperienza fluida.

Questo carosello interattivo combina query scroll-state(), ::scroll-button, ::scroll-marker, posizionamento dell'ancora CSS e :target-current.

Inoltre, puoi utilizzare una nuova proprietà chiamata interactivity per aiutare gli utenti a concentrarsi sui contenuti attivi. interactivity: inert consente all'utente di applicare l'inerzia utilizzando CSS, rendendo gli elementi del carosello fuori dallo schermo non selezionabili e rimuovendoli dall'albero di accessibilità.

Scopri di più sui caroselli CSS.

Hovercard interattive

Le schede al passaggio del mouse, i popup avanzati che vengono visualizzati quando passi il mouse sopra un nome utente o un link, sono incredibilmente utili, ma notoriamente difficili da creare correttamente. Per ottenere i ritardi, la gestione degli eventi e il supporto multi-dispositivo giusti, un team dedicato può impiegare mesi. Tuttavia, stiamo lavorando a una nuova soluzione dichiarativa che dovrebbe risolvere il problema una volta per tutte.

Popover attivati dall'interesse con [interestfor]

La magia principale alla base delle schede popup dichiarative è l'attributo[interestfor]. Questa funzionalità in arrivo offre la potenza dei popup, ma li attiva in base all'interesse dell'utente. Ad esempio, l'interesse dell'utente su un dispositivo di puntamento potrebbe essere il passaggio del mouse, la navigazione a schede con una tastiera o una pressione prolungata o un tocco sui touchscreen. L'interazione mobile deve ancora essere risolta.

Per convertire un popover basato sui clic in uno basato sugli interessi, crea un elemento di chiamata, che può essere un <button> o un <a>, e assegnagli un attributo [interestfor] uguale all'id dell'elemento [popover]. In HTML, ha il seguente aspetto:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

Il browser gestisce tutta la logica complessa degli eventi, tra cui:

• Eventi di entrata e uscita:passaggio del mouse su dispositivi di puntamento di precisione, navigazione a schede con la tastiera, pressione prolungata o tocco su dispositivi di puntamento grossolani.
• Ritardi degli eventi:controlla i ritardi di entrata e uscita con una singola proprietà CSS.

Questa funzionalità supporta altre funzionalità popover, come il supporto del livello superiore, in cui il popover viene visualizzato su un nuovo livello sopra il resto dell'albero DOM. I binding dei componenti semantici e il modello di struttura ad albero di accessibilità sottostante vengono gestiti in modo nativo.

Invoker di stili

Gli invoker degli interessi includono alcune nuove funzionalità. Una di queste è la possibilità di controllare i ritardi di ingresso e uscita utilizzando una proprietà CSS: interest-target-delay. L'altra è la possibilità di applicare uno stile all'elemento di chiamata in base alla presenza o meno di interesse, utilizzando la pseudoclasse :has-interest.

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" e UI multifunzionale

Un elemento chiave del puzzle per gli invoker di interessi è un nuovo tipo di popover: popover="hint". La principale differenza rispetto ad altri popup è che un popup di suggerimento non chiude gli altri popup quando si apre. È perfetto per le descrizioni comando o le schede di anteprima che devono essere visualizzate senza chiudere un menu o una finestra di chat già aperti.

In questo modo puoi creare in modo dichiarativo interfacce utente potenti e multifunzionali. Ora un singolo pulsante può avere un popup automatico che utilizza popovertarget per l'azione di clic principale (ad esempio l'apertura di un pannello delle notifiche) e un popup di suggerimento richiamato dall'interesse per mostrare un suggerimento utile al passaggio del mouse.

Il futuro è dichiarativo

Le funzionalità trattate qui rappresentano un cambiamento fondamentale verso una piattaforma web più potente e dichiarativa. Consentendo al browser di gestire il lavoro complesso e ripetitivo di gestione dello stato e accessibilità, possiamo rimuovere montagne di JavaScript, migliorare le prestazioni e concentrarci su ciò che sappiamo fare meglio: creare esperienze utente innovative e coinvolgenti. Questo è davvero un periodo d'oro per la UI web, e siamo solo all'inizio. Seguici qui mentre lavoriamo per creare un web più potente e semplice.

Altre risorse:

• API Popover
• Posizionamento dell'ancoraggio
• Strumento Ancoraggio
• Invoker di comandi
• Menu di selezione personalizzabili (RFC)
• Caroselli CSS
• Galleria con vista a sequenza CSS
• Configuratore del carosello CSS
• Query sullo stato di scorrimento CSS
• Interest Invokers Explainer