Novità in CSS e UI: I/O 2023 Edition

Una Kravets

Bramus

Adam Argyle

Gli ultimi mesi hanno segnato l'inizio di un'era d'oro per la UI web. Sono state introdotte nuove funzionalità della piattaforma con un'adozione cross-browser rigorosa che supportano più funzionalità web e di personalizzazione che mai.

Ecco 20 delle funzionalità più entusiasmanti e di impatto che sono state introdotte di recente o che saranno disponibili a breve:

• Query container
• Query di stile
• Selettore :has()
• nth-of microsyntax
• text-wrap: balance
• initial-letter
• Unità di visualizzazione dinamiche
• Spazi colore ad ampia gamma
• color-mix()
• Nesting
• Livelli a cascata
• Stili con ambito
• Funzioni trigonometriche
• Proprietà di trasformazione individuali
• popover
• anchor positioning
• selectmenu
• Transizioni di proprietà discrete
• Animazioni basate sullo scorrimento
• Visualizzare le transizioni

Il nuovo design adattabile

Iniziamo con alcune nuove funzionalità di progettazione reattiva. Le nuove funzionalità della piattaforma ti consentono di creare interfacce logiche con componenti che possiedono le proprie informazioni di stile reattivo, creare interfacce che sfruttano le funzionalità del sistema per offrire UI più native e consentire all'utente di partecipare al processo di progettazione con query sulle preferenze dell'utente per una personalizzazione completa.

Container Queries

Le query sui contenitori sono diventate di recente stabili in tutti i browser moderni. Consentono di eseguire query sulle dimensioni e sullo stile di un elemento principale per determinare gli stili da applicare a uno qualsiasi dei relativi elementi secondari. Le media query possono accedere e sfruttare solo le informazioni del viewport, il che significa che possono funzionare solo su una visualizzazione macro del layout di una pagina. Le query sui contenitori, invece, sono uno strumento più preciso che può supportare qualsiasi numero di layout o layout all'interno di altri layout.

Nell'esempio seguente della posta in arrivo, la barra laterale Posta in arrivo principale e Preferiti sono entrambi contenitori. Le email al loro interno modificano il layout a griglia e mostrano o nascondono il timestamp in base allo spazio disponibile. Si tratta dello stesso componente all'interno della pagina, che viene visualizzato in modi diversi

Poiché abbiamo una query sui contenitori, gli stili di questi componenti sono dinamici. Se regoli le dimensioni e il layout della pagina, i componenti rispondono allo spazio allocato individualmente. La barra laterale diventa una barra superiore con più spazio e il layout assomiglia di più alla posta in arrivo principale. Quando lo spazio è ridotto, entrambi vengono visualizzati in formato compresso.

Scopri di più sulle query sui contenitori e sulla creazione di componenti logici in questo post.

Query di stile

La specifica della query sul contenitore consente anche di eseguire query sui valori di stile di un contenitore principale. Questa funzionalità è attualmente implementata parzialmente in Chrome 111, dove puoi utilizzare le proprietà personalizzate CSS per applicare gli stili dei contenitori.

L'esempio seguente utilizza le caratteristiche meteorologiche memorizzate nei valori delle proprietà personalizzate, ad esempio pioggia, sole e nuvoloso, per definire lo stile dello sfondo e dell'icona indicatore della scheda.

@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 della proprietà personalizzata e ridurre la ripetizione del codice. Attualmente sono in discussione le query di intervallo per applicare 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 la 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 disponibili nei browser moderni. Con :has(), puoi applicare stili controllando se un elemento principale contiene la presenza di elementi secondari specifici o se questi elementi secondari si trovano in uno stato specifico. Ciò significa che ora abbiamo essenzialmente un selettore principale.

Partendo dall'esempio di query del contenitore, puoi utilizzare :has() per rendere i componenti ancora più dinamici. In questo caso, a un elemento con una "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 è limitata alla selezione dei genitori. Puoi anche applicare uno stile a tutti gli elementi secondari all'interno dell'elemento principale. Ad esempio, il titolo è in grassetto quando l'elemento ha la stella. Questo risultato si ottiene con .item:has(.star) .title. L'utilizzo del selettore :has() consente di accedere a elementi principali, elementi secondari e persino elementi di pari livello, rendendo questa API molto flessibile, con nuovi casi d'uso che emergono ogni giorno.

