Novità dell'interfaccia utente web

Bramus
Una Kravets

Pubblicato: 1° luglio 2026

Al Google I/O 2026, abbiamo condiviso una serie di aggiornamenti in arrivo nella piattaforma UI web. Dal rispetto delle preferenze degli utenti all'implementazione di interazioni naturali, dalla guida alla navigazione alla riduzione del disordine e all'adattamento a vari fattori di forma, il web moderno offre agli sviluppatori strumenti incredibilmente potenti per creare esperienze utente tattili e di alta qualità.

Ecco un riepilogo completo di tutte le funzionalità menzionate nella sessione "Novità dell'interfaccia utente web", strutturato in base al nostro insieme principale di principi UX.

Parte 1: rispetta le preferenze dell'utente

La personalizzazione è fondamentale per l'usabilità del web. Le API web moderne semplificano l'adattamento automatico alle scelte a livello di sistema dell'utente. Anche se questi concetti sembrano elementari e ne parliamo da anni, in realtà esistono alcune nuove API e pattern che semplificano la creazione di questa personalizzazione dinamica.

1. contrast-color()

La funzione CSS contrast-color() accetta un colore di input e restituisce automaticamente black o white, a seconda di quale ha il contrasto più elevato rispetto al colore di input in base all'algoritmo di contrasto minimo WCAG AA. In questo modo, viene garantita la leggibilità senza dover gestire manualmente le coppie di colori di testo e sfondo.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

Scopri di più su contrast-color()

2. light-dark()

La funzione CSS light-dark() ti consente di specificare due valori diversi (colori o immagini) per una proprietà, uno per la modalità Chiaro e uno per la modalità Buio, all'interno di una singola dichiarazione. Il browser seleziona automaticamente il colore di contrasto corretto in base al color-scheme attivo (che deve essere impostato su light, dark o light dark su :root o un elemento principale).

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

La novità di light-dark() è che non è più limitato ai soli valori di colore. A partire da Chrome 150, ora accetta anche due valori di immagine.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. Funzioni personalizzate CSS (@function)

La regola at @function consente di definire funzioni personalizzate e riutilizzabili direttamente all'interno del CSS nativo. Può accettare proprietà personalizzate con ambito locale come argomenti, eseguire calcoli e restituire valori utilizzando il descrittore result, riducendo la necessità di preprocessor.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

In combinazione con le query di stile del contenitore e la funzione CSS if(), puoi creare una funzione --light-dark() personalizzata che funzioni con qualsiasi tipo di valore, come mostrato in questa demo:

4. Query di stile del contenitore

Parte delle query sui contenitori CSS, le query di stile consentono agli sviluppatori di applicare stili agli elementi secondari in base ai valori delle proprietà personalizzate calcolate di un contenitore principale, consentendo componenti dinamici senza richiedere il contenimento esplicito delle dimensioni.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

In questa demo, le query di stile vengono utilizzate per impostare i colori in base a una proprietà personalizzata --theme.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

Scopri di più sulle query di stile

5. Funzione CSS if()

La funzione CSS if() porta la logica condizionale in linea direttamente ai valori delle proprietà CSS. Valuta una serie di condizioni separate da punto e virgola (query di stile, query dei media o query delle funzionalità) e consente di impostare valori diversi associati alla prima condizione true, con un else di riserva facoltativo.

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

Nella demo precedente, la funzione if() viene utilizzata per creare un colore di contrasto a tema in base all'output della funzione contrast-color().

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

La funzione CSS at-rule() da utilizzare con @supports consente agli sviluppatori di rilevare se un browser riconosce una regola at specifica, ad esempio @starting-style o @view-transition.

Ad esempio, per verificare il supporto di @function, utilizzalo nel seguente modo:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

L'utilizzo di at-rule() consente solo di verificare il supporto di base della regola stessa e non può essere utilizzato per testare descrittori, preludi o blocchi di regole completi specifici. Sono disponibili soluzioni alternative per rilevare funzionalità come query ancorate o query di stile.

Scopri di più su @supports at-rule

7. <meta name="text-scale">

