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

Una Kravets

La piattaforma web è in continua evoluzione e le funzionalità CSS e UI web sono all'avanguardia di 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 analizzerà in modo approfondito lo stato attuale del CSS, esplorando alcune delle nuove funzionalità più rivoluzionarie che stanno ridefinendo il modo in cui creiamo le applicazioni web, mostrate in diretta a 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 con gli utenti di qualità. Stiamo lavorando a miglioramenti davvero importanti che sbloccano funzionalità mai viste prima sul web per la navigazione all'interno e tra le pagine web.

Animazioni basate sullo scorrimento

Come suggerisce il nome, l'API Animations driven by scroll ti consente di creare animazioni dinamiche basate sullo scorrimento senza fare affidamento su osservatori dello scorrimento o altri script complessi.

Creare animazioni basate sullo scorrimento

Analogamente al funzionamento delle animazioni basate sul tempo sulla piattaforma, ora puoi utilizzare l'avanzamento dello scorrimento di un cursore per avviare, mettere in pausa e invertire un'animazione. Quindi, quando scorri verso l'alto, vedrai l'animazione avanzare e quando scorri verso il basso, l'animazione verrà riprodotta al contrario. In questo modo puoi creare immagini parziali o a pagina intera con elementi che si animano all'interno e all'interno dell'area visibile, nota anche come scrollytelling, per un impatto visivo dinamico.

Le animazioni basate sullo scorrimento possono essere utilizzate per mettere in evidenza contenuti importanti, guidare gli utenti attraverso una storia o semplicemente aggiungere un tocco dinamico alle 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 una semplice animazione visualizzata nell'area visibile modificando l'opacità e la scala di un'immagine. L'animazione è basata sulla 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 allo scrollport (che in questo caso è anche la visualizzazione).

È importante tenere a mente il supporto del browser e le preferenze dell'utente, in particolare per le esigenze di accessibilità. Pertanto, utilizza la regola @supports per verificare se il browser supporta animazioni basate sullo scorrimento e aggregare l'animazione tramite scorrimento in una query di preferenza dell'utente come @media (prefers-reduced-motion: no-preference) in modo da rispettare le preferenze di movimento degli utenti. Dopo aver effettuato questi controlli, sai che gli stili funzioneranno e che l'animazione non rappresenta un problema per l'utente.

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

Le animazioni basate sullo scorrimento possono rappresentare esperienze di scorrimento a pagina intera, ma possono anche significare animazioni più sottili, come una barra dell'intestazione che riduce al minimo e mostra un'ombra quando si scorre 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 di fotogrammi chiave diverse (intestazione, testo, barra di navigazione e sfondo) e applica a ciascuna la rispettiva animazione basata sullo scorrimento. Sebbene abbiano ciascuno uno stile di animazione diverso, hanno tutti la stessa sequenza temporale, lo stesso cursore più vicino e lo stesso intervallo di animazione, dalla parte superiore della pagina a 150 pixel.

Vantaggi delle prestazioni delle animazioni basate sullo scorrimento

Questa API integrata riduce il carico di codice da gestire, che si tratti di script personalizzati scritti o dell'inclusione di un'ulteriore dipendenza di terze parti. Inoltre, elimina la necessità di implementare vari osservatori dello scorrimento, il che significa alcuni vantaggi di rendimento piuttosto significativi. Questo perché le animazioni basate sullo scorrimento funzionano nel thread principale quando vengono animate proprietà che possono essere animate nel compositore, come le trasformazioni e l'opacità, indipendentemente dal fatto che tu stia utilizzando la nuova API direttamente in CSS o gli hook JavaScript.

Di recente Tokopedia ha utilizzato animazioni basate sullo scorrimento per mostrare la barra di navigazione dei prodotti durante lo scorrimento. L'utilizzo di questa API ha portato alcuni vantaggi seri, sia per la gestione del codice che per le prestazioni.

"Siamo riusciti a ridurre fino all'80% delle 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à non solo di utilizzare nuove sequenze temporali di animazione, ma anche di utilizzare un punto di scorrimento per attivare l'inizio di un'animazione, chiamate animazioni attivate tramite scorrimento.