Per saperne di più ed esplorare altre demo, consulta questo post del blog su :has().

Sintassi nth-of

La piattaforma web ora offre una selezione più avanzata di nth-child. La sintassi avanzata nth-child introduce una nuova parola chiave ("of") che ti consente di utilizzare la micro sintassi esistente An+B con un sottoinsieme più specifico in cui eseguire la ricerca.

Se utilizzi nth-child normale, ad esempio :nth-child(2) nella classe speciale, il browser selezionerà l'elemento a cui è applicata la classe speciale e che è anche il secondo elemento figlio. Ciò è in contrasto con :nth-child(2 of .special), che prima prefiltra tutti gli elementi .special e poi sceglie il secondo elemento da questo elenco.

Scopri di più su questa funzionalità nel nostro articolo sulla sintassi nth-of.

text-wrap: balance

I selettori e le query di stile non sono gli unici punti in cui possiamo incorporare la logica all'interno dei nostri stili; anche la tipografia è un altro punto. A partire da Chrome 114, puoi utilizzare il bilanciamento del wrapping del testo per le intestazioni utilizzando la proprietà text-wrap con il valore balance.

Per bilanciare il testo, il browser esegue una ricerca binaria della larghezza più piccola che non causa righe aggiuntive, fermandosi a un pixel CSS (non pixel di visualizzazione). Per ridurre ulteriormente i passaggi nella ricerca binaria, il browser inizia con l'80% della larghezza media della linea.

Scopri di più in questo articolo.

initial-letter

Un altro bel miglioramento della tipografia web è initial-letter. Questa proprietà CSS offre un maggiore controllo per lo stile della lettera iniziale rientrata.

Utilizza initial-letter sullo pseudo elemento :first-letter per specificare: Le dimensioni della lettera in base al numero di righe che occupa. L'offset del blocco della lettera, o "rientro", in cui verrà posizionata la lettera.

Scopri di più sull'utilizzo di intial-letter qui.

Unità di visualizzazione dinamiche

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 100vh (100% dell'altezza dell'area visibile) significhi "essere alto quanto l'area visibile", ma l'unità vh non tiene conto di elementi come le barre di navigazione a scomparsa sui dispositivi mobili, quindi a volte risulta troppo lunga e causa lo scorrimento.

Per risolvere questo problema, ora abbiamo nuovi valori di unità sulla piattaforma web, tra cui: - Altezza e larghezza dell'area visibile ridotta (o svh e svw), che rappresentano le dimensioni più piccole dell'area visibile attiva. - Altezza e larghezza del viewport grandi (lvh e lvw), che rappresentano le dimensioni più grandi. - Altezza e larghezza dinamiche dell'area visibile (dvh e dvw).

Le unità di visualizzazione dinamiche cambiano valore quando le barre degli strumenti dinamiche aggiuntive del browser, come la barra degli indirizzi in alto o la barra delle schede in basso, sono visibili e quando non lo sono.

Per saperne di più su queste nuove unità, leggi Le unità viewport grandi, piccole e dinamiche.

Spazi colore ad ampia gamma

Un'altra novità importante della piattaforma web sono gli spazi colore ad ampia gamma. Prima che il colore ad ampia gamma diventasse disponibile sulla piattaforma web, potevi scattare una fotografia con colori vivaci, visualizzabile su dispositivi moderni, ma non potevi ottenere un pulsante, un colore del testo o uno sfondo che corrispondesse a quei valori vivaci.

Ora, però, abbiamo a disposizione una gamma di nuovi spazi colore sulla piattaforma web, tra cui REC2020, P3, XYZ, LAB, OKLAB, LCH e OKLCH. Scopri i nuovi spazi colore web e altro ancora nella guida ai colori HD.

In DevTools puoi vedere immediatamente come è stata ampliata la gamma di colori, con la linea bianca che delinea la fine della gamma sRGB e l'inizio della gamma di colori con gamut più ampio.

