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

Una Kravets

Bramus

Adam Argyle

Negli ultimi mesi è iniziata un'epoca d'oro per l'interfaccia utente web. Le nuove funzionalità della piattaforma sono state adottate su più browser e supportano più funzionalità web e di personalizzazione che mai.

Ecco 20 delle funzionalità più interessanti e significative lanciate di recente o in arrivo a breve:

• Query sui contenitori
• Query sugli stili
• Selettore :has()
• n-esimo della microsintassi
• text-wrap: balance
• initial-letter
• Unità aree visibili dinamiche
• Spazi di colore a gamma estesa
• color-mix()
• Nidificazione
• Eseguire la visualizzazione a cascata dei livelli
• Stili basati su ambito
• Funzioni trigonometriche
• Proprietà di trasformazione individuali
• popover
• posizionamento di ancoraggio
• selectmenu
• Transizioni di proprietà discrete
• Animazioni basate sullo scorrimento
• Visualizzare le transizioni

Il nuovo responsive

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

Query sui container

Supporto dei browser

• 105
• 105
• 110
• 16

Origine

Le query dei contenitori sono diventate di recente stabili su 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 dei relativi elementi secondari. Le query sui media possono accedere e utilizzare solo le informazioni del viewport, il che significa che possono funzionare solo su una visualizzazione macro del layout di una pagina. Le query dei contenitori, invece, sono uno strumento più preciso che può supportare un numero qualsiasi di layout o layout all'interno di layout.

Nel seguente esempio di posta in arrivo, la barra laterale Posta in arrivo principale e Preferiti sono entrambi contenitori. Le email al loro interno regolano il layout della griglia e mostrano o nascondono il timestamp in base allo spazio disponibile. Si tratta dello stesso componente all'interno della pagina, visualizzato solo in visualizzazioni diverse

Poiché abbiamo una query del contenitore, gli stili di questi componenti sono dinamici. Se regoli le dimensioni e il layout della pagina, i componenti rispondono allo spazio assegnato singolarmente. La barra laterale diventa una barra superiore con più spazio e il layout assomiglia di più alla casella di posta principale. Se lo spazio è ridotto, entrambi vengono visualizzati in un formato compatto.

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

Query di stile

Supporto dei browser

• 111
• 111
• x
• 18

Origine

La specifica della query del contenitore ti 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à CSS personalizzate per applicare gli stili del contenitore.

L'esempio seguente utilizza le caratteristiche meteo memorizzate nei valori delle proprietà personalizzate, ad esempio pioggia, soleggiato e nuvoloso, per applicare uno stile allo sfondo e all'icona dell'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 sui stili. In futuro, avremo query booleane per determinare se esiste un valore della proprietà personalizzata e ridurre la ripetizione del codice. Al momento sono in discussione le query sull'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.

Per saperne di più e visualizzare altre dimostrazioni, consulta il nostro post del blog sulle query di stile.

:has()

Supporto dei browser

• 105
• 105
• 121
• 15,4

Origine

Parlando di funzionalità dinamiche e potenti, il selettore:has() è una delle nuove più potenti funzionalità CSS disponibili nei browser moderni. Con :has(), puoi applicare gli stili controllando se un elemento principale contiene elementi secondari specifici o se questi ultimi sono in uno stato specifico. Ciò significa che ora abbiamo essenzialmente un selettore principale.

Basandoti sull'esempio di query del container, puoi utilizzare :has() per rendere i componenti ancora più dinamici. All'interno, a un elemento viene applicato uno sfondo grigio a un elemento con "stella" e a un elemento con una casella di controllo selezionata su uno sfondo blu.

Tuttavia, questa API non è limitata alla selezione dell'elemento principale. Puoi anche applicare stili a eventuali elementi secondari all'interno dell'elemento principale. Ad esempio, il titolo è in grassetto quando l'elemento contiene l'elemento Aggiungi a Speciali. Questo viene ottenuto con .item:has(.star) .title. L'utilizzo del selettore :has() ti consente di accedere a elementi principali, elementi secondari e persino elementi fratelli, il che rende questa API davvero flessibile, con nuovi casi d'uso che si presentano ogni giorno.