In futuro, saranno disponibili altre funzionalità di scorrimento nei browser. 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, semplificando la sincronizzazione dei dati con l'evento scattato.

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

Al momento, queste funzionalità sono disponibili solo in Canary dietro un flag, ma sbloccano funzionalità che in precedenza erano impossibili o molto difficili da creare nella piattaforma e mettono in evidenza le possibilità future delle 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. Imparerai le nozioni di base delle animazioni basate sullo scorrimento di Bramus Van Damme, tra cui il funzionamento della funzionalità, il vocabolario, i vari modi per creare effetti e la combinazione di effetti per creare esperienze ricche. È un'ottima serie di video da guardare.

Visualizza transizioni

Abbiamo appena trattato una nuova funzionalità efficace per l'animazione all'interno delle pagine web, ma esiste anche una nuova funzionalità efficace chiamata transizioni di visualizzazione per l'animazione tra le visualizzazioni di pagina al fine di creare un'esperienza utente fluida. Le transizioni di visualizzazione introducono un nuovo livello di fluidità sul web, consentendoti di creare transizioni senza interruzioni tra visualizzazioni diverse all'interno di una singola pagina o anche tra pagine diverse.

Airbnb è una delle aziende che stanno 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 delle schede, che consente di modificare le foto e aggiungere comfort, il tutto in un flusso utente fluido.

Sebbene questi effetti a pagina intera siano belli e fluidi, puoi anche creare micro-interazioni, 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 tra le visualizzazioni.

Per attivare rapidamente le transizioni di visualizzazione nell'applicazione a pagina singola è semplice eseguire il wrapping di un'interazione con document.startViewTransition e assicurarti che ogni elemento sottoposto a transizione abbia un view-transition-name, in linea o in modo dinamico 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;
}

Visualizza 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ò essere complicata con molti elementi in transizione. Il primo nuovo aggiornamento delle 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.

Visualizza i tipi di transizione

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

Ad esempio, potresti voler animare la transizione da una home page a una pagina di un blog in modo diverso rispetto alla transizione dalla pagina del blog alla home page. In alternativa, potresti voler cambiare le pagine in modi diversi, come in questo esempio, passando da sinistra a destra e viceversa. In precedenza questo processo era difficoltoso. Era possibile aggiungere classi al DOM per applicare gli stili e poi rimuovere le classi in un secondo momento. I tipi di transizione della visualizzazione consentono al browser di ripulire le transizioni precedenti anziché chiederti di farlo manualmente prima di avviarne di nuove, eseguendo 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 su più pagine

Quello che rende potente il web è la sua ampiezza. Molte applicazioni non sono costituite da una sola pagina, ma da una trama molto estesa contenente più pagine. Ecco perché siamo lieti di annunciare che in Chromium 126 stiamo implementando il supporto delle transizioni tra visualizzazioni di documenti per le applicazioni multipagina.

Questo nuovo insieme di funzionalità tra documenti include esperienze web all'interno della stessa origine, ad esempio il passaggio da web.dev a web.dev/blog, ma non include il passaggio tra origini diverse, ad esempio il passaggio da web.dev a blog.web.dev o a un altro dominio come google.com.

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

@view-transition {
  navigation: auto;
}

Per un effetto più personalizzato, puoi eseguire il collegamento in JavaScript utilizzando i nuovi ascoltatori di eventi pageswap o pagereveal, che ti consentono di accedere all'oggetto di transizione della visualizzazione.

Con pageswap puoi apportare alcune modifiche dell'ultimo minuto alla pagina in uscita poco prima che vengano creati i vecchi snapshot, mentre con pagereveal puoi personalizzare la nuova pagina prima che inizi la visualizzazione dopo l'inizializzazione.

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

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

In futuro, prevediamo di espandere le transizioni tra le visualizzazioni, ad esempio:

