Gli ultimi mesi hanno inaugurato un'epoca d'oro per l'interfaccia utente web. Le nuove funzionalità della piattaforma hanno portato a un'adozione stretta su più browser che supportano più funzionalità web e funzionalità di personalizzazione che mai.
Ecco 20 delle funzionalità più entusiasmanti e d'impatto rilasciate di recente o che lo saranno a breve:
- Query container
- Applicare uno stile alle query
- Selettore
:has() - n-esima della microsintassi
text-wrap: balanceinitial-letter- Unità di visualizzazione dinamica
- Spazi colore ad ampia gamma
color-mix()- Nesting
- Livelli a cascata
- Stili specifici
- Funzioni trigonometriche
- Proprietà di trasformazione singole
- popover
- posizionamento di ancoraggio
- selezionamenu
- Transizioni delle proprietà discrete
- Animazioni con scorrimento
- Visualizzare le transizioni
La nuova tecnologia
Iniziamo con alcune nuove funzionalità di progettazione reattiva. Le nuove funzionalità della piattaforma ti consentono di creare interfacce logiche con componenti proprietari delle informazioni di stile reattive, creare interfacce che sfruttano le funzionalità di sistema per fornire UI più personalizzate e consentire all'utente di partecipare al processo di progettazione con query sulle preferenze dell'utente per una completa personalizzazione.
Query container
Le query container sono recentemente stabili in tutti i browser moderni. Ti consentono di eseguire query sulle dimensioni e sullo stile di un elemento principale per determinare gli stili da applicare a ciascuno dei suoi elementi secondari. Le query supporti possono accedere alle informazioni dell'area visibile e utilizzarle solo per farlo, il che significa che possono funzionare solo su una visualizzazione macro di un layout di pagina. Le query container, invece, sono uno strumento più preciso in grado di supportare qualsiasi numero di layout all'interno di layout.
Nel seguente esempio di Posta in arrivo, la Posta in arrivo principale e la barra laterale Preferiti sono entrambi contenitori. Le email al loro interno modificano il loro layout a griglia e mostrano o nascondono il timestamp in base allo spazio disponibile. È esattamente lo stesso componente all'interno della pagina, ma appare in visualizzazioni diverse
Dal momento che abbiamo una query container, gli stili di questi componenti sono dinamici. Se regoli le dimensioni e il layout della pagina, i componenti rispondono al loro spazio assegnato singolarmente. La barra laterale diventa una barra in alto con più spazio e il layout assomiglia più alla Posta in arrivo principale. Quando c'è meno spazio, entrambi vengono visualizzati in un formato ridotto.
Scopri di più sulle query relative ai container e sulla creazione di componenti logici in questo post.
Query sugli stili
La specifica delle query del contenitore consente anche di eseguire query sui valori di stile di un contenitore principale. Al momento questa funzionalità è parzialmente implementata in Chrome 111, in cui puoi utilizzare le proprietà personalizzate CSS per applicare gli stili contenitore.
L'esempio seguente utilizza le caratteristiche meteorologiche memorizzate nei valori delle proprietà personalizzate, come pioggia, sole e nuvoloso, per definire lo sfondo della scheda e l'icona dell'indicatore.
@container style(--sunny: true) {
.weather-card {
background: linear-gradient(-30deg, yellow, orange);
}
.weather-card:after {
content: url(<data-uri-for-demo-brevity>);
background: gold;
}
}
Questo è solo l'inizio per le query di stile. In futuro avremo query booleane per determinare se esiste un valore di proprietà personalizzata e ridurre la ripetizione del codice, mentre attualmente ci sono query di intervallo per applicare gli stili in base a un intervallo di valori. In questo modo sarà possibile applicare gli stili mostrati qui utilizzando un valore percentuale per la probabilità di pioggia o copertura nuvolosa.
Puoi scoprire di più e vedere altre demo nel nostro post del blog sulle query di stile.
:has()
A proposito di funzionalità potenti e dinamiche, il selettore:has() è una delle nuove funzionalità CSS più potenti che vengono utilizzate nei browser moderni. Con :has(), puoi applicare gli stili controllando se un elemento principale contiene la presenza di specifici elementi secondari o se questi ultimi si trovano in uno stato specifico. Ciò significa che ora abbiamo un selettore principale.
Partendo dall'esempio di query del container, puoi utilizzare :has() per rendere i componenti ancora più dinamici. Al suo interno, a un elemento con un elemento "stella" viene applicato uno sfondo grigio, mentre a un elemento con una casella di controllo selezionata viene applicato uno sfondo blu.
Tuttavia, questa API non si limita alla selezione principale. Puoi anche assegnare uno stile a tutti i bambini all'interno dell'elemento padre. Ad esempio, il titolo è in grassetto quando l'elemento è presente nell'elemento a stella. Puoi farlo con .item:has(.star) .title. L'uso del selettore :has() consente di accedere agli elementi principali, agli elementi secondari e persino agli elementi di pari livello. In questo modo si tratta di un'API molto flessibile, con nuovi casi d'uso che compaiono ogni giorno.
Scopri di più ed esplora altre demo, consulta questo post del blog per informazioni su :has().
sintassi
Supporto dei browser
- 111
- 111
- 113
- 9
La piattaforma web ora ha una selezione più avanzata di secondo livello. La sintassi avanzata nth-child fornisce una nuova parola chiave ("of"), che ti consente di utilizzare la microsintassi esistente di An+B, con un sottoinsieme più specifico in cui eseguire la ricerca.
Se utilizzi un normale n-esimo-figlio, ad esempio :nth-child(2) nella classe speciale, il browser selezionerà l'elemento a cui è applicata la classe speciale, oltre a essere il secondo elemento secondario. Questo è a differenza di :nth-child(2 of .special), che prima pre-filtrerà tutti gli elementi .special e poi selezionerà il secondo dall'elenco.
Scopri di più su questa funzionalità nel nostro articolo sulla sintassi dei vari linguaggi.
text-wrap: balance
I selettori e le query di stile non sono gli unici punti in cui possiamo incorporare la logica nei nostri stili; la tipografia è un'altra. A partire da Chrome 114, puoi utilizzare il bilanciamento del testo a capo per le intestazioni utilizzando la proprietà text-wrap con il valore balance.
Per bilanciare il testo, il browser esegue effettivamente una ricerca binaria per la larghezza minima che non causa altre righe, fermandosi a un pixel CSS (non al pixel di visualizzazione). Per ridurre ulteriormente i passaggi nella ricerca binaria, il browser inizia con l'80% della larghezza di riga media.
Scopri di più in questo articolo.
initial-letter
Un altro valido miglioramento della tipografia web è initial-letter. Questa proprietà CSS ti offre un controllo migliore per lo stile incorporato dei drop cap.
Usa initial-letter nello pseudo elemento :first-letter per specificare:
La dimensione della lettera in base al numero di righe che occupa.
Il blocco obliquo della lettera, o "affondamento", per il punto in cui si troverà la lettera.
Scopri di più sull'utilizzo di intial-letter qui.
Unità area visibile dinamica
Supporto dei browser
- 108
- 108
- 101
- 15,4
Un problema comune che gli sviluppatori web devono affrontare oggi è il dimensionamento accurato e coerente dell'intera area visibile, soprattutto sui dispositivi mobili. In qualità di sviluppatore, vuoi che il valore 100vh (100% dell'altezza dell'area visibile) indichi "l'altezza dell'area visibile", ma l'unità vh non tiene conto di elementi come il ritiro delle barre di navigazione sui dispositivi mobili, quindi a volte l'unità è troppo lunga e determina lo scorrimento.
Per risolvere il problema, ora abbiamo nuovi valori delle unità sulla piattaforma web, tra cui:
- Altezza e larghezza dell'area visibile piccole (o svh e svw), che rappresentano le dimensioni più piccole dell'area visibile attiva.
- Altezza e larghezza dell'area visibile grandi (lvh e lvw), che rappresentano la dimensione massima.
- Altezza e larghezza dell'area visibile dinamica (dvh e dvw).
Le unità dell'area visibile dinamica cambiano di valore quando le barre degli strumenti aggiuntive del browser dinamico, come l'indirizzo nella parte superiore o la barra delle schede in basso, sono visibili e quando non lo sono.
Per ulteriori informazioni su queste nuove unità, consulta Le unità visibili grandi, piccole e dinamiche.
Spazi colore ad ampia gamma
Un'altra nuova aggiunta fondamentale alla piattaforma web sono gli spazi colore ad ampia gamma. Prima che i colori ad ampia gamma diventassero disponibili sulla piattaforma web, potevi scattare una fotografia con colori vividi, visualizzabili sui dispositivi moderni, ma non potevi ottenere un pulsante, un colore del testo o uno sfondo corrispondente a quei valori.
Fai una prova
Ma ora abbiamo una gamma di nuovi spazi colore sulla piattaforma web, tra cui REC2020, P3, XYZ, LAB, OKLAB, LCH e OKLCH. Scopri i nuovi spazi colore sul web e altro ancora nella guida ai colori HD.
Inoltre, in DevTools puoi vedere immediatamente come si sia estesa la gamma di colori, con quella linea bianca che delinea il punto di fine dell'intervallo sgsuite e quello di inizio.
Molti altri strumenti disponibili per i colori! Non perderti tutti gli incredibili miglioramenti dei gradienti. C'è anche il nuovissimo strumento Adam Argyle creato per aiutarti a provare un nuovo selettore di colori per il web e un nuovo strumento per la creazione di gradienti. Prova con gradient.style.
color-mix()
L'espansione degli spazi colore espansi è la funzione color-mix(). Questa funzione supporta la combinazione di due valori di colore per creare nuovi valori in base ai canali dei colori che vengono miscelati. Lo spazio di colore in cui si combinano i risultati influisce sui risultati. Se lavori in uno spazio colore più percettivo come oklch, il risultato sarà una gamma di colori diversa rispetto a quella di un sistema simile a srbit, ad esempio sgsuite.
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
La funzione color-mix() offre una funzionalità molto richiesta da tempo: la possibilità di mantenere i valori di colore opaco aggiungendo al contempo trasparenza. Ora puoi utilizzare le variabili di colore del tuo brand durante la creazione di varianti di questi colori con opacità diverse. Per farlo, devi mescolare il colore con il colore trasparente. Quando mescoli il colore blu del tuo brand con il 10% di trasparente, ottieni un colore del brand opaco al 90%. Si può osservare come ciò consente di creare rapidamente sistemi di colori.
Puoi vedere questa funzionalità in azione in Chrome DevTools oggi con un'ottima icona del diagramma di Venn in anteprima nel riquadro Stili.
Guarda altri esempi e dettagli nel nostro post del blog su color-mix o prova questo playground di color-mix().
Nozioni di base di CSS
Creare nuove funzionalità con vittorie chiare dell'utente è una parte dell'equazione, ma molte delle funzionalità disponibili in Chrome hanno l'obiettivo di migliorare l'esperienza degli sviluppatori e creare un'architettura CSS più affidabile e organizzata. Queste funzionalità includono la nidificazione di CSS, i livelli a cascata, gli stili con ambito, le funzioni trigonometriche e le singole proprietà di trasformazione.
Annidamento
La nidificazione di CSS, una novità che le persone apprezzano da Sass e che da anni è tra le più richieste dagli sviluppatori CSS, è finalmente sulla piattaforma web. La nidificazione consente agli sviluppatori di scrivere in un formato raggruppato più conciso che riduce la ridondanza.
.card {}
.card:hover {}
/* can be done with nesting like */
.card {
&:hover {
}
}
Puoi anche nidificare le query supporti, il che significa anche che puoi nidificare le query container. Nell'esempio seguente, il layout di una scheda viene cambiato da verticale a orizzontale se il contenitore contiene una larghezza sufficiente:
.card {
display: grid;
gap: 1rem;
@container (width >= 480px) {
display: flex;
}
}
La modifica del layout su flex si verifica quando il contenitore ha più (o uguale a) 480px di spazio in linea disponibile. Il browser applicherà semplicemente il nuovo stile di visualizzazione quando le condizioni sono soddisfatte.
Per ulteriori informazioni ed esempi, consulta il nostro post sulla nidificazione dei CSS.
Livelli a cascata
Un altro punto critico per gli sviluppatori che abbiamo individuato è garantire la coerenza tra gli stili che prevalgono sugli altri e un aspetto della risoluzione di questo problema consiste nell'avere un maggiore controllo sulla cascata CSS.
I livelli a cascata risolvono questo problema dando agli utenti il controllo su quali livelli hanno una precedenza maggiore rispetto agli altri, il che significa un controllo più preciso su quando vengono applicati gli stili.
Scopri di più su come utilizzare i livelli Cascade in questo articolo.
CSS con ambito
Supporto dei browser
- 118
- 118
- x
- 17,4
Gli stili con ambito CSS consentono agli sviluppatori di specificare i limiti a cui si applicano stili specifici, creando essenzialmente spazi dei nomi nativi in CSS. In precedenza, gli sviluppatori si affidavano a script di terze parti per rinominare le classi o a convenzioni di denominazione specifiche per evitare conflitti di stile, ma presto puoi utilizzare @scope.
Qui, stiamo associando un elemento .title a un .card. In questo modo si evita che l'elemento del titolo entri in conflitto con altri elementi .title della pagina, come il titolo di un post del blog o un'altra intestazione.
@scope (.card) {
.title {
font-weight: bold;
}
}
Puoi vedere @scope con i limiti di ambito insieme a @layer in questa demo dal vivo:
Scopri di più su @scope nella specifica CSS-Cascade-6.
Funzioni trigonometriche
Un'altra novità è rappresentata dalle funzioni trigonometriche che vengono aggiunte alle funzioni matematiche CSS esistenti. Queste funzioni ora sono stabili in tutti i browser moderni e ti consentono di creare layout più organici sulla piattaforma web. Un ottimo esempio è questo layout del menu radiale, che ora è possibile progettare e animare utilizzando le funzioni sin() e cos().
Nella demo qui sotto, i punti ruotano attorno a un punto centrale. Anziché ruotare ciascun punto intorno al proprio centro e spostarlo verso l'esterno, ciascun punto viene traslato sugli assi X e Y. Le distanze sugli assi X e Y vengono determinate tenendo conto di cos() e, rispettivamente, di sin() di --angle.
Per informazioni più dettagliate su questo argomento, consulta il nostro articolo sulle funzioni trigonometriche.
Singole proprietà di trasformazione
L'ergonomia degli sviluppatori continua a migliorare con funzioni di trasformazione individuali. Dall'ultima volta in cui abbiamo organizzato l'I/O, le singole trasformazioni sono risultate stabili su tutti i browser moderni.
In passato, era necessario usare la funzione di trasformazione per applicare funzioni secondarie per scalare, ruotare e tradurre un elemento UI. Ciò comportava molte ripetizioni ed era particolarmente frustrante quando si applicano più trasformazioni in momenti diversi dell'animazione.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}
Ora puoi avere tutti questi dettagli nelle animazioni CSS separando i tipi di trasformazioni e applicandoli singolarmente.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.target:hover {
scale: 2;
}
In questo modo, le modifiche alla traslazione, alla rotazione o alla scala possono avvenire contemporaneamente a diverse velocità di variazione in momenti diversi durante l'animazione.
Per ulteriori informazioni, consulta questo post sulle singole funzioni di trasformazione.
Componenti personalizzabili
Per assicurarci di risolvere alcune delle principali esigenze degli sviluppatori tramite la piattaforma web, stiamo collaborando con il gruppo della community OpenUI e abbiamo identificato tre soluzioni da cui iniziare:
- Funzionalità popup integrata con gestori di eventi, una struttura DOM dichiarativa e valori predefiniti accessibili.
- Un'API CSS per eseguire il tethering di due elementi tra loro per consentire il posizionamento anchor.
- Un componente di menu a discesa personalizzabile, per quando vuoi applicare uno stile ai contenuti di una selezione.
Popover
L'API popover fornisce agli elementi alcune funzioni magiche integrate nel supporto del browser, ad esempio:
- Supporto per il livello superiore, così non devi gestire
z-index. Quando apri un popover o una finestra di dialogo, promuovi l'elemento a un livello speciale nella parte superiore della pagina. - Ignora senza costi questo comportamento nei popover
auto: quando fai clic all'esterno di un elemento, il popover viene ignorato, rimosso dall'albero dell'accessibilità e gestito correttamente. - Accessibilità predefinita per il tessuto connettivo della destinazione del popover e il popover stesso.
Tutto questo significa che è necessario scrivere meno codice JavaScript per creare tutte queste funzionalità e monitorare tutti questi stati.
La struttura DOM per i popover è dichiarativa e può essere scritta con la stessa chiarezza degli attributi id e popover per l'elemento popover. Quindi, sincronizzi l'ID con l'elemento che aprirà il popover, ad esempio un pulsante con l'attributo popovertarget:
<div id="event-popup" popover>
<!-- Popover content goes in here -–>
</div>
<button popovertarget="event-popup">Create New Event</button>
popover è una forma abbreviata di popover=auto. Un elemento con popover=auto forza la chiusura di altri popover all'apertura, lo stato attivo quando viene aperto e può ignorare la luce. Al contrario, gli elementi popover=manual non forzano la chiusura di altri tipi di elementi, non vengono attivati immediatamente e non vengono ignorati. Si chiudono con un pulsante di attivazione/disattivazione o un'altra azione di chiusura.
La documentazione più aggiornata sui popover è attualmente disponibile su MDN.
Posizionamento ancoraggio
I popover vengono utilizzati spesso anche in elementi come finestre di dialogo e descrizioni comando, che in genere devono essere ancorati a elementi specifici. Vediamo questo esempio di evento. Quando fai clic su un evento nel calendario, viene visualizzata una finestra di dialogo accanto all'evento su cui hai fatto clic. L'elemento del calendario è l'ancoraggio e il popover è la finestra di dialogo che mostra i dettagli dell'evento.
Puoi creare una descrizione comando centrata con la funzione anchor(), utilizzando la larghezza dell'ancoraggio per posizionare la descrizione comando al 50% della posizione x dell'ancoraggio. Poi, utilizza i valori di posizionamento esistenti per applicare il resto degli stili di posizionamento.
Ma cosa succede se il popover non si adatta all'area visibile in base al modo in cui è stato posizionato?
Per risolvere questo problema, l'API di posizionamento dell'ancoraggio include posizioni di riserva personalizzabili. L'esempio seguente crea una posizione di riserva chiamata "top-then-bottom". Il browser proverà prima a posizionare la descrizione comando in alto e, se non rientra nell'area visibile, il browser la posizionerà sotto l'elemento di ancoraggio, in basso.
.center-tooltip {
position-fallback: --top-then-bottom;
translate: -50% 0;
}
@position-fallback --top-then-bottom {
@try {
bottom: calc(anchor(top) + 0.5rem);
left: anchor(center);
}
@try {
top: calc(anchor(bottom) + 0.5rem);
left: anchor(center);
}
}
Scopri di più sul posizionamento degli ancoraggi in questo post del blog.
<selectmenu>
Con il posizionamento sia di popover che di ancoraggio, puoi creare menu di selezione completamente personalizzabili. Il gruppo della community OpenUI sta studiando la struttura fondamentale di questi menu e cercando modi per consentire la personalizzazione dei contenuti al loro interno. Guarda questi esempi visivi:
Per creare l'esempio di selectmenu all'estrema sinistra, con punti colorati corrispondenti al colore visualizzato all'interno di un evento nel calendario, puoi scriverlo come segue:
<selectmenu>
<button slot="button" behavior="button">
<span>Select event type</span>
<span behavior="selected-value" slot="selected-value"></span>
<span><img src="icon.svg"/></span>
</button>
<option value="meeting">
<figure class="royalblue"></figure>
<p>Meeting</p>
</option>
<option value="break">
<figure class="gold"></figure>
<p>Lunch/Break</p>
</option>
...
</selectmenu>
Transizioni delle proprietà discrete
Affinché tutto questo effettui la transizione dei popover all'interno e all'esterno senza intoppi, il web ha bisogno di un modo per animare le proprietà discrete. Si tratta di proprietà che in passato non erano animabili in passato, come l'animazione da e verso il livello superiore e da e verso display: none.
Nell'ambito dell'impegno per attivare transizioni piacevoli per popover, menu di selezione e persino elementi esistenti come finestre di dialogo o componenti personalizzati, i browser stanno consentendo a nuovi impianti idraulici di supportare queste animazioni.
La seguente demo dei popover, anima i popover in entrata e in uscita utilizzando :popover-open per lo stato aperto, @starting-style per lo stato prima dell'apertura e applica un valore di trasformazione all'elemento direttamente per lo stato post-apertura-è-chiuso. Affinché tutto funzioni con gli annunci display, è necessario aggiungerlo alla proprietà transition, in questo modo:
.settings-popover {
&:popover-open {
/* 0. before-change */
@starting-style {
transform: translateY(20px);
opacity: 0;
}
/* 1. open (changed) state */
transform: translateY(0);
opacity: 1;
}
/* 2. After-change state */
transform: translateY(-50px);
opacity: 0;
/* enumarate transitioning properties, including display */
transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}
Interazioni
Passiamo alle interazioni, l'ultima tappa di questo tour delle funzionalità dell'interfaccia utente web.
Abbiamo già parlato dell'animazione delle proprietà discrete, ma ci sono anche alcune API davvero entusiasmanti che vengono lanciate in Chrome intorno alle animazioni con scorrimento e alle transizioni di visualizzazione
Animazioni con scorrimento
Le animazioni con scorrimento consentono di controllare la riproduzione di un'animazione in base alla posizione di scorrimento di un contenitore a scorrimento. Ciò significa che quando scorri verso l'alto o verso il basso l'animazione viene eseguita in avanti o indietro. Inoltre, con le animazioni con scorrimento puoi anche controllare un'animazione in base alla posizione di un elemento all'interno del relativo contenitore. In questo modo puoi creare effetti interessanti, come un'immagine di sfondo con parallasse, barre di avanzamento di scorrimento e immagini che si rivelano non appena vengono visualizzate.
Questa API supporta un insieme di classi JavaScript e proprietà CSS che ti consentono di creare facilmente animazioni dichiarative basate su scorrimento.
Per gestire un'animazione CSS tramite scorrimento, utilizza le nuove proprietà scroll-timeline, view-timeline e animation-timeline.
Per guidare un'API Web Animations JavaScript, passa un'istanza ScrollTimeline o ViewTimeline come opzione timeline a Element.animate()
Queste nuove API funzionano in combinazione con le API di animazione web e CSS esistenti, il che significa che traggono vantaggio dai vantaggi di queste API. Ciò include la possibilità di eseguire queste animazioni dal thread principale. Sì, leggi bene: ora puoi creare animazioni fluide e fluide, guidate da scorrimento, in esecuzione fuori dal thread principale, con poche righe di codice in più. Cosa non piace?!
Per una guida approfondita e completa sulla creazione di queste animazioni con scorrimento, consulta questo articolo sulle animazioni con scorrimento.
Visualizza transizioni
L'API View Transizione semplifica la modifica del DOM in un solo passaggio, creando al contempo una transizione animata tra i due stati. Può trattarsi di semplici dissolvenze tra le visualizzazioni, ma puoi anche controllare la transizione delle singole parti della pagina.
Le transizioni View possono essere utilizzate come miglioramento progressivo: prendi il codice che aggiorna il DOM con qualsiasi metodo e integralo nell'API View Transizione da un fallback per i browser che non supportano questa funzionalità.
function spaNavigate(data) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// With a transition:
document.startViewTransition(() => updateTheDOMSomehow(data));
}
L'aspetto della transizione è controllato tramite CSS
@keyframes slide-from-right {
from { opacity: 0; transform: translateX(75px); }
}
@keyframes slide-to-left {
to { opacity: 0; transform: translateX(-75px); }
}
::view-transition-old(root) {
animation: 350ms both slide-to-left ease;
}
::view-transition-new(root) {
animation: 350ms both slide-from-right ease;
}
Come dimostrato in questa meravigliosa demo di Maxi Ferreira, le altre interazioni con le pagine, come la riproduzione di un video, continuano a funzionare durante la transizione delle visualizzazioni.
Al momento, la funzionalità Visualizza transizioni è compatibile con le app a pagina singola (APS) a partire da Chrome 111. Stiamo lavorando al supporto delle app su più pagine. Per saperne di più, consulta la nostra guida completa alle transizioni.
Conclusione
Tieniti al corrente sulle ultime novità in fatto di CSS e HTML qui su developer.chrome.com e guarda i video I/O per altre pagine web.