Il metatag HTML text-scale consente alla pagina di scalare le dimensioni iniziali del carattere dell'elemento radice <html> in proporzione alle impostazioni di scalabilità del testo a livello di sistema operativo e browser, il che è particolarmente importante per le piattaforme mobile.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

Una volta applicata, la dimensione del carattere dell'elemento html viene ora determinata dal sistema operativo, quindi non è necessario impostare un font-size di base. Se poi utilizzi lunghezze con unità relative come em e rem, i valori in pixel calcolati si basano su questa dimensione del carattere di base.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

Dalla scheda Rendering di DevTools puoi emulare la dimensione del carattere preferita. Utilizza il menu a discesa per modificare il valore.

Scopri di più su <meta name=text-scale>

Parte 2: implementa le interazioni naturali

Movimenti fisici intuitivi e gesti naturali sono fondamentali per rendere le esperienze web tattili come le applicazioni native. Il CSS moderno ti aiuta a raggiungere questo obiettivo più facilmente.

8. Funzione di easing linear()

La funzione di accelerazione linear() consente di creare curve di transizione personalizzate complesse (come rimbalzi, molle o sovraelongazioni elastiche) interpolando linearmente tra un numero illimitato di punti di avanzamento specificati.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

Nella seguente demo, linear() viene utilizzato per dare alla finestra di dialogo un'accelerazione naturale quando viene mostrata o nascosta.

Scopri di più su linear()

9. @starting-style

La regola CSS @starting-style definisce i valori iniziali delle proprietà di un elemento da cui vuoi eseguire la transizione quando l'elemento viene visualizzato per la prima volta nel DOM o quando il relativo display cambia da none a un valore visibile, per consentire transizioni di ingresso fluide.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Nella demo precedente, questo valore viene utilizzato per animare l'elemento <dialog> quando diventa visibile per la prima volta.

10. transition-behavior: allow-discrete