• Transizioni basate su ambito: ti consentono di limitare una transizione a un sottoalbero DOM, consentendo al resto della pagina di continuare a essere interattivo e supportando più transizioni di visualizzazione in esecuzione contemporaneamente.
• Transizioni di visualizzazione basata sui gesti: utilizza i gesti di trascinamento o scorrimento per attivare una transizione della visualizzazione tra documenti e esperienze più simili a quelle native 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 scoprire di più sulle transizioni di visualizzazione per le applicazioni multipagina, incluso come configurarle in modo più efficiente con il pre-rendering, guarda il seguente talk di Bramus Van Damme:

Componenti dell'interfaccia utente abilitati dall'engine: semplificazione delle interazioni complesse

La creazione di applicazioni web complesse non è un'impresa facile, ma CSS e HTML sono in continua evoluzione per rendere questo processo molto più gestibile. Nuove funzionalità e miglioramenti semplificano la creazione di componenti dell'interfaccia utente, consentendoti di concentrarti sulla creazione di esperienze straordinarie. Questo avviene attraverso un impegno collaborativo che coinvolge diversi organismi di standardizzazione e gruppi della community chiave, tra cui il CSS Working Group, il gruppo della community Open UI e WHATWG (Web Hypertext Application Technology Working Group).

Uno dei principali problemi degli sviluppatori è una richiesta apparentemente semplice: la possibilità di applicare stili ai menu a discesa (l'elemento di selezione). Sebbene a prima vista possa sembrare semplice, si tratta di un problema complesso che interessa molti componenti della piattaforma, dal layout e dal rendering allo scorrimento e all'interazione, allo stile dello user agent e alle proprietà CSS e persino alle modifiche all'HTML stesso.

Un menu a discesa è costituito da molti componenti e include molti stati che devono essere presi in considerazione, ad esempio:

• Associazioni da tastiera (per accedere/uscire dall'interazione)
• Fai clic per chiudere
• Gestione dei popup attivi (chiudi gli altri popup quando se ne apre uno)
• Gestione dello stato attivo delle schede
• Visualizzazione del valore dell'opzione selezionata
• Stile di interazione con freccia
• Gestione dello stato (aperto/chiuso)

Al momento è difficile gestire autonomamente tutto questo stato, ma nemmeno la piattaforma lo semplifica. Per risolvere il problema, abbiamo suddiviso questi componenti e stiamo rilasciando alcune funzionalità di base che consentiranno di applicare stili ai menu a discesa, ma faranno molto di più.

L'API Popover

Per prima cosa abbiamo spedito un attributo globale chiamato popover, che sono felice di annunciare che ha appena raggiunto lo stato di nuovo disponibile Baseline qualche settimana fa.

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

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

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

Ora che l'attributo popover è abilitato, il browser gestisce molti comportamenti chiave senza script aggiuntivi, tra cui:

• Promozione al livello superiore: Un livello separato sopra il resto della pagina, in modo da non dover fare esperimenti con z-index.
• Funzionalità di chiusura rapida. Se fai clic all'esterno dell'area popover, il popover verrà chiuso e ripristinerà lo stato attivo.
• Gestione dello stato attivo della scheda predefinito: L'apertura del popup imposta la tabulazione successiva all'interno del popup.
• Associazioni da tastiera integrate. Se premi il tasto esc o se esegui il doppio abilitazione/disattivazione, il popup si chiuderà e lo stato attivo verrà restituito.
• Associazioni dei componenti predefinite. : il browser collega semanticamente un popup al suo attivatore.

Potresti persino utilizzare questa API popover oggi stesso senza rendertene conto. GitHub ha implementato il popover nel menu "nuovo" della home page e nella panoramica della revisione delle richieste di pull. La funzionalità è stata migliorata progressivamente grazie al polyfill del popover, creato da Oddbird con un supporto significativo da parte di Keith Cirkel di GitHub, per supportare i browser meno recenti.

"Abbiamo gestito il ritiro di migliaia di righe di codice eseguendo la migrazione al popup. Popover ci aiuta eliminando la necessità di combattere con numeri magici di z-index. Avere stabilito la relazione corretta dell'albero di accessibilità con il comportamento dei pulsanti dichiarativi e i comportamenti di messa a fuoco integrati semplifica notevolmente il nostro sistema di progettazione per implementare i pattern nel modo giusto. - Keith Cirkel, Software Engineer, GitHub"

Animare gli effetti di entrata e uscita

Quando hai i popup, probabilmente vorrai aggiungere un po' di interazione. Nell'ultimo anno sono disponibili quattro nuove funzionalità di interazione che supportano l'animazione dei popover. Queste includono:

La possibilità di animare display e content-visibility sulla sequenza temporale di un fotogramma 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 al livello superiore.

La proprietà 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 popup o di una finestra di dialogo. Nel complesso, una finestra di dialogo con uno sfondo 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 da quali stili animare questo elemento nel DOM. Questo vale sia per la finestra di dialogo sia per lo sfondo. Quindi, definisci lo stile dello stato aperto sia per la finestra di dialogo sia per lo sfondo. Per una finestra di dialogo viene utilizzato l'attributo open e per un popup l'elemento pseudo ::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 eseguire la transizione.

Posizionamento dell'ancora

Il popup era solo l'inizio della storia. Un aggiornamento molto interessante è che il supporto del 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 ciascun pulsante, in basso al centro.

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). Poi, 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'anchor direttamente nella funzione di ancoraggio e salta la proprietà position-anchor. Questo 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 all'ancora.

.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, quest'ultimo non è assolutamente un requisito per l'utilizzo del posizionamento dell'ancora. Il posizionamento di ancoraggio può essere utilizzato con due (o più) elementi qualsiasi per creare una relazione visiva. Infatti, la seguente demo, ispirata a un articolo di Roman Komarov, mostra uno stile di sottolineatura ancorato agli elementi dell'elenco quando passi il mouse sopra o premi Tab.

In questo esempio viene utilizzata 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 target cambia e il browser sposta il target 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;
}

