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 la UI web, con nuove funzionalità CSS che vengono implementate nei browser a una velocità mai vista 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 al 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, quando 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 nella finestra stessa, 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 scorrimento (che in questo caso è anche la finestra).

È importante tenere presente il supporto del browser e le preferenze degli utenti, in particolare 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 più vicino e lo stesso intervallo di animazione, dalla parte superiore della pagina a 150 pixel.

Vantaggi in termini di rendimento 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à, sia che utilizzi la nuova API direttamente in CSS sia che utilizzi gli hook JavaScript.

Tokopedia ha utilizzato di recente le 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 basi delle 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. È una serie di video fantastica da guardare.

Visualizzare le 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 servizi, 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 una sola pagina è semplice: basta 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 il passaggio di molti 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 rispetto a come la pagina del blog torna alla home page. Oppure potresti voler scambiare le pagine in modi diversi, come in questo esempio, andando da sinistra a destra e viceversa. Prima era difficile. Potevi aggiungere classi al DOM per applicare stili e poi dovevi rimuoverle. I tipi di transizione di visualizzazione consentono al browser di pulire le vecchie transizioni, evitando che tu debba farlo manualmente prima di avviarne di nuove.

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

Ciò che rende il web potente è la 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 su 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 nel 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

Creare 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 attraverso uno sforzo collaborativo che coinvolge diversi enti 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 in 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 ai cambiamenti dello 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 attiva dei popup (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 predefinita dello stato attivo delle schede: L'apertura del popup fa sì che il successivo punto di tabulazione si trovi all'interno del popup.
• Scorciatoie da tastiera integrate: Se premi il tasto esc o se attivi/disattivi due volte, il popover si chiude e lo stato attivo di selezione torna alla posizione precedente.
• Associazioni dei componenti predefinite. : Il browser collega semanticamente un popover al relativo trigger.

Potresti persino utilizzare questa API popover oggi senza rendertene conto. GitHub ha implementato il popup 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 un importante supporto di Keith Cirkel di GitHub, per supportare i browser meno recenti.

"Abbiamo gestito il ritiro di letteralmente migliaia di righe di codice eseguendo la migrazione al popover. Il popover ci aiuta eliminando la necessità di combattere con i numeri z-index magici… 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, l'aspetto è il seguente:

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

Posizionamento dell'ancoraggio

Il popover era 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 dell'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 consente di posizionare facilmente gli elementi posizionati 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 in entrambe le direzioni per occupare l'intero insieme di colonne o righe disponibili. Puoi anche utilizzare le proprietà logiche. Per visualizzare e comprendere più facilmente questo meccanismo di layout, dai un'occhiata a questo strumento in Chrome 125 e versioni successive:

Poiché questi elementi sono ancorati, l'elemento posizionato si sposta dinamicamente nella pagina man mano che si sposta l'ancora. 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 ancoraggi 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 una finestra con l'elemento ancorato, puoi lasciare che il browser gestisca anche 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 del tutto di scrivere una definizione di position-try. Ora puoi avere un elemento ancorato completamente funzionale e reattivo alla posizione 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 dell'interfaccia utente 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 avere un maggiore controllo sugli elementi posizionati in modo ancorato e sulle interfacce a più livelli. Ma questo è solo l'inizio. Ad esempio, al momento popover funziona solo con i pulsanti come elemento di chiamata o con JavaScript. Per elementi come le anteprime in stile Wikipedia, un pattern presente su tutta la piattaforma web, è necessario che sia possibile 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 a 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 generico 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 nella finestra visualizzabile anziché spostarsi in un'altra posizione impostata quando raggiunge il suo riquadro di selezione. 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. Queste includono la possibilità di racchiudere le opzioni in un datalist per la personalizzazione e 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 è davvero utile.

Elemento visivo 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 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, datalist, 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.

Exclusive accordion

La risoluzione di problemi di stile (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 accordion esclusivi, in cui è possibile aprire un solo elemento alla volta.

Per abilitare questa opzione, 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 dell'interfaccia utente riguarda le pseudoclassi :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 rilasciato di recente è field-sizing: content, che può essere applicato ai controlli modulo come input e aree di testo. In questo modo, la dimensione dell'input può 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 input 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 in modo efficace i contenuti all'interno di un elenco di selezione, in particolare i contenuti che potresti non voler necessariamente raggruppare con un'opzione di gruppo, 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

Iteriamo costantemente e non solo per interazioni e componenti. Nell'ultimo anno sono stati rilasciati molti altri aggiornamenti che migliorano la qualità della vita.

Nesting 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 è molto più ergonomico e simile a quello a cui ero abituato in passato.

Una delle cose che preferisco dell'annidamento CSS è che ti consente di bloccare visivamente i componenti e di includere stati e modificatori, come le query sui contenitori e le media query. 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 dei caratteri singoli nell'ultima riga del testo.

h1 {
  text-wrap: balance;
}

Scopri di più su text-wrap: balance.

Aggiornamenti alla 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 visivamente più piacevoli.

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à viene regolato 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 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 di colore, in modo da poter scrivere gli stili dei temi in modo più conciso, come dimostrato in modo eccellente in questo diagramma visivo di Adam Argyle. In precedenza, per configurare le opzioni del tema erano necessari due blocchi di codice diversi (il tema predefinito e una query delle preferenze dell'utente). Ora puoi scrivere queste opzioni di stile per i temi chiaro e scuro 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 azzurro 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 degli aspetti di interoperabilità più importanti dell'ultimo anno, ovvero il selettore :has(), disponibile su tutti i browser da dicembre dello scorso anno. Questa API è una svolta 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 principale.

@property

Infine, a breve, non vediamo l'ora di vedere @property in 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. Apre le 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 dei 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'interfaccia utente di livello successivo rendono più facile che mai creare componenti robusti e personalizzati in modo impeccabile senza dover 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.

Con queste nuove funzionalità dovresti essere in grado 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 ed energia dall'annuncio di CSS3. Funzionalità che abbiamo sempre desiderato ma che in passato abbiamo solo sognato di vedere implementate, 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 le pagine 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 stile e facci sapere cosa ne pensi. Siamo qui per ascoltarti e aiutarti.