La proprietà transition-behavior (spesso utilizzata come allow-discrete nell'abbreviazione transition) consente di eseguire la transizione di proprietà discrete come display o overlay, garantendo che gli elementi rimangano visibili durante le animazioni di uscita prima di essere nascosti.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() e sibling-count()

Le funzioni CSS sibling-index() e sibling-count() restituiscono numeri interi che rappresentano la posizione di un elemento in base a 1 tra i relativi elementi di pari livello e il numero totale di elementi di pari livello, rispettivamente. Sono perfette per calcolare dinamicamente i ritardi delle animazioni scaglionate in CSS senza JavaScript.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

In questa demo, i contenuti della finestra di dialogo sono sfalsati utilizzando sibling-index() in animation-delay

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. Chiusura leggera della finestra di dialogo (attributo closedby)

L'attributo closedby nell'elemento <dialog> (con valore any) consente di utilizzare il comportamento dichiarativo "light dismiss", chiudendo automaticamente le finestre di dialogo modali quando si fa clic al di fuori o si preme ESC, senza richiedere JavaScript personalizzato.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

Puoi provarlo nella demo precedente.

13. corner-shape

La proprietà abbreviata sperimentale corner-shape consente agli sviluppatori di modificare gli angoli arrotondati (da border-radius) per creare forme visive personalizzate come bevel, scoop, notch o squircle (tramite superellipse()). I bordi, le ombre e i contorni di messa a fuoco si adattano automaticamente alla forma.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Parte 3: Fornisci la navigazione guidata

Guidare il percorso dell'utente aiuta a mantenere il contesto e a comprendere il flusso dell'applicazione, eliminando i ricaricamenti disorientanti. Puoi farlo in diversi modi, ad esempio con le transizioni di visualizzazione, che hanno ricevuto alcuni aggiornamenti recenti.

14. Transizioni di visualizzazione nello stesso documento

Parte dell'API View Transition, le transizioni nello stesso documento forniscono un meccanismo per animare gli stati DOM nelle applicazioni a pagina singola (SPA) acquisendo snapshot e eseguendo la transizione utilizzando CSS.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

Scopri di più sulle transizioni di visualizzazione nello stesso documento

15. Transizioni di visualizzazione tra documenti

Estende l'API View Transition alle applicazioni multipagina (MPA), consentendoti di creare transizioni animate e fluide durante la navigazione tra documenti diversi abbinando gli elementi con lo stesso view-transition-name tra le pagine.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Scopri di più sulle transizioni di visualizzazione tra documenti

16. Transizioni di visualizzazione con ambito elemento

Introdotte in Chrome 147, le transizioni di visualizzazione con ambito elemento ti consentono di eseguire una transizione di visualizzazione solo su un sottoalbero DOM specifico (utilizzando element.startViewTransition()) mantenendo il resto della pagina attivo e interattivo.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

Quando viene avviata una transizione di visualizzazione con ambito elemento, viene eseguita in isolamento: esegue la scansione solo di questo sottoalbero per gli elementi con un view-transition-name e lo pseudo ::view-transition viene inserito nella radice dell'ambito stesso. L'isolamento è possibile grazie all'applicazione automatica di view-transition-scope: all.

Ciò consente l'esecuzione simultanea di più transizioni di visualizzazione, nonché l'annidamento delle transizioni di visualizzazione: mentre gli elementi di queste liste vengono riprodotti in ordine casuale, puoi anche scambiare le liste stesse.

Inoltre, gli pseudoelementi del gruppo vengono nidificati automaticamente e l'overflow dello pseudoelemento secondario del gruppo contenitore viene troncato quando necessario.

Le transizioni di visualizzazione con ambito sono perfette per le micro-interazioni e la trasformazione stateful nella pagina, in quanto forniscono all'utente più contesto quando si verifica una modifica visiva. Questo è un ottimo modo per migliorare l'usabilità della tua applicazione, oltre a migliorarne l'aspetto e l'esperienza utente. Queste piccole cose fanno una grande differenza.

Scopri di più sulle transizioni di visualizzazione con ambito elemento

17. Transizioni di visualizzazione in due fasi

Si tratta di una funzionalità sperimentale che avvia immediatamente una transizione di visualizzazione tra documenti senza attendere che il nuovo DOM sia pronto, eseguendo prima la transizione a una schermata scheletro o a un'interfaccia utente di caricamento intermedia, prima di continuare con la transizione di visualizzazione tra documenti.

Scopri di più sulle transizioni di visualizzazione in due fasi

18. Animazioni basate sullo scorrimento

Le animazioni basate sullo scorrimento collegano l'avanzamento di un'animazione CSS direttamente alla posizione di scorrimento di un contenitore di scorrimento, consentendo agli sviluppatori di creare interfacce basate sullo scorrimento, come effetti di parallasse efficienti e indicatori di scorrimento.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. Animazioni attivate dallo scorrimento

Una novità di Chrome sono le animazioni attivate dallo scorrimento. Le animazioni attivate dallo scorrimento attivano un'animazione CSS standard basata sul tempo quando viene superato un limite di scorrimento (utilizzando timeline-trigger per definire l'attivatore e animation-trigger per riprodurlo), fornendo un'alternativa dichiarativa a IntersectionObserver.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Il meccanismo sottostante per le animazioni attivate dallo scorrimento sono i trigger della sequenza temporale, che sono attivi o non attivi.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

Attiva il visualizzatore nella seguente demo per vedere cosa succede: il primo intervallo è l'intervallo di attivazione e determina quando l'attivatore diventa attivo. Il secondo intervallo è l'intervallo attivo, che determina per quanto tempo deve rimanere attivo.

Scopri di più sulle animazioni attivate dallo scorrimento

20. scroll-target-group: auto

Ora puoi creare uno scrollspy CSS nativo che evidenzia automaticamente i link di navigazione in base alla posizione di scorrimento dell'utente. Se imposti scroll-target-group: auto in un elenco di navigazione, il browser imposta automaticamente aria-current="true" e applica la pseudo-classe :target-current al link attivo. :target-current può essere utilizzato per applicare uno stile più elaborato ai link attivi.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

Scopri di più sulla funzionalità di monitoraggio dello scorrimento CSS con scroll-target-group

21. Opzione container scrollIntoView()