Posizionamento di inset-area

Oltre al posizionamento assoluto direzionale predefinito che probabilmente hai utilizzato in precedenza, è incluso un nuovo meccanismo di layout che è stato implementato nell'API di posizionamento dell'ancora e si chiama area incassata. L'area incassata consente di posizionare facilmente gli elementi in base ai rispettivi elementi di ancoraggio 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 e inset-area: bottom in basso.

Una versione semplificata della prima demo di ancoraggio è la seguente con inset-area:

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

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

Puoi combinare questi valori di posizione con le parole chiave span per iniziare dalla posizione centrale e estendersi a sinistra, a destra o a tutte per occupare l'intero insieme di colonne o righe disponibili. Puoi utilizzare anche 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 sulla pagina mentre l'ancoraggio si sposta. In questo caso, abbiamo elementi della scheda con stile container-query, che cambiano dimensione in base alle dimensioni intrinseche (cosa che non puoi fare con le query sui media) e il menu ancorato si sposta con il nuovo layout man mano che l'interfaccia utente della scheda cambia.

Posizioni di ancoraggio dinamiche con position-try-options

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

Ora il browser passerà da uno stato all'altro, provando prima la posizione a destra e poi quella 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 offre anche alcune parole chiave se desideri alcune interazioni di base, come capovolgere l'ancoraggio nel blocco o direzioni in linea.

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

Per un'esperienza di ribaltamento semplice, sfrutta questi valori delle parole chiave di ribaltamento e salta del tutto la scrittura di una definizione position-try. Ora puoi avere un elemento posizionato con ancoramento adattabile alla posizione 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 dell'interfaccia utente a livelli

Le esperienze con tethering sono ovunque e l'insieme di funzionalità mostrato in questo post è un ottimo punto di partenza per liberare la creatività e avere un maggiore controllo sugli elementi posizionati in base a un'ancora e sulle interfacce a livelli. Ma questo è solo l'inizio. Ad esempio, al momento popover funziona solo con pulsanti come elemento di richiamo o con JavaScript. Per qualcosa come le anteprime in stile Wikipedia, un modello presente in tutta la piattaforma web, deve essere possibile interagire e attivare un popover da un link e dall'utente che mostra interesse senza necessariamente fare clic, come passare il mouse sopra o impostare lo stato attivo su una scheda.

Come passaggio successivo per l'API popover, stiamo lavorando a interesttarget per risolvere queste esigenze e semplificare la ricreazione di queste esperienze con i giusti hook di accessibilità 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 invocatore generale (invoketarget) rivolto al futuro da testare in Canary. invoketarget supporta l'esperienza di sviluppo dichiarativa che popovertarget fornisce popover, normalizzati per tutti gli elementi interattivi, tra cui <dialog>, <details>, <video>, <input type="file"> e altri.

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

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

Sappiamo che esistono casi d'uso non ancora coperti da questa API. Ad esempio, puoi applicare uno stile alla freccia che collega un elemento ancorato al suo ancoraggio, in particolare quando cambia la posizione dell'elemento ancorato, e consentire a un elemento di "scorrere" e rimanere nell'area visibile anziché agganciarsi a un'altra posizione impostata quando raggiunge la sua area delimitata. Siamo quindi entusiasti di lanciare questa potente API, ma non vediamo l'ora di ampliarne ulteriormente le funzionalità in futuro.

Seleziona stilizzabile

Utilizzando popover e anchor insieme, il team ha fatto progressi verso l'attivazione di un menu a discesa di selezione personalizzabile. La buona notizia è che sono stati fatti molti progressi. La cattiva notizia è che questa API è ancora in stato sperimentale. Tuttavia, sono entusiasta di condividere alcune demo dal vivo e aggiornamenti sui nostri progressi e speriamo di ricevere un feedback da parte tua. In primo luogo, sono stati fatti progressi nelle modalità di attivazione degli utenti nella nuova esperienza di selezione personalizzabile. Il modo attuale, in fase di sviluppo, per farlo è utilizzare una proprietà appearance in CSS, impostata su appearance: base-select. Una volta impostata l'aspetto, attiverai una nuova esperienza di selezione personalizzabile.

select {
  appearance: base-select;
}

Oltre a appearance: base-select, sono disponibili alcuni nuovi aggiornamenti HTML. Ad esempio, puoi inserire le opzioni in un datalist per personalizzarle e aggiungere contenuti non interattivi arbitrari, come le immagini, nelle opzioni. Avrai anche accesso a un nuovo elemento, <selectedoption>, che rifletterà i contenuti delle opzioni al suo interno e che potrai personalizzare in base alle tue esigenze. Questo elemento è molto utile.

Visualizzazione 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> nell'UI di Gmail, dove un'icona visiva rappresenta il tipo di risposta selezionato per risparmiare spazio. Puoi utilizzare stili di visualizzazione di base in selectedoption per distinguere lo stile delle opzioni da quello dell'anteprima. In questo caso, il testo mostrato nell'opzione può essere nascosto visivamente in selectedoption.

Immagine 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 questo paese selezionato, puoi vedere un'interfaccia utente personalizzata con immagini di bandiere nelle opzioni per semplificare l'analisi dei contenuti da parte dell'utente. Poiché i browser non supportati ignorano le righe che non comprendono, ad esempio il pulsante personalizzato, l'elenco di dati, l'opzione selezionata e le immagini all'interno delle opzioni, il fallback sarà simile all'attuale UI di selezione predefinita.

Con i selettori personalizzabili, le possibilità sono infinite. Adoro questo selettore di paese in stile Airbnb perché offre uno stile intelligente per il responsive design. Puoi fare questo e molto altro con l'imminente selettore personalizzabile, che rappresenta un'aggiunta molto utile alla piattaforma web.

Fisarmonica esclusiva

La risoluzione di alcuni stili (e di tutti i componenti correlati) non è l'unico componente dell'interfaccia utente su cui si è concentrato il team di Chrome. Il primo aggiornamento del componente aggiuntivo è la possibilità di creare accordion esclusive, in cui è possibile aprire un solo elemento alla volta

Per attivare questa opzione, applica lo stesso valore del nome a più elementi di dettagli, creando così un gruppo di dettagli collegati, 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 sono le pseudoclassi :user-valid e :user-invalid. Di recente sono diventate stabili 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 è stata eseguita un'interazione con un valore del modulo o se è diventato "sporco", il che può essere molto utile per fornire feedback agli utenti e riduce molto lo scripting necessario 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 pratico aggiornamento del componente rilasciato di recente è field-sizing: content, che può essere applicato ai controlli dei moduli come input e textarea. 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, poiché non sei più costretto a utilizzare dimensioni fisse per cui potresti dover scorrere verso l'alto per vedere ciò che 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 barra orizzontale nei selettori è un'altra piccola ma utile funzionalità del componente. Anche se non ha molto uso semantico, ti aiuta a separare meglio i contenuti all'interno di un elenco selezionato, in particolare quelli che potresti non voler necessariamente raggruppare con un gruppo di opzioni, 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 dell'utilizzo di hr in select

Miglioramenti alla qualità della vita

Eseguiamo costantemente l'iterazione, non solo per le interazioni e i componenti. Nell'ultimo anno sono stati rilasciati molti altri aggiornamenti per migliorare la qualità dell'esperienza utente.

Nidificazione con anticipazione

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

Una delle cose che preferisco del nidificazione CSS è che ti consente di bloccare visivamente i componenti e di includere stati e modificatori all'interno di questi componenti, ad esempio query contenitore e query sui media. In precedenza, abituavo a raggruppare tutte queste query in fondo al file per motivi di specificità. Ora puoi scriverle in modo logico, 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 dei blocchi

Un'altra novità molto interessante è la possibilità di utilizzare meccanismi di centratura come align-content nel layout a blocchi. Ciò significa che ora puoi eseguire operazioni come la centratura verticale all'interno di un div senza dover applicare il layout flessibile o a griglia e senza effetti collaterali come la prevenzione della compressione dei margini, che potresti non desiderare da questi algoritmi di layout.

Screenshot

Demo live

div {
  align-content: center;
}

Testo a capo: equilibrio e stile

A proposito di layout, il layout del testo è stato notevolmente 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 singleton nell'ultima riga del testo.

h1 {
  text-wrap: balance;
}

Scopri di più su text-wrap: balance.

Aggiornamenti sulla tipografia internazionale

Gli aggiornamenti del layout tipografico per le caratteristiche di testo CJK hanno ricevuto molti aggiornamenti nell'ultimo anno, come la funzionalità word-break: auto-phrase che aggrega la riga al confine naturale della frase.

E text-spacing-trim, che applica il kerning tra i caratteri di punteggiatura per migliorare la leggibilità della tipografia cinese, giapponese e coreana per risultati visivamente più accattivanti.

Sintassi del colore relativo

Nel mondo della tematizzazione cromatica, abbiamo riscontrato un grande aggiornamento nella relativa sintassi dei colori.

In questo esempio, i colori utilizzano il tema basato su Oklch. Quando il valore della tonalità viene modificato in base al dispositivo di scorrimento, l'intero tema cambia. Ciò può essere ottenuto con la sintassi dei colori relativa. Lo sfondo utilizza il colore principale, in base alla tonalità, e regola i canali luminosità, crominanza e tonalità per modificarne il valore. -i è l'indice fratello nell'elenco per la gradazione dei valori, che mostra come combinare la progressione con le proprietà personalizzate e la sintassi dei colori relativa 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 così piacevole in questo diagramma visivo di Adam Argyle. In precedenza, per configurare le opzioni del tema erano necessari due diversi blocchi di codice (il tema predefinito e una query sulle preferenze dell'utente). Ora puoi scrivere queste opzioni di stile sia per i temi chiari che per quelli 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 azzurro chiaro. Se l'utente ha selezionato un tema scuro, il pulsante avrà uno sfondo blu scuro.

Selettore :has()

Non avrei potuto parlare di UI moderna senza menzionare uno degli aspetti più importanti dell'interoperabilità dell'anno scorso, ovvero il selettore :has(), che è stato implementato su tutti i browser a dicembre dello scorso anno. Questa API è un punto di svolta per la scrittura di stili logici.