Sono disponibili molti altri strumenti per il colore. Non perderti nemmeno tutti i fantastici miglioramenti ai gradienti. Adam Argyle ha persino creato un nuovo strumento per aiutarti a provare un nuovo selettore di colori web e un generatore di sfumature. Provalo su 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 combinati. Lo spazio colore in cui esegui il mixaggio influisce sui risultati. Lavorare in uno spazio colore più percettivo come oklch attraverserà una gamma di colori diversa rispetto a sRGB.

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() fornisce una funzionalità a lungo richiesta: la possibilità di conservare i valori di colore opachi aggiungendo un po' di trasparenza. Ora puoi utilizzare le variabili di colore del brand durante la creazione di variazioni di questi colori con opacità diverse. Per farlo, devi mescolare un colore con la trasparenza. Se mescoli il blu del tuo brand con il 10% di trasparenza, ottieni un colore del brand opaco al 90%. Puoi notare come questo ti consenta di creare rapidamente sistemi di colori.

Puoi vedere questa funzionalità in azione in Chrome DevTools oggi con una bellissima icona di diagramma di Venn di anteprima nel riquadro degli stili.

Per altri esempi e dettagli, consulta il nostro post del blog su color-mix o prova questo playground di color-mix().

CSS Foundations

La creazione di nuove funzionalità che offrono vantaggi evidenti agli utenti è una parte dell'equazione, ma molte delle funzionalità che verranno implementate in Chrome hanno lo scopo di migliorare l'esperienza degli sviluppatori e di creare un'architettura CSS più affidabile e organizzata. Queste funzionalità includono nidificazione CSS, livelli a cascata, stili con ambito, funzioni trigonometriche e proprietà di trasformazione individuali.

Annidamento

L'annidamento di CSS, una funzionalità di Sass molto apprezzata e una delle richieste più frequenti degli sviluppatori CSS da anni, sta finalmente arrivando sulla piattaforma web. L'annidamento consente agli sviluppatori di scrivere in un formato più conciso e raggruppato che riduce la ridondanza.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Puoi anche nidificare le query multimediali, il che significa che puoi nidificare anche le query sui contenitori. Nell'esempio seguente, una scheda viene modificata da un layout verticale a un layout orizzontale se il contenitore ha una larghezza sufficiente:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

La regolazione del layout a flex si verifica quando il contenitore ha uno spazio in linea disponibile maggiore o uguale a 480px. Il browser applicherà semplicemente il nuovo stile di visualizzazione quando le condizioni sono soddisfatte.

Per ulteriori informazioni ed esempi, consulta il nostro post sull'annidamento CSS.

Livelli a cascata

Un altro punto dolente per gli sviluppatori che abbiamo identificato è garantire la coerenza degli stili che prevalgono sugli altri. Una parte della soluzione consiste nel controllare meglio la cascata CSS.

I livelli a cascata risolvono questo problema consentendo agli utenti di controllare quali livelli hanno una priorità più alta rispetto agli altri, il che significa un controllo più preciso di quando vengono applicati gli stili.

Scopri di più su come utilizzare i livelli a cascata in questo articolo.

CSS con ambito

Gli stili CSS con ambito consentono agli sviluppatori di specificare i limiti per 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 potrai utilizzare @scope.

In questo caso, stiamo definendo l'ambito di un elemento .title in base a un elemento .card. In questo modo, l'elemento del titolo non entrerà 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 live:

Scopri di più su @scope nella specifica css-cascade-6.

Funzioni trigonometriche

Un altro elemento della nuova infrastruttura CSS sono le funzioni trigonometriche che vengono aggiunte alle funzioni matematiche CSS esistenti. Queste funzioni sono ora 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 riportata di seguito, i punti ruotano attorno a un punto centrale. Invece di ruotare ogni punto attorno al proprio centro e poi spostarlo verso l'esterno, ogni punto viene traslato sugli assi X e Y. Le distanze sugli assi X e Y sono determinate prendendo in considerazione rispettivamente il cos() e il sin() di --angle.

Per informazioni più dettagliate su questo argomento, consulta il nostro articolo sulle funzioni trigonometriche.

Proprietà di trasformazione individuali