Il metodo scrollIntoView() acquisisce un'opzione container. L'impostazione di target.scrollIntoView({container: 'nearest'}) limita lo scorrimento al più vicino elemento scorrevole principale anziché farlo scorrere fino in cima, evitando uno scorrimento a livello di pagina disorientante.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Utilizza la casella di controllo in questa demo per attivare e disattivare l'opzione:

Scopri di più su container: "nearest"

22. Scorrimento programmatico in attesa

Tutti i metodi di scorrimento programmatici (come scroll(), scrollTo() e scrollIntoView()) ora restituiscono una promessa. Ciò consente agli sviluppatori di await il completamento delle animazioni di scorrimento fluido prima di eseguire la logica successiva (come l'aggiunta di un effetto di evidenziazione).

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Nella seguente demo puoi vederlo in azione: l'elemento viene prima visualizzato, dopodiché viene aggiunto un effetto di evidenziazione.

Parte 4: massimizzare i contenuti, ridurre il rumore

Una delle esperienze web più frustranti è aspettarsi di vedere dei contenuti e ritrovarsi bloccati da popup o banner invasivi. Dai la priorità all'area dei contenuti eliminando il disordine visivo e i bordi delle applicazioni e spostando le azioni secondarie dietro l'interfaccia utente a più livelli.

23. Query sullo stato di scorrimento (scrolled)

Parte delle query sui contenitori CSS, le query scroll-state consentono di applicare uno stile agli elementi secondari in base allo stato di scorrimento di un contenitore (con container-type: scroll-state). La query scrolled (ad esempio scroll-state(scrolled: bottom)) rileva la direzione dello scorrimento relativo più recente, consentendo pattern come la "barra nascosta".

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Scopri di più sul pattern "Hidey Bar"

24. Query sui container ancorati

Il posizionamento dell'ancora CSS include le query sui contenitori ancorati, che ti consentono di verificare quale posizione di riserva (ad esempio fallback: bottom o fallback: flip-block) è attualmente attiva su un elemento posizionato con l'ancora, consentendo aggiornamenti dinamici allo stile di un elemento posizionato con l'ancora (come le frecce dei suggerimenti).

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

Nella seguente demo, un popup posizionato come ancora si riposiziona in base alla posizione di riserva e alla posizione nell'area visibile utilizzando le query sui contenitori ancorati. Quando la descrizione comando si apre sopra l'invoker, l'animazione viene riprodotta dal basso verso l'alto, dall'origine. Quando si trova sotto l'invoker, l'animazione viene riprodotta dall'alto verso il basso.

25. CSS border-shape

La proprietà border-shape consente di definire bordi non rettangolari utilizzando la stessa sintassi della forma di clip-path. A differenza del ritaglio, border-shape mantiene i bordi, i contorni e le ombre allineati visivamente alla forma personalizzata. Inoltre, va oltre le funzionalità di corner-shape, in quanto border-shape è molto più flessibile.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. Funzione CSS shape()

La funzione CSS shape() consente di definire percorsi geometrici complessi in linea nel CSS. Può essere utilizzato con proprietà come clip-path, border-shape o shape-outside per creare forme organiche non rettangolari su cui i contenuti possono fluttuare.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. Posizionamento fisso per asse

Grazie a una recente modifica della specifica di overflow che consente ai contenitori di essere uno scorrimento per un solo asse, il posizionamento fisso ora può monitorare contemporaneamente due diversi contenitori di scorrimento (uno per ogni asse). In questo modo, la prima colonna e la riga superiore fisse di una tabella funzionano come previsto anche all'interno di contenitori di scorrimento a un solo asse.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

Questa funzionalità è disponibile per i test in Chrome 148 con il flag Funzionalità sperimentali della piattaforma web attivato.

Scopri di più su position: sticky per asse

Parte 5: adattarsi al fattore di forma

Uno degli aspetti più preziosi del web è la sua flessibilità. Gli utenti possono navigare sul web da una serie di dispositivi, ognuno con i propri meccanismi di interazione. I layout devono adattarsi fondamentalmente al dispositivo e al metodo di input, indipendentemente dal fatto che sia aperta una tastiera virtuale o che i target tocco siano attivi. Tenere presente il fattore di forma durante la progettazione per il web conferisce al tuo sito o alla tua app web un tocco di raffinatezza in più e allinea le aspettative degli utenti.

28. Gesti di overscroll (aree scorrevoli)

Un esempio di adattamento al fattore di forma è la possibilità di utilizzare interazioni basate su scorrimento e gesti sul web mobile. Puoi utilizzare gli scorrimenti per ottenere alcuni di questi effetti, ma non è sempre un approccio intuitivo.

Il team di Chrome sta lavorando a una soluzione dichiarativa proposta, in discussione con il gruppo della community OpenUI, che consente di creare aree scorrevoli native basate su gesti (ad esempio, elenchi di Gmail scorrevoli o menu laterali chiudibili con scorrimento) utilizzando overscrollcontainer e richiamatori di comandi, che funzionano in modo naturale con il tocco e lo scorrimento.

Scopri di più sui gesti di overscroll

29. HTML in Canvas

L'API HTML-in-Canvas è un importante cambio di paradigma che consente agli sviluppatori di inserire elementi DOM reali all'interno di un <canvas> (utilizzando l'attributo layoutsubtree). Questi elementi rimangono completamente ricercabili, accessibili e supportano funzionalità del browser come il completamento automatico, consentendo al contempo agli shader WebGL/WebGPU di interagire in modo nativo.

Round lampo

Un rapido sguardo ad altre potenti funzionalità che fanno progredire il web.

30. Spostamento con conservazione dello stato DOM (moveBefore())

Il metodo DOM moveBefore() consente di riassegnare i nodi DOM (ad esempio, riproduzione di video, iframe o input selezionati) senza distruggerne lo stato o attivare ricaricamenti.

Ciò significa che i video continuano a essere riprodotti, gli iframe non vengono ricaricati, le animazioni CSS non vengono riavviate e i campi di input mantengono lo stato attivo quando vengono riassegnati al layout.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

Scopri di più su moveBefore()

31. CSS text-fit

text-fit è una proprietà CSS sperimentale che ridimensiona dinamicamente le dimensioni del carattere per adattare con precisione le righe di testo alla larghezza esatta dell'elemento contenitore (ad esempio, text-fit: grow per-line-all).

Scopri di più su text-fit

32. CSS text-box (text-box-trim e text-box-edge)

La proprietà text-box (e le sue forme estese text-box-trim e text-box-edge) taglia lo spazio verticale (interlinea) sopra e sotto il testo, garantendo un allineamento verticale e una centratura perfetti.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

Scopri di più su text-trim

33. Decorazioni per spazi CSS

Le decorazioni per gli spazi CSS portano column-rule a griglia e flexbox e introducono una nuova proprietà row-rule, che consente agli sviluppatori di applicare stili alle grondaie tra righe e colonne. Non dovrai più modificare bordi o pseudo-elementi per applicare lo stile alle regole tra righe e colonne.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Scopri di più sulle decorazioni per spazi vuoti CSS

34. Unità di viewport sensibili alla barra di scorrimento (vw, vh e così via)

Le unità viewport come vw e vh sottraggono automaticamente le dimensioni delle barre di scorrimento (se è garantita la visibilità, utilizzando overflow-y: scroll o scrollbar-gutter: stable dichiarati su :root), impedendo l'overflow orizzontale accidentale quando gli elementi sono impostati su 100vw.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

Scopri di più sulle unità viewport consapevoli della barra di scorrimento

35. Accesso JavaScript agli pseudo-elementi

Le API web ora espongono gli pseudo-elementi CSS (come ::before o ::after) a JavaScript.

Puoi recuperare un'istanza CSSPseudoElement utilizzando Element.pseudo(type) e controllare quale pseudo-elemento ha attivato un evento utilizzando Event.pseudoTarget.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Scopri di più su CSSPseudoElement

Conclusione

Questo è tutto per il nostro riepilogo delle novità dell'interfaccia utente web. Ci auguriamo che queste funzionalità ti aiutino a creare interfacce fantastiche. Al prossimo anno.