Nota: per evitare rallentamenti delle prestazioni del rendering negli alberi DOM di grandi dimensioni, ti consigliamo di limitare l'ambito a questo selettore il più possibile. Ad esempio, l'utilizzo di :has() per verificare la presenza di corrispondenze nell'elemento HTML principale sarebbe più lento rispetto alla ricerca di corrispondenze in una barra di navigazione o in un elemento della scheda con un albero più piccolo.

Per scoprire di più ed esplorare altre demo, consulta questo post del blog dedicato a :has().

Sintassi di n-esimo di

Supporto dei browser

• 111
• 111
• 113
• 9

La piattaforma web ora offre una selezione più avanzata del figlio n-esimo. La sintassi avanzata figlio-n fornisce una nuova parola chiave ("di"), che ti consente di utilizzare la micro sintassi esistente di An+B, con un sottoinsieme più specifico in cui eseguire la ricerca.

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

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

text-wrap: balance

I selettori e le query di stile non sono gli unici luoghi in cui possiamo incorporare la logica all'interno dei nostri stili; la tipografia è un altro. 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.

Prova una demo

Per bilanciare il testo, il browser esegue efficacemente una ricerca binaria per trovare la larghezza minima che non genera 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 riga.

Prova una demo

Nota: questo è un ottimo miglioramento progressivo che puoi provare oggi, è importante notare che questa API funziona solo fino a 4 righe di testo, quindi è ideale per titoli e titoli, ma probabilmente non è ciò che cerchi con contenuti più lunghi.

Scopri di più in questo articolo.

initial-letter

Supporto dei browser

• 110
• 110
• x
• 9

Origine

Un altro bel miglioramento alla tipografia web è initial-letter. Questa proprietà CSS ti offre un maggiore controllo per lo stile delle iniziali a capo rientrate.

Puoi utilizzare initial-letter nello pseudoelemento :first-letter per specificare: La dimensione della lettera in base al numero di righe che occupa. L'offset del blocco della lettera, o "sink", per la posizione della lettera.

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

Unità di visualizzazione dinamiche

Supporto dei browser

• 108
• 108
• 101
• 15,4

Un problema comune che gli sviluppatori web devono affrontare oggi è la definizione di dimensioni precise e coerenti del viewport completo, in particolare sui dispositivi mobili. In qualità di sviluppatore, vuoi che 100vh (100% dell'altezza dell'area visibile) significhi "abbia la stessa altezza dell'area visibile", ma l'unità 100vh non tiene conto di elementi come le barre di navigazione retrattili sui dispositivi mobili, quindi a volte risulta troppo lunga e causa lo scorrimento.

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

Il valore delle unità della visualizzazione dinamica cambia quando le barre degli strumenti dinamiche aggiuntive del browser, ad esempio l'indirizzo in alto o la barra delle schede in basso, sono visibili e quando non lo sono.

Nota: tieni presente che le unità della visualizzazione dinamica non tengono conto della presenza della tastiera virtuale. A partire da Chrome 108, puoi impostare un metatag per modificare questo comportamento.

Per saperne di più su queste nuove unità, consulta Unità di visualizzazione grandi, piccole e dinamiche.

Spazi colore a gamma estesa

Supporto dei browser

• 111
• 111
• 113
• 15,4

Origine

Un'altra nuova aggiunta importante alla piattaforma web sono gli spazi di colore a gamma estesa. Prima che i colori a gamma estesa diventassero disponibili sulla piattaforma web, potevi scattare una foto con colori vivaci, visibile sui dispositivi moderni, ma non potevi trovare un pulsante, un colore di testo o uno sfondo che corrispondesse a questi valori vivaci.

Viene mostrata una serie di immagini con transizione tra gamut di colori larghe e strette, che illustra la vividezza dei colori e i suoi effetti.
Prova

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

In DevTools puoi vedere immediatamente come si è espansa la gamma di colori, con la linea bianca che delimita la fine della gamma sRGB e l'inizio della gamma di colori a gamma più ampia.

Tanti altri strumenti disponibili per i colori! Non perderti nemmeno tutti i fantastici miglioramenti al gradiente. C'è anche un nuovo strumento creato da Adam Argyle per aiutarti a provare un nuovo selettore di colori web e un generatore di gradienti. Provalo all'indirizzo gradient.style.

color-mix()

Supporto dei browser

• 111
• 111
• 113
• 16.2

Origine

