La piattaforma web è ricca di innovazione e le funzionalità CSS e UI web sono all'avanguardia in questa entusiasmante evoluzione. Viviamo in un'epoca d'oro per l'interfaccia utente web, con nuove funzionalità CSS disponibili nei browser a un ritmo mai visto prima e offrendoti un mondo di possibilità per creare esperienze web piacevoli e coinvolgenti. Questo post del blog approfondirà lo stato attuale di CSS, esplorando alcune delle nuove funzionalità più rivoluzionarie che stanno ridefinire il modo in cui creiamo applicazioni web, presentate in diretta alla conferenza Google I/O 2024.
Nuove esperienze interattive
Un'esperienza web è fondamentalmente una chiamata e una risposta tra te e i tuoi utenti. Per questo è così importante investire in interazioni di qualità. Stiamo lavorando ad alcuni miglioramenti davvero importanti che consentono di sbloccare funzionalità che non abbiamo mai avuto prima sul Web per la navigazione all'interno delle pagine web e la navigazione da una all'altra.
Animazioni basate sullo scorrimento
Come suggerisce il nome, l'API per le animazioni basate sullo scorrimento ti consente di creare animazioni dinamiche basate sullo scorrimento senza dover fare affidamento su osservatori di scorrimento o altri script complessi.
Crea animazioni basate sullo scorrimento
Analogamente al funzionamento delle animazioni basate sul tempo sulla piattaforma, ora puoi utilizzare l'avanzamento di scorrimento di uno scorrimento per avviare, mettere in pausa e invertire un'animazione. Man mano che scorri in avanti, puoi vedere l'avanzamento dell'animazione. 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 per aggiungere un tocco dinamico alle pagine web.
Immagine dell'animazione con scorrimento
Demo live
@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 che appare nell'area visibile modificando l'opacità e la scala di un'immagine. L'animazione è guidata 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 suoi valori predefiniti monitora l'immagine in relazione alla porta di scorrimento (che in questo caso è anche l'area visibile).
È 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.
Immagine dell'animazione con scorrimento
Demo live
@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 dei fotogrammi chiave diverse (intestazione, testo, barra di navigazione e sfondo) e applica a ciascuna la relativa animazione guidata dallo scorrimento. Sebbene ciascuno abbia uno stile di animazione diverso, tutti hanno la stessa sequenza temporale, lo scorrimento 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 l'onere di gestire il codice, che si tratti di uno script personalizzato che hai scritto o dell'inclusione di un'ulteriore dipendenza di terze parti. Elimina inoltre la necessità di fornire vari osservatori di scorrimento, il che significa alcuni vantaggi in termini di prestazioni piuttosto significativi. Questo perché le animazioni basate sullo scorrimento funzionano al di fuori del thread principale quando si 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 recentemente utilizzato animazioni con scorrimento per mostrare la barra di navigazione del prodotto mentre scorri. L'utilizzo di questa API ha portato alcuni notevoli vantaggi, sia per la gestione del codice che per le prestazioni.
"Siamo riusciti a ridurre fino all'80% delle nostre righe di codice rispetto ai convenzionali eventi di scorrimento di JS 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 quale potrebbe essere il futuro. Ciò include la possibilità non solo di utilizzare nuove sequenze temporali dell'animazione, ma anche di utilizzare un punto di scorrimento per attivare l'inizio di un'animazione, chiamate animazioni attivate dallo scorrimento.
Inoltre, in futuro saranno disponibili altre funzionalità di scorrimento sui browser. La seguente demo mostra una combinazione di queste funzionalità future. Utilizza il CSS scroll-start-target per impostare la data e l'ora iniziali all'interno dei selettori e l'evento scrollsnapchange JavaScript per aggiornare la data dell'intestazione, rendendo banale la sincronizzazione dei dati con l'evento agganciato.
Puoi anche basarti su questo approccio per aggiornare un selettore in tempo reale con l'evento scrollsnapchanging JavaScript.
Queste particolari funzionalità sono attualmente solo in versione Canary e sono dietro un flag, tuttavia sbloccano funzionalità precedentemente impossibili o molto difficili da integrare nella piattaforma ed evidenziano il futuro delle possibilità di interazioni basate sullo scorrimento.
Per saperne 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 illustrato una nuova ed efficace funzionalità che anima all'interno delle pagine web, ma c'è anche una nuova e potente funzionalità chiamata transizioni di visualizzazione che consente di animare tra visualizzazioni di pagina al fine di creare un'esperienza utente fluida. Le transizioni di visualizzazione introducono un nuovo livello di fluidità nel web, consentendoti di creare transizioni fluide tra visualizzazioni diverse all'interno di una singola pagina o anche tra pagine diverse.
Airbnb è una delle aziende che sta già sperimentando l'integrazione delle transizioni delle viste nella propria UI per un'esperienza di navigazione sul 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 seguito all'interazione dell'utente. Questo effetto può essere ottenuto senza sforzo con le transizioni di visualizzazione.
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.
Immagine demo
Demo live
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
È possibile utilizzare i nomi delle transizioni di visualizzazione per applicare animazioni personalizzate alla transizione della visualizzazione, anche se la transizione di molti elementi può risultare complessa. Il primo nuovo aggiornamento della visualizzazione delle transizioni di quest'anno semplifica questo problema e introduce la possibilità di creare classi di transizione della visualizzazione da applicare alle animazioni personalizzate.
Supporto dei browser
- 125
- 125
- x
- x
Visualizza i tipi di transizione
Un altro grande miglioramento per le transizioni di tipo visualizzazione è il supporto per i tipi di transizione della visualizzazione. I tipi di transizione di visualizzazione sono utili quando vuoi un tipo diverso di transizione di visualizzazione visiva durante l'animazione da e verso le visualizzazioni di pagina.
Ad esempio, potresti volere che una home page venga animata alla pagina del blog in un modo diverso rispetto all'animazione della pagina stessa. Oppure potresti volere che le pagine vengano scambiate in modo diverso, come in questo esempio, 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 visualizzazione-transizione consentono al browser di ripulire le vecchie transizioni anziché dover eseguire questa operazione 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, mentre types è un array con i tipi.
document.startViewTransition({
update: myUpdate,
types: ['slide', 'forwards']
})
Transizioni della visualizzazione di più pagine
Quello che rende potente il web è la sua espansione. Molte applicazioni non sono costituite da una sola pagina, ma da una trama molto estesa contenente più pagine. Ecco perché siamo felici di annunciare che supporteremo le transizioni di visualizzazione tra documenti per le applicazioni di più pagine in Chromium 126.
Questo nuovo set di funzionalità multi-documento include esperienze web che risiedono all'interno della stessa origine, come la navigazione da web.dev a web.dev/blog, ma non include la navigazione multiorigine, come la navigazione da web.dev a blog.web.dev o a un altro dominio come google.com.
Una delle differenze principali delle transizioni di visualizzazione dello stesso documento è che non è necessario aggregare la transizione con document.startViewTransition(). Attiva invece entrambe le pagine coinvolte nella transizione della visualizzazione utilizzando la regola at-rule @view-transition del CSS.
@view-transition {
navigation: auto;
}
Per un effetto più personalizzato, puoi eseguire l'hook in JavaScript utilizzando i nuovi listener di eventi pageswap o pagereveal, che ti consentono di accedere all'oggetto di transizione Visualizza.
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 estendere la disponibilità alle transizioni di tipo "Visualizza", tra cui:
- Transizioni con ambito: consente di limitare una transizione a un sottoalbero DOM, affinché il resto della pagina continui a essere interattivo e supporta più transizioni di visualizzazione in esecuzione contemporaneamente.
- Transizioni di visualizzazione basata su 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 di navigazione in CSS: personalizza la transizione della visualizzazione tra documenti direttamente nel tuo CSS in alternativa all'utilizzo degli eventi
pageswapepagerevealin JavaScript Per saperne di più sulle transizioni della vista per le applicazioni su più pagine e su come impostarle al meglio con il pre-rendering, consulta la seguente presentazione di Bramus Van Damme:
Componenti dell'interfaccia utente abilitati dal motore: semplificazione di interazioni complesse
Creare applicazioni web complesse non è un'impresa facile, ma CSS e HTML si stanno evolvendo per rendere questo processo molto più gestibile. Le nuove funzionalità e i nuovi miglioramenti stanno semplificando la creazione dei componenti dell'interfaccia utente, così puoi concentrarti sulla creazione di esperienze straordinarie. Ciò è possibile grazie a uno sforzo collaborativo che coinvolge diversi organismi di standardizzazione chiave e gruppi della community, tra cui il CSS Working Group, Open UI Community Group e WHATWG (Web Hypertext Application Technology Working Group).
Una delle principali criticità degli sviluppatori riguarda una richiesta apparentemente semplice: la possibilità di applicare uno stile ai menu a discesa (l'elemento di selezione). In apparenza sembra semplice, ma si tratta di un problema complesso, come l'uso di molti elementi della piattaforma: layout e rendering, scorrimento e interazione, stili dello user agent e proprietà CSS, fino alle modifiche all'HTML stesso.
Un menu a discesa è costituito da molte parti e include molti stati che devono essere considerati, ad esempio:
- Associazioni di tastiere (per entrare/uscire dall'interazione)
- Fai clic per chiudere
- Gestione dei popover attivi (chiudi gli altri popover quando vengono aperti)
- Gestione dello stato attivo delle schede
- Visualizzazione del valore dell'opzione selezionata
- Stile di interazione con freccia
- Gestione dello stato (apertura/chiusura)
Al momento è difficile gestire tutto questo stato autonomamente, ma nemmeno la piattaforma lo rende facile. Per risolvere il problema, abbiamo suddiviso questi elementi e stiamo inviando alcune funzionalità originarie che consentiranno l'applicazione di stili ai menu a discesa, ma consentono anche di fare molto altro.
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 popover vengono nascosti con display: none finché non vengono aperti con un callback come un pulsante o con JavaScript. Per creare un popover di base, imposta l'attributo popover per l'elemento e collega il suo ID a un pulsante utilizzando popovertarget. Il pulsante è l'invocatore,
Immagine demo
Demo live
<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 attivato, il browser gestisce molti comportamenti chiave senza alcuno scripting aggiuntivo, 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 all'esterno dell'area popover, il popover verrà chiuso e ripristinerà lo stato attivo.
- Gestione predefinita dello stato attivo delle schede: Se apri il popover, la scheda successiva si ferma all'interno del popover.
- Associazioni da tastiera integrate. Se premi il tasto
esco attivi/disattivi due volte, il popover si chiuderà e ripristinerà lo stato attivo. - Associazioni di componenti predefinite. : il browser collega semanticamente un popover al suo trigger.
Potresti persino utilizzare questa API popover oggi 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.
"Siamo riusciti a ritirare letteralmente migliaia di righe di codice migrando ai popover. Popover ci aiuta eliminando la necessità di combattere i numeri magici degli z-index... avere la corretta relazione dell'albero dell'accessibilità stabilita con comportamento dichiarativo dei pulsanti e comportamenti di messa a fuoco integrati rende molto più facile per il nostro Design System implementare i pattern nel modo giusto.-Keith Cirkel, Software Engineer, GitHub"
Animazione di effetti di ingresso e uscita
Quando i popover sono presenti, probabilmente vorrai aggiungere un po' di interazione. L'anno scorso sono state introdotte quattro nuove funzionalità di interazione che supportano l'animazione dei popover. Questi 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 consentire le transizioni di proprietà discrete come display.
La regola @starting-style per animare gli effetti di ingresso da display: none e nel livello superiore.
La proprietà overlay per controllare il comportamento del livello superiore durante un'animazione.
Queste proprietà funzionano per qualsiasi elemento che anima nel livello superiore, che si tratti di un popover o di una finestra di dialogo. Nel complesso, l'aspetto di una finestra di dialogo con uno sfondo è simile al seguente:
Immagine demo
Demo live
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. Questa operazione viene eseguita sia per la finestra di dialogo che per lo sfondo. Quindi, definisci lo stato aperto sia per la finestra di dialogo che per lo sfondo. Per una finestra di dialogo viene utilizzato l'attributo open, mentre 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 è possibile passare da proprietà discrete.
Posizionamento degli ancoraggi
Popover è stato solo l'inizio della storia. Un aggiornamento davvero entusiasmante è che il supporto per il posizionamento di ancoraggio è ora disponibile da Chrome 125.
Utilizzando il posizionamento di ancoraggio, con poche righe di codice, il browser è in grado di gestire la logica per eseguire il tethering di 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.
Immagine demo
Demo live
Per configurare una relazione di ancoraggio 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 un posizionamento assoluto o fisso rispetto all'ancoraggio utilizzando la funzione anchor(). Il seguente codice posiziona la parte superiore della descrizione comando verso la 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 nel suo ancoraggio.
.anchor {
anchor-name: --my-anchor;
}
.positioned {
position: absolute;
top: anchor(--my-anchor bottom);
justify-self: anchor-center;
}
Sebbene sia molto pratico utilizzare il posizionamento degli ancoraggi con popover, i popover non sono necessariamente un requisito per l'utilizzo del posizionamento di ancoraggio. 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 all'elenco di elementi quando passi il mouse sopra gli elementi o passi con il tasto Tab.
Immagine demo
Demo live
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'ancoraggio del target cambia e il browser sposta il target per applicare il posizionamento, animando contemporaneamente il colore per creare un effetto ordinato.
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 direzionale assoluto predefinito che hai probabilmente utilizzato in precedenza, è stato incluso un nuovo meccanismo di layout che è stato inserito come parte dell'API di posizionamento degli ancoraggi chiamata area interna. L'area interna consente di posizionare facilmente gli elementi posizionati rispetto ai rispettivi ancoraggi e funziona su una griglia a 9 celle con l'elemento di ancoraggio al centro. Ad esempio, inset-area: top posiziona l'elemento posizionato in alto, mentre inset-area: bottom posiziona l'elemento posizionato in basso.
Una versione semplificata della prima demo di ancoraggio ha il seguente aspetto con inset-area:
.anchor {
anchor-name: --my-anchor;
}
.positioned {
position: absolute;
position-anchor: --my-anchor;
inset-area: bottom;
}
Puoi combinare questi valori posizionali con parole chiave di intervallo in modo da iniziare dalla posizione centrale e estendersi a sinistra, a destra o tutte per occupare l'intero insieme di colonne o righe disponibili. Puoi anche utilizzare proprietà logiche. Per semplificare la visualizzazione e la comprensione di questo meccanismo di layout, prova 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, quindi, abbiamo elementi della scheda in stile query container, che si ridimensionano in base alle dimensioni intrinseche (cosa che non è possibile fare con le query supporti) e il menu ancorato si sposterà con il nuovo layout man mano che l'interfaccia utente della scheda cambia.
Immagine demo
Demo live
Posizioni di ancoraggio dinamiche con position-try-options
La creazione dei menu e della navigazione nei sottomenu è molto più facile con una combinazione di popover e posizionamento di ancoraggio. Inoltre, quando raggiungi il bordo di un'area visibile con l'elemento ancorato, puoi consentire anche al browser di gestire la modifica di posizionamento per te.
Puoi farlo in diversi modi. Il primo consiste nel creare le tue regole di posizionamento. In questo caso, il sottomenu è 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. Poi, collega questo blocco @position-try all'ancoraggio utilizzando position-try-options.
Ora il browser passerà da uno stato ancorato all'altro, provando prima la posizione giusta e poi verso il basso. E questo può essere fatto con una bella transizione.
Immagine demo
Demo live
#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 semplificare la procedura di capovolgimento, utilizza questi valori delle parole chiave flip ed evita del tutto di scrivere una definizione di position-try. Con poche righe di CSS ora potete avere un elemento posizionato per l'ancoraggio che risponde alla posizione e completamente funzionale.
Immagine demo
Demo live
.tooltip {
inset-area: top;
position-try-options: flip-block;
}
Scopri di più sull'utilizzo del posizionamento di ancoraggio.
Il futuro delle UI a più livelli
Assistiamo a esperienze collegate ovunque e l'insieme di funzionalità mostrate in questo post è un ottimo inizio per liberare la creatività e avere un migliore controllo sugli elementi di ancoraggio e sulle interfacce a più 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, ad esempio passare il mouse sopra o impostare lo stato attivo su una scheda.
Come passaggio successivo per l'API popover, stiamo lavorando su interesttarget per risolvere queste esigenze e rendere più facile ricreare queste esperienze con gli appropriati hook di accessibilità integrati. Si tratta di un problema di accessibilità difficile da risolvere, con molte domande aperte sui comportamenti ideali, ma risolvere e normalizzare 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, è disponibile un altro invocatore generale rivolto al futuro (invoketarget) da testare in versione canary grazie al lavoro di due sviluppatori di terze parti, Keith Cirkel e Luke Warlow. 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 alcuni casi d'uso non sono ancora coperti da questa API. Ad esempio, assegnare uno stile alla freccia che collega un elemento ancorato al suo ancoraggio, soprattutto se 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 il riquadro di delimitazione. Pertanto, sebbene siamo entusiasti di mettere a disposizione questa potente API, non vediamo l'ora di estenderne ulteriormente le funzionalità in futuro.
Selezione stilizzata
Utilizzando popover e anchor insieme, il team ha compiuto progressi verso l'attivazione di un menu a discesa di selezione personalizzabile. La buona notizia è che ci sono stati 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 attualmente in fase di sviluppo consiste nell'utilizzare una proprietà di aspetto in CSS, impostata su appearance: base-select. Una volta impostato l'aspetto, attiverai 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 tue opzioni in un datalist per la personalizzazione e la possibilità di aggiungere contenuti arbitrari e non interattivi come le immagini nelle opzioni. Hai anche accesso a un nuovo elemento, <selectedoption>, che rifletterà il contenuto delle opzioni al suo interno, che potrai quindi personalizzare in base alle tue esigenze. Questo elemento è molto utile.
Immagine 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 gli stili di visualizzazione di base all'interno di selectedoption per differenziare lo stile delle opzioni da quello dell'anteprima. In questo caso, il testo visualizzato nell'opzione può essere visivamente nascosto in selectedoption.
Immagine demo
Demo live
selectedoption .text {
display: none;
}
Uno dei maggiori vantaggi nel riutilizzare l'elemento <select> per questa API è la compatibilità con le versioni precedenti. Nel paese selezionato, puoi visualizzare 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 ignoreranno le righe che non comprendono, come 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.
Grazie alle selezioni personalizzabili, le possibilità sono infinite. Adoro questo selettore di paese in stile Airbnb perché offre uno stile intelligente per il responsive design. È possibile fare questo e molto altro ancora con l'imminente selezione di stili, che la rende un'aggiunta indispensabile alla piattaforma web.
Immagine demo
Demo live
Fisarmonica esclusiva
Risolvere gli stili selezionati (e tutti gli elementi che ne derivano) non è l'unico componente dell'interfaccia utente su cui il team di Chrome si è concentrato. Il primo aggiornamento aggiuntivo del componente è la possibilità di creare accordion esclusivi in cui è possibile aprire un solo elemento di accordion alla volta
Supporto dei browser
- 120
- 120
- x
- 17,2
Il modo per abilitare questa funzionalità è applicare lo stesso valore di nome a più elementi di dettaglio, creando così un gruppo collegato di dettagli, proprio come 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, stabili in tutti i browser, le pseudoclassi :user-valid e :user-invalid si comportano in modo simile alle pseudoclassi :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 un codice notevolmente inferiore per determinare se un valore del modulo è stato interagito o è diventato "sporco", il che può essere molto utile per fornire feedback agli utenti. Inoltre, riduce la quantità di script che sarebbe stato necessario per farlo in passato.
Registra schermo demo
Demo live
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'uso degli pseudo-elementi di convalida modulo user-*.
field-sizing: content
Un altro pratico aggiornamento del componente di recente è stato aggiornato con field-sizing: content, che può essere applicato a controlli del modulo come input e aree di testo. In questo modo le dimensioni dell'input aumentano (o si riducono) 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.
Supporto dei browser
- 123
- 123
- x
- x
Registra schermo demo
Demo live
textarea, select, input {
field-sizing: content;
}
Scopri di più sulle dimensioni dei campi.
<hr> in <select>
La possibilità di attivare <hr>, o elemento della regola orizzontale nelle selezioni, è un'altra funzionalità del componente piccola ma utile. 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 della qualità della vita
Ci impegniamo costantemente a migliorare, non solo le interazioni e i componenti. Nell'ultimo anno sono stati registrati molti altri aggiornamenti relativi alla qualità della vita.
Nidificare con lookahead
La nidificazione CSS nativa è stata implementata in tutti i browser lo scorso anno e, da allora, è stata migliorata per supportare lookahead, il che significa che & prima dei nomi degli elementi non è più un requisito. Questo rende la nidificazione molto più ergonomica e simile a quella che facevo in passato.
Una delle cose che preferisco della nidificazione CSS è che consente di bloccare visivamente i componenti, e al loro interno sono inclusi stati e modificatori, come le query container e le query supporti. In precedenza, abituavo a raggruppare tutte queste query in fondo al file per motivi di specificità. Ora puoi scriverli nel modo più appropriato, 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 */
}
}
Allinea i contenuti per il layout a blocchi
Un'altra novità 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.
Supporto dei browser
- 123
- 123
- 125
- 17,4
Screenshot
Demo live
div {
align-content: center;
}
Testo a capo: equilibrio e stile
Parlando di layout, il layout del testo ha subito un notevole miglioramento 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.
Registra schermo demo
Demo live
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 internazionali sulla tipografia
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 limite naturale della frase.
Supporto dei browser
- 119
- 119
- x
- x
word-break: normal e word-break: auto-phrasetext-spacing-trim, che applica la crenatura tra i caratteri di punteggiatura per migliorare la leggibilità della tipografia cinese, giapponese e coreano per risultati visivamente più accattivanti.
Supporto dei browser
- 123
- 123
- x
- x
Sintassi relativa dei colori
Nel mondo della tematizzazione cromatica, abbiamo riscontrato un grande aggiornamento nella relativa sintassi dei colori.
In questo esempio, i colori qui usano temi basati su Oklch. Man mano che il valore della tonalità si regola in base al dispositivo di scorrimento, cambia l'intero tema. Ciò può essere ottenuto con la sintassi relativa dei colori. Lo sfondo utilizza il colore principale, in base alla tonalità, e regola i canali di luminosità, crominanza e tonalità per adeguarne il valore. --i è l'indice di pari livello dell'elenco per la gradazione dei valori, che mostra come combinare i passi con proprietà personalizzate e la relativa sintassi dei colori per creare temi.
Registra schermo demo
Demo live
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 tematizzazione è diventata molto più dinamica e semplificata.
La funzione light-dark() è un miglioramento ergonomico che semplifica le opzioni di assegnazione dei temi di colore in modo che tu possa scrivere gli stili dei temi in modo più conciso, come dimostrato in modo ottimale in questo diagramma visivo di Adam Argyle. In precedenza, per impostare le opzioni dei temi, erano necessari due blocchi di codice diversi (il tema predefinito e una query sulle preferenze utente). Ora puoi scrivere queste opzioni di stile per il tema chiaro e scuro nella stessa riga di CSS utilizzando la funzione light-dark().
light-dark(). Per saperne di più, consulta 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 celeste. Se l'utente ha selezionato un tema scuro, il pulsante avrà uno sfondo blu scuro.
Selettore :has()
Inoltre, non potrei parlare di UI moderna senza menzionare uno dei punti salienti dell'interoperabilità più efficaci dell'anno scorso, che deve essere il selettore :has(), che arriverà su tutti i browser nel dicembre dello scorso anno. Questa API rappresenta 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 si trovano in uno stato specifico ed essenzialmente può funzionare anche come selettore principale.
has() per creare 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, in cui lo stile si adatta se esiste un piano da confrontare nel blocco o se è vuoto.
"Con il selettore :has(), siamo stati in grado di eliminare la convalida basata su JavaScript della selezione dell'utente e sostituirla con una soluzione CSS che funziona perfettamente per noi con la stessa esperienza di prima.–Aman Soni, Tech Lead, PolicyBazaar"
Query container
Un'altra importante aggiunta al web, ora disponibile di recente e con un aumento nell'utilizzo, sono le query container, che consentono di eseguire query sulla dimensione intrinseca di un elemento padre per applicare stili: un pettine molto più preciso rispetto alle query supporti, che eseguono query solo per le dimensioni dell'area visibile.
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 query sul container, fare qualcosa di simile era piuttosto difficile da ottenere e con effetti negativi sulle prestazioni, e richiedeva osservatori del ridimensionamento e degli elementi. Ora è semplice definire gli stili di un elemento in base alle dimensioni principali.
Registra schermo demo
Demo live
@property
Infine, molto presto, non vediamo l'ora di vedere @property approdo in Baseline. Si tratta di una funzionalità fondamentale per fornire un significato semantico alle proprietà personalizzate CSS (note anche come variabili CSS) e consente di usufruire di una serie di nuove funzionalità di interazione. @property attiva anche i valori di significato contestuale, controllo del tipo, valori predefiniti e di fallback in CSS. Abbiamo aperto le porte a funzionalità ancora più solide, come le query basate sullo stile degli intervalli. Si tratta di una funzionalità che prima non era possibile e che ora offre un ampio respiro al linguaggio CSS.
Registra schermo demo
Demo live
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: #c0bae8;
}
Conclusione
Con tutte queste nuove ed efficaci funzionalità UI 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 alla qualità della vita per quanto riguarda l'architettura, il layout, la tipografia e il responsive design non solo risolvono i piccoli problemi, ma offrono 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 script di terze parti per funzionalità che richiedono grandi prestazioni come lo scorrimento e il tethering tra loro elementi con il posizionamento di ancoraggio, creare transizioni di pagina fluide, infine creare menu a discesa e migliorare la struttura generale del codice in modo nativo.
Non è mai stato un momento migliore per essere uno sviluppatore web. L'annuncio di CSS3 non ha prodotto così tanta energia ed entusiasmo. Le funzionalità di cui avevamo bisogno, ma che sognavamo di atterrare effettivamente in passato, stanno finalmente diventando una realtà e parte della piattaforma. È grazie alla tua voce che siamo in grado di dare la priorità e, infine, di mettere in pratica queste capacità. Stiamo lavorando per rendere più semplice svolgere in modo nativo le attività più complesse e noiose, così potrai dedicare più tempo alla creazione di ciò che conta, come le funzionalità principali e i dettagli di design che contraddistinguono il tuo brand.
Per scoprire di più su queste nuove funzionalità non appena saranno disponibili, seguite le pagine su developer.chrome.com e web.dev, dove il nostro team condivide le ultime novità sulle tecnologie web. Prova le animazioni basate sullo scorrimento, visualizza le transizioni, il posizionamento degli ancoraggi o persino la selezione stilizzata e facci sapere cosa ne pensi. Siamo qui per ascoltare e aiutarti.