Il selettore :has() consente di verificare se un elemento secondario ha elementi secondari specifici o se questi elementi secondari sono in uno stato specifico e, in sostanza, può funzionare anche come selettore principale.

:has() si è già dimostrato particolarmente utile per molte aziende, tra cui PolicyBazaar, che utilizzano :has() per applicare uno stile ai blocchi in base ai contenuti interni, ad esempio nella sezione di confronto, dove lo stile si regola se nel blocco è presente un piano da confrontare 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 contenitori

Un'altra aggiunta importante al web, ora disponibile e in crescita, sono le query del contenitore, che consentono di eseguire query sulle dimensioni intrinseche di un elemento principale per applicare gli stili: un'opzione molto più precisa rispetto alle query sui media, che eseguono query solo sulle dimensioni della visualizzazione.

Angular ha recentemente lanciato un bellissimo nuovo sito di documentazione su angular.dev utilizzando query container per definire i blocchi di intestazione in base allo spazio disponibile sulla pagina. Pertanto, anche se il layout cambia e passa da un layout della barra laterale a più colonne a uno a colonna singola, i blocchi di intestazione possono regolarsi automaticamente.

Senza le query dei contenitori, fare qualcosa del genere era piuttosto difficile da realizzare e dannoso per le prestazioni, poiché richiedeva osservatori di ridimensionamento e osservatori di elementi. Ora è facile applicare uno stile a un elemento in base alle dimensioni del relativo elemento principale.

@property

Infine, molto presto, non vediamo l'ora di vedere @property approdo in Baseline. Si tratta di una funzionalità chiave per fornire un significato semantico alle proprietà CSS personalizzate (note anche come variabili CSS) e consente una serie di nuove funzionalità di interazione. @property consente inoltre di specificare il significato contestuale, il controllo del tipo, i valori predefiniti e di riserva in CSS. Aprendo la strada a funzionalità ancora più efficaci, come le query con intervalli. Si tratta di una funzionalità che prima non era possibile e che ora offre un ampio respiro 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. Le nuove esperienze interattive con animazioni basate sullo scorrimento e transizioni di visualizzazione rendono il web più fluido e interattivo in modi che non abbiamo mai visto prima. Con componenti UI di livello superiore, è più facile che mai creare componenti solidi e personalizzati, senza compromettere l'intera esperienza nativa. Infine, i miglioramenti della qualità della vita in termini di architettura, layout, tipografia e design responsive non solo risolvono i piccoli problemi, ma forniscono anche agli sviluppatori gli strumenti necessari per creare interfacce complesse che funzionino su una serie di dispositivi, fattori di forma e esigenze degli utenti.

Grazie a queste nuove funzionalità, dovresti essere in grado di rimuovere gli script di terze parti per funzionalità che richiedono un elevato rendimento, come gli elementi di scrollytelling e di tethering tra loro con il posizionamento dell'ancora, creare transizioni di pagina fluide, applicare stili ai menu a discesa e migliorare la struttura complessiva del codice in modo nativo.

Non c'è mai stato momento migliore per essere uno sviluppatore web. Non c'è stato tanto entusiasmo dall'annuncio di CSS3. Le funzionalità di cui avevamo bisogno, ma che abbiamo solo sognato di implementare in passato, stanno finalmente diventando realtà e parte della piattaforma. Ed è grazie alla tua voce che siamo in grado di dare la priorità e finalmente realizzare queste funzionalità. Stiamo lavorando per semplificare le attività più complesse e noiose in modo nativo, in modo che tu possa dedicare più tempo alle cose importanti, come le funzionalità di base e i dettagli di design che distinguono il tuo brand.

Per scoprire di più su queste nuove funzionalità man mano che vengono rilasciate, visita developer.chrome.com e web.dev, dove il nostro team condivide le ultime notizie sulle tecnologie web. Prova le animazioni basate sullo scorrimento, le transizioni di visualizzazione, il posizionamento dell'ancora o anche la selezione personalizzabile e facci sapere cosa ne pensi. Siamo qui per ascoltare e aiutarti.