L'ergonomia per gli sviluppatori continua a migliorare con le singole funzioni di trasformazione. Dall'ultima volta che abbiamo organizzato I/O, le trasformazioni individuali sono diventate stabili in tutti i browser moderni.

In passato, si utilizzava la funzione di trasformazione per applicare le funzioni secondarie per scalare, ruotare e traslare un elemento dell'interfaccia utente. Questa operazione comportava molte ripetizioni ed era particolarmente frustrante quando si applicavano 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 tue 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 di traslazione, rotazione o scala possono avvenire contemporaneamente a velocità di variazione diverse in momenti diversi durante l'animazione.

Per ulteriori informazioni, consulta questo post sulle singole funzioni di trasformazione.

Componenti personalizzabili

Per assicurarci di soddisfare alcune delle esigenze chiave degli sviluppatori tramite la piattaforma web, stiamo collaborando con il gruppo della community OpenUI e abbiamo identificato tre soluzioni con cui iniziare:

1. Funzionalità popup integrate con gestori di eventi, una struttura DOM dichiarativa e valori predefiniti accessibili.
2. Un'API CSS per collegare due elementi tra loro per abilitare il posizionamento dell'ancora.
3. Un componente di menu a discesa personalizzabile, per quando vuoi applicare uno stile ai contenuti all'interno di una selezione.

Popover

L'API Popover offre agli elementi alcune funzionalità integrate di supporto del browser, ad esempio:

• Supporto per il livello superiore, quindi 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.
• Comportamento di chiusura rapida per i popup auto senza costi, in modo che quando fai clic all'esterno di un elemento, il popup venga chiuso, rimosso dalla struttura di accessibilità e la messa a fuoco venga gestita correttamente.
• Accessibilità predefinita per il tessuto connettivo della destinazione del popup e del popup stesso.

Tutto ciò significa che è necessario scrivere meno codice JavaScript per creare tutte queste funzionalità e monitorare tutti questi stati.

La struttura DOM per il popover è dichiarativa e può essere scritta in modo chiaro come assegnare un id e l'attributo popover all'elemento popover. Poi, sincronizza questo ID con l'elemento che aprirà il popup, 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 è un'abbreviazione di popover=auto. Un elemento con popover=auto chiuderà forzatamente gli altri popup quando viene aperto, riceverà il focus quando viene aperto e può essere chiuso con un clic. Al contrario, gli elementi popover=manual non forzano la chiusura di altri tipi di elementi, non ricevono immediatamente lo stato attivo e non si chiudono automaticamente. Si chiudono tramite un pulsante di attivazione/disattivazione o un'altra azione di chiusura.

La documentazione più aggiornata sui popup è attualmente disponibile su MDN.

Posizionamento dell'ancoraggio

I popup vengono spesso utilizzati anche in elementi come finestre di dialogo e descrizioni comando, che in genere devono essere ancorati a elementi specifici. Prendi questo esempio di evento. Quando fai clic su un evento del calendario, viene visualizzata una finestra di dialogo vicino all'evento su cui hai fatto clic. L'elemento del calendario è l'ancora e il popup è la finestra di dialogo che mostra i dettagli dell'evento.

Puoi creare una descrizione comando centrata con la funzione anchor(), utilizzando la larghezza dell'ancora per posizionare la descrizione comando al 50% della posizione x dell'ancora. Poi, utilizza i valori di posizionamento esistenti per applicare il resto degli stili di posizionamento.

Ma cosa succede se il popover non rientra nella finestra in base al modo in cui l'hai posizionato?

Per risolvere questo problema, l'API di posizionamento dell'ancora include posizioni di riserva che puoi personalizzare. L'esempio seguente crea una posizione di riserva denominata "top-then-bottom". Il browser tenterà prima di posizionare il suggerimento nella parte superiore e, se non rientra nell'area visibile, lo posizionerà sotto l'elemento di ancoraggio, nella parte inferiore.

.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 del popover che dell'ancora, puoi creare menu di selezione completamente personalizzabili. Il gruppo della community OpenUI sta esaminando la struttura fondamentale di questi menu e cercando modi per consentire la personalizzazione di qualsiasi contenuto al loro interno. Prendi in considerazione questi esempi visivi:

Per creare l'esempio selectmenu più a sinistra, con i punti colorati corrispondenti al colore che verrà visualizzato all'interno di un evento del calendario, puoi scriverlo nel seguente modo:

<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 di proprietà discrete

Affinché tutto questo avvenga in modo fluido, il web ha bisogno di un modo per animare le proprietà discrete. Si tratta di proprietà che in genere non erano animabili in passato, ad esempio l'animazione da e verso il livello superiore e l'animazione da e verso display: none.

Nell'ambito del lavoro per consentire transizioni fluide per i popup, i menu di selezione e persino gli elementi esistenti come le finestre di dialogo o i componenti personalizzati, i browser stanno attivando nuove funzionalità per supportare queste animazioni.

La seguente demo del popover mostra l'animazione dei 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 direttamente all'elemento per lo stato dopo l'apertura e la chiusura. Per far funzionare tutto con la visualizzazione, è necessario aggiungerlo alla proprietà transition, come segue:

.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 ora alle interazioni, l'ultima tappa di questo tour delle funzionalità dell'interfaccia utente web.

Abbiamo già parlato dell'animazione di proprietà discrete, ma in Chrome sono in arrivo anche alcune API molto interessanti relative alle animazioni basate sullo scorrimento e alle transizioni di visualizzazione.

Animazioni basate sullo scorrimento

Le animazioni basate sullo scorrimento ti consentono di controllare la riproduzione di un'animazione in base alla posizione di scorrimento di un contenitore di scorrimento. Ciò significa che, mentre scorri verso l'alto o verso il basso, l'animazione viene riprodotta in avanti o indietro. Inoltre, con le animazioni basate sullo scorrimento puoi controllare un'animazione in base alla posizione di un elemento all'interno del relativo contenitore di scorrimento. In questo modo, puoi creare effetti interessanti come un'immagine di sfondo parallasse, barre di avanzamento dello scorrimento e immagini che si rivelano man mano che vengono visualizzate.

Questa API supporta un insieme di classi JavaScript e proprietà CSS che ti consentono di creare facilmente animazioni dichiarative basate sullo scorrimento.

Per attivare un'animazione CSS tramite lo scorrimento, utilizza le nuove proprietà scroll-timeline, view-timeline e animation-timeline. Per utilizzare un'API Web Animations JavaScript, passa un'istanza ScrollTimeline o ViewTimeline come opzione timeline a Element.animate()

Queste nuove API funzionano insieme alle API Web Animations e CSS Animations esistenti, il che significa che beneficiano dei vantaggi di queste API. Ciò include la possibilità di eseguire queste animazioni al di fuori del thread principale. Sì, hai letto bene: ora puoi avere animazioni fluide e scorrevoli, basate sullo scorrimento, eseguite al di fuori del thread principale, con poche righe di codice aggiuntive. Cosa c'è di meglio?!

Per una guida approfondita e dettagliata su come creare queste animazioni basate sullo scorrimento, consulta questo articolo sulle animazioni basate sullo scorrimento.

Visualizzare le transizioni

L'API View Transition semplifica la modifica del DOM in un unico passaggio, creando al contempo una transizione animata tra i due stati. Possono essere semplici dissolvenze tra le visualizzazioni, ma puoi anche controllare la transizione delle singole parti della pagina.

Le transizioni di visualizzazione possono essere utilizzate come miglioramento progressivo: prendi il codice che aggiorna il DOM con qualsiasi metodo e inseriscilo nell'API View Transition con un fallback per i browser che non supportano la 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 splendida demo di Maxi Ferreira, altre interazioni con la pagina, come la riproduzione di un video, continuano a funzionare mentre è in corso una transizione di visualizzazione.

Le transizioni di visualizzazione attualmente funzionano con le app a pagina singola (SPA) a partire da Chrome 111. Stiamo lavorando al supporto delle app multipagina. Per saperne di più, consulta la nostra guida completa alle transizioni di visualizzazione.

Conclusione

Scopri tutte le ultime novità di CSS e HTML qui su developer.chrome.com e guarda i video di I/O per altre novità del web.