La piattaforma web è in continua evoluzione e le funzionalità CSS e UI web sono in prima linea in questa entusiasmante evoluzione. Stiamo vivendo un'epoca d'oro per l'interfaccia utente web, con nuove funzionalità CSS che vengono implementate nei browser a un ritmo mai visto prima, aprendo un mondo di possibilità per creare esperienze web belle e coinvolgenti. Questo post del blog 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 pesanti.
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'effetto sarà opposto. In questo modo puoi creare visualizzazioni parziali o a pagina intera con elementi animati 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 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 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 e poi 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 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 inserisci l'animazione basata sullo scorrimento in una query sulle 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 i tuoi stili funzioneranno e che l'animazione non presenta problemi per l'utente.
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* Apply scroll-driven animations here */
}
}
Le animazioni basate sullo scorrimento possono essere esperienze di scrollytelling a pagina intera, ma possono anche essere animazioni più sottili, come una barra delle intestazioni che si riduce a icona e mostra 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 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 in termini di rendimento 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 comportato alcuni vantaggi significativi, sia per la gestione del codice sia 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. Qui, Bramus Van Damme ti insegnerà le nozioni di base sulle animazioni basate sullo scorrimento, tra cui il funzionamento della funzionalità, il vocabolario, vari modi per creare effetti e come combinare gli effetti per creare esperienze ricche. È una serie di video davvero interessante.
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. Sono incluse la barra laterale dell'editor della scheda, la modifica delle foto e l'aggiunta di comfort, il tutto all'interno di 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 nella tua applicazione a pagina singola, è sufficiente racchiudere un'interazione utilizzando document.startViewTransition
e assicurarti che ogni elemento in transizione abbia un view-transition-name
, in linea o utilizzando JavaScript in modo dinamico 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ò 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.
Supporto dei browser
Visualizza 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 verso e dalle visualizzazioni di pagina.
Supporto dei browser
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, questa operazione era complicata. Potete aggiungere classi al DOM per applicare gli stili e poi doverle rimuovere. I tipi di transizione di 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
La potenza del web è la sua vastità. Molte applicazioni non sono solo una singola pagina, ma un solido arazzo contenente più pagine. Per questo motivo, siamo lieti di annunciare che in Chromium 126 stiamo implementando il supporto delle transizioni tra visualizzazioni di documenti per le applicazioni multipagina.
Supporto dei browser
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 di visualizzazione all'interno 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 subito prima che vengano acquisiti gli snapshot precedenti e 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 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 basate su gesti: utilizza i gesti di trascinamento o scorrimento per attivare una transizione di visualizzazione tra documenti per esperienze più 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
epagereveal
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.
![Seleziona con un elenco di opzioni che contengono opzioni, pulsante di attivazione, freccia di indicazione e opzione selezionata.](https://developer.chrome.com/static/blog/new-in-web-ui-io-2024/image/select-01.png?authuser=8&hl=it)
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 ignorare
- 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
Innanzitutto abbiamo rilasciato un attributo globale denominato popover
, che sono felice di annunciare che ha raggiunto lo stato di disponibilità di recente di Baseline alcune settimane 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
. Ora il pulsante è l'elemento di chiamata,
<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 del popup, il popup si chiuderà e il focus tornerà al campo precedente.
- Gestione dello stato attivo della scheda predefinita: L'apertura del popup imposta la tabulazione successiva all'interno del popup.
- Scorciatoie da tastiera integrate: Se premi il tasto
esc
o se esegui il doppio abilitazione/disattivazione, il popup si chiuderà e lo stato attivo tornerà al campo precedente. - Associazioni dei componenti predefinite. : il browser collega semanticamente un popup al suo attivatore.
![Schermata Home di GitHub](https://developer.chrome.com/static/blog/new-in-web-ui-io-2024/image/gh-menu.png?authuser=8&hl=it)
Potresti persino utilizzare questa API popover oggi stesso senza rendertene conto. GitHub ha implementato il popup nel menu "Nuovo" della home page e nella panoramica della revisione delle richieste pull. Hanno migliorato progressivamente questa funzionalità utilizzando il polyfill popover, creato da Oddbird con l'aiuto significativo 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 l'implementazione dei pattern nel nostro Design System nel modo giusto. - Keith Cirkel, Software Engineer, GitHub"
Animazione di effetti di entrata e uscita
Quando hai i 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. Queste includono:
La possibilità di animare display
e content-visibility
in 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
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 che 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 ogni pulsante e posizionata 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'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 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 dell'ancora può essere utilizzato con qualsiasi coppia (o più) di 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 dell'elenco quando passi il mouse sopra o premi 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 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 estenderti a sinistra, a destra o a tutte le 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 nella pagina man mano che l'elemento di 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
quando non c'è spazio sufficiente 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 esplicito, il browser fornisce alcune parole chiave se vuoi alcune interazioni di base come capovolgere l'ancora nelle direzioni di blocco o 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 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 i pulsanti come elemento di chiamata o con JavaScript. Per elementi come le anteprime in stile Wikipedia, uno schema presente su tutta la piattaforma web, deve essere possibile interagire e attivare anche un popup da un link e dall'utente che mostra interesse senza necessariamente fare clic, ad esempio un passaggio del mouse o l'attivazione della 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 i popup, normalizzati per tutti gli elementi interattivi, tra cui <dialog>
, <details>
, <video>
, <input type="file">
e altri ancora.
<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 fase sperimentale. Tuttavia, sono felice di condividere alcune dimostrazioni dal vivo e aggiornamenti sui nostri progressi e, auspicabilmente, ricevere il tuo feedback.
Innanzitutto, sono stati fatti progressi su come attivare la nuova esperienza di selezione personalizzabile per gli utenti. 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.
<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'interfaccia utente di Gmail, dove un'icona visiva rappresenta il tipo di risposta selezionata 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
.
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.
![Il browser non supportato riceve l'esperienza di selezione attuale.](https://developer.chrome.com/static/blog/new-in-web-ui-io-2024/image/supported-and-not.png?authuser=8&hl=it)
Con i selettori personalizzabili, le possibilità sono infinite. Adoro questo selettore dei paesi in stile Airbnb perché ha 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 gli elementi 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
Supporto dei browser
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 i campi di testo, in quanto non dovrai più risolvere i problemi relativi alle dimensioni fisse in cui potresti dover scorrere verso l'alto per vedere cosa hai scritto nelle parti precedenti del prompt in una casella di immissione troppo piccola.
textarea, select, input {
field-sizing: content;
}
Scopri di più sul dimensionamento dei campi.
<hr>
in <select>
La possibilità di attivare l'elemento <hr>
o barra orizzontale nei selettori è un'altra piccola ma utile funzionalità del componente. Sebbene non abbia un grande utilizzo semantico, ti aiuta a separare bene i contenuti all'interno di un elenco di selezione, in particolare quelli che potresti non voler necessariamente raggruppare con un optgroup, ad esempio un valore segnaposto.
<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 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.
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, avevo l'abitudine di raggruppare tutte queste query nella parte inferiore del 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 modifica molto interessante è la possibilità di utilizzare meccanismi di centratura come align-content
nel layout dei blocchi. Ciò significa che ora puoi eseguire operazioni come il centratura verticale all'interno di un div senza dover applicare il layout flessibile o a griglia e senza effetti collaterali come la prevenzione del collasso dei margini, che potresti non volere da questi algoritmi di layout.
Supporto dei browser
div {
align-content: center;
}
A capo: equilibrio e bellezza
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 valori singoli nell'ultima riga del testo.
balance
e pretty
su un titolo e un paragrafo. Prova a tradurre la demo in un'altra lingua.h1 {
text-wrap: balance;
}
Scopri di più su text-wrap: balance.
Aggiornamenti sulla tipografia internazionale
Gli aggiornamenti del layout tipografico per le funzionalità di testo CJK hanno ricevuto molti aggiornamenti interessanti nell'ultimo anno, ad esempio la funzionalità word-break: auto-phrase
che inserisce un a capo alla fine della frase naturale.
Supporto dei browser
![word-break: auto-phrase inserisce un a capo alla fine della frase naturale.](https://developer.chrome.com/blog/new-in-web-ui-io-2024/image/word-break-auto-phrase.png?authuser=8&hl=it)
word-break: normal
e word-break: auto-phrase
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.
![La metà destra del punto CJK viene rimossa con text-spacing-trim.](https://developer.chrome.com/blog/new-in-web-ui-io-2024/image/text-spacing-trim.png?authuser=8&hl=it)
Sintassi del colore relativo
Nel mondo della scelta dei colori, abbiamo assistito a un grande aggiornamento con la sintassi dei colori relativi.
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.
balance
e pretty
su un titolo e un paragrafo. Prova a tradurre la demo in un'altra lingua.: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()
.
light-dark()
. Per saperne di più, guarda la demo.
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()
ti 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()
utilizzato per applicare lo stile ai blocchi di confronto su Tokopedia.: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.
Di recente Angular ha lanciato un nuovo sito di documentazione su angular.dev che utilizza le query dei contenitori per applicare stili ai blocchi di intestazione in base allo spazio disponibile nella pagina. Pertanto, anche se il layout cambia e passa da un layout della barra laterale a più colonne a un layout a una colonna, i blocchi di intestazione possono autoregolarsi.
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
Inoltre, a breve vedremo l'introduzione di @property 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 definire 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 stile di intervallo. Questa è una funzionalità che non era mai stata possibile prima d'ora e ora offre una grande profondità al linguaggio CSS.
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: #c0bae8;
}
Conclusione
Con tutte queste nuove e potenti funzionalità dell'interfaccia utente disponibili su tutti i browser, le possibilità sono infinite. Nuove esperienze interattive con animazioni basate sullo scorrimento e transizioni di visualizzazione rendono il web più fluido e interattivo in modi mai visti prima. Inoltre, i componenti dell'interfaccia utente di nuova generazione semplificano più che mai la creazione di componenti robusti e splendidamente personalizzati senza dover eliminare 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 ascoltarti e aiutarti.