La funzione color-mix() consente di espandere gli spazi di colore. Questa funzione supporta la combinazione di due valori di colore per creare nuovi valori in base ai canali dei colori combinati. Lo spazio di colore in cui esegui la miscelazione influisce sui risultati. Lo spazio colore oklch, che è più percettivo, utilizza una gamma di colori diversa da quella di 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);

Prova la demo

La funzione color-mix() offre una funzionalità richiesta a lungo, ovvero la possibilità di preservare i valori dei colori opachi, aggiungendo al contempo una certa trasparenza. Ora puoi utilizzare le variabili di colore del brand per creare varianti di questi colori con opacità diverse. Per farlo, devi mescolare un colore con il trasparente. Quando mescoli il colore del brand (blu) e trasparente al 10%, ottieni un colore del brand opaco al 90%. Puoi vedere come questo ti consente di creare rapidamente sistemi di colori.

Puoi vedere questa funzionalità in azione in Chrome DevTools oggi stesso con un'icona del diagramma di Venn di anteprima davvero carina nel riquadro degli stili.

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

Basi CSS

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

Annidamento

Supporto dei browser

• 120
• 120
• 117
• 17.2

Origine

Il nesting CSS, una funzionalità molto apprezzata di Sass e una delle principali richieste degli sviluppatori CSS da anni, è finalmente disponibile sulla piattaforma web. La nidificazione 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 sui media, il che significa che puoi nidificare anche le query sui contenitori. Nell'esempio seguente, una scheda passa da un layout verticale a uno orizzontale se il relativo contenitore è abbastanza largo:

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

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

La modifica del layout in 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 saranno soddisfatte.

Per ulteriori informazioni ed esempi, consulta il nostro post sulla nidificazione dei CSS.

Livelli in cascata

Supporto dei browser

• 99
• 99
• 97
• 15,4

Origine

Un altro punto dolente per gli sviluppatori che abbiamo identificato è garantire la coerenza in cui gli stili conquistano gli altri e una parte della risoluzione di questo problema è avere un migliore controllo sulla cascata CSS.

I livelli in cascata risolvono il problema dando agli utenti il controllo sui livelli che hanno una priorità più alta rispetto ad altri, il che significa un controllo più preciso sul momento in cui vengono applicati gli stili.

Esplora il progetto su Codepen.

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

CSS basato sugli ambiti

Supporto dei browser

• 118
• 118
• 
• 17.4

Origine

Gli stili basati sugli ambiti CSS consentono agli sviluppatori di specificare i confini per i quali vengono applicati stili specifici, creando essenzialmente un ambito dei nomi nativo 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 collisioni di stili, ma a breve potranno utilizzare @scope.

In questo caso, stiamo impostando l'ambito di un elemento .title su un .card. In questo modo, l'elemento title 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 limiti di ambito insieme a @layer in questa demo dal vivo:

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

Funzioni trigonometriche

Supporto dei browser

• 111
• 111
• 108
• 15,4

Origine

Un altro elemento della nuova struttura di 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 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 tradotto sugli assi X e Y. Le distanze sugli assi X e Y vengono determinate tenendo conto del cos() e, rispettivamente, del sin() del --angle.

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

Proprietà di trasformazione individuali

Supporto dei browser

• 104
• 104
• 72
• 14.1

Origine

L'ergonomia degli sviluppatori continua a migliorare con le singole funzioni di trasformazione. Dall'ultima conferenza I/O, le singole trasformazioni sono diventate stabili su tutti i browser moderni.

In passato, si utilizzava la funzione di trasformazione per applicare sottofunzioni a scalare, ruotare e tradurre un elemento UI. Questo 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 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 risolvere alcune delle principali esigenze degli sviluppatori tramite la piattaforma web, stiamo collaborando con il gruppo della community OpenUI e abbiamo identificato tre soluzioni per iniziare:

1. Funzionalità popup integrate con gestori di eventi, una struttura DOM dichiarativa e valori predefiniti accessibili.
2. Un'API CSS per eseguire il tethering di due elementi tra loro per consentire il posizionamento di ancoraggio.
3. Un componente del menu a discesa personalizzabile, da utilizzare quando vuoi applicare uno stile ai contenuti all'interno di un selettore.

Popover

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

• Supporto di livello superiore, in modo da non dover gestire z-index. Quando apri un popup o una finestra di dialogo, promuovi l'elemento in un livello speciale nella parte superiore della pagina.
• Comportamento di chiusura rapida gratuito nei popup auto, quindi quando fai clic all'esterno di un elemento, il popup viene chiuso, rimosso dall'albero di accessibilità e lo stato attivo viene gestito correttamente.
• Accessibilità predefinita per il tessuto connettivo del target 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 i popup è dichiarativa e può essere scritta in modo chiaro assegnando all'elemento popup un attributo id e popover. Poi sincronizzi l'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 è una scorciatoia per popover=auto. Un elemento con popover=auto chiuderà forzatamente gli altri popover quando viene aperto, riceverà lo stato attivo quando viene aperto e può essere chiuso con una semplice pressione. Al contrario, gli elementi popover=manual non forzano la chiusura di nessun altro tipo di elemento, non ricevono immediatamente lo stato attivo e non vengono chiusi con una semplice pressione. Si chiudono tramite 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 in elementi come finestre di dialogo e descrizioni comando, che in genere devono essere ancorati a elementi specifici. Prendiamo come esempio questo 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'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'ancoraggio per posizionare la descrizione comando al 50% della posizione x dell'ancoraggio. Quindi, utilizza i valori di posizionamento esistenti per applicare il resto degli stili di posizionamento.

Ma cosa succede se il popup non si adatta all'area visibile in base al modo in cui lo hai posizionato?

Per risolvere il 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 la descrizione comando in alto e, se non si adatta all'area visibile, 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);
  }
}

Nota: puoi essere molto granulare, il che potrebbe essere troppo dettagliato, ma è anche un'opportunità per le librerie e i sistemi di progettazione di scrivere la logica di posizionamento e per te di riutilizzarla ovunque.

Scopri di più sul posizionamento dell'ancora in questo post del blog.

<selectmenu>

Con il posizionamento di popover e ancora, puoi creare menu a discesa completamente personalizzabili. Il gruppo della community OpenUI ha esaminato la struttura di base di questi menu e cercato modi per consentire la personalizzazione di qualsiasi contenuto al loro interno. Fai questi esempi visivi:

Per creare l'esempio selectmenu più a sinistra, con i puntini colorati corrispondenti al colore che verrà visualizzato in 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 di proprietà discrete

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

Nell'ambito del lavoro per abilitare transizioni eleganti per i popup, i menu a discesa e persino elementi esistenti come finestre di dialogo o componenti personalizzati, i browser stanno attivando nuove strutture per supportare queste animazioni.

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

Abbiamo già parlato dell'animazione di proprietà distinte, ma in Chrome sono disponibili anche alcune API molto interessanti per le animazioni basate sullo scorrimento e le transizioni di visualizzazione

Animazioni basate sullo scorrimento

Supporto dei browser

• 115
• 115
• 
• x

Origine

Le animazioni basate sullo scorrimento ti consentono di controllare la riproduzione di un'animazione in base alla posizione di scorrimento di un contenitore scorrevole. Ciò significa che, mentre scorri verso l'alto o verso il basso, l'animazione viene riprodotta avanti o indietro. Inoltre, con le animazioni basate sullo scorrimento puoi anche 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 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 sullo scorrimento.

Per gestire un'animazione CSS tramite scorrimento, utilizza le nuove proprietà scroll-timeline, view-timeline e animation-timeline. Per gestire 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 Web Animations e CSS Animations esistenti, il che significa che sfruttano i vantaggi di queste API. Inclusa la possibilità di eseguire queste animazioni dal thread principale. Sì, leggi bene: ora puoi avere animazioni fluide e fluide, guidate dallo scorrimento, che vengono eseguite dal thread principale, con poche righe di codice extra. Cosa non c'è da amare?

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

Visualizza transizioni

Supporto dei browser

• 111
• 111
• x
• 18

Origine

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 transizioni tra le visualizzazioni, ma puoi anche controllare la modalità di 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 di transizione di visualizzazione 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));
}

La transizione viene gestita 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 fantastica demo di Maxi Ferreira, altre interazioni con le pagine, ad esempio la riproduzione di un video, continuano a lavorare 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. È in corso di sviluppo il supporto delle app con più pagine. Per saperne di più, consulta la nostra guida completa alle transizioni delle visualizzazioni per seguire la procedura passo passo.

Conclusione

Tieniti al passo con le ultime novità in CSS e HTML proprio qui su developer.chrome.com e guarda i video dell'I/O per altre novità web.