Casi d'uso della guida per il web moderno

Pubblicato: 19 maggio 2026

Questo è un elenco generato di tutti i casi d'uso ora disponibili in Modern Web Guidance.

accessibility

accessible-error-announcement

Sincronizza gli stati di accessibilità programmatica (come aria-invalid) con lo stato visivo :user-invalid per garantire che gli utenti di screen reader ricevano feedback sugli errori solo dopo l'interazione, rispecchiando l'esperienza visiva.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

built-in-ai

language-detection

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

language-model

Esegui l'inferenza del linguaggio naturale sul dispositivo nel browser utilizzando l'API Prompt, con output di streaming, risposte JSON strutturate e gestione delle sessioni multi-turno.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

summarizer

Riassumi i contenuti testuali utilizzando l'API Summarizer sul dispositivo.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

translator

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

css

highlight-text-ranges

Evidenzia intervalli di testo arbitrari in una pagina, ad esempio risultati di ricerca, errori ortografici o cursori di modifica collaborativa.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

forms

animated-select-picker

Crea un componente di selezione personalizzato il cui menu a discesa è animato. Ad esempio, il menu appare in dissolvenza o scorre nella visualizzazione oppure le opzioni vengono animate al momento della selezione.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

autofill-address-form

Crea un modulo per l'indirizzo con attributi di completamento automatico corretti e supporto della compilazione automatica.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

autofill-highlight-inputs

Utilizza CSS per evidenziare i campi del modulo che sono stati compilati automaticamente dal browser e non modificati dall'utente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

autofill-payment-form

Crea un modulo di pagamento che raccolga i dati della carta con valori di completamento automatico corretti e supporto della compilazione automatica.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

autofill-sign-in-form

Crea un modulo di accesso con valori di completamento automatico corretti e supporto della compilazione automatica.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

autofill-sign-up-form

Crea un modulo di registrazione con valori di completamento automatico corretti e supporto della compilazione automatica.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

brand-consistent-forms

Abbina le caselle di controllo, i pulsanti di opzione, i cursori di intervallo e le barre di avanzamento alla tavolozza dei colori del tuo sito senza sostituirli con componenti personalizzati.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

branded-select-styling

Crea elementi di selezione personalizzati in cui pulsante, selettore, icona a forma di freccia e segno di spunta corrispondono perfettamente alla tipografia, ai colori, alla spaziatura e ai bordi del tuo brand o del tuo sistema di progettazione.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

custom-select-picker-layouts

Crea selettori personalizzati le cui opzioni sono posizionate in modi unici o interessanti, anziché nel tradizionale elenco di opzioni impilate.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

form-fields-automatically-fit-contents

Consenti ai campi del modulo di espandersi e ridursi in base all'input dell'utente, ad esempio quando l'utente digita o seleziona un'opzione diversa. Applica limiti di dimensioni massime e minime per creare campi del modulo dinamici e adattabili conformi al design della pagina.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

required-field-feedback

Fornisci il messaggio di errore per i campi del modulo obbligatori che sono stati ignorati o lasciati vuoti solo dopo l'interazione dell'utente, per evitare errori preventivi e garantire che il feedback sia tempestivo e pertinente al contesto del flusso dell'utente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

rich-media-picker

Crea un componente di selezione personalizzato le cui opzioni possono contenere una formattazione HTML complessa (ad es. immagini, icone e altra formattazione avanzata) anziché solo testo normale.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

select-menu-interaction

Convalida che sia stata scelta un'opzione non predefinita in un menu di selezione solo dopo che l'utente ha interagito con il controllo.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

validate-input-after-interaction

Mostra il feedback di convalida dei campi del modulo (ad es. requisiti di complessità della password o formato email) solo dopo che l'utente ha terminato l'interazione iniziale, evitando errori prematuri al caricamento della pagina o mentre l'utente sta digitando.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

passkeys

passkey-authentication

Autentica un utente di ritorno con una passkey per l'accesso principale.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

passkey-conditional-create

Registra automaticamente una passkey per un utente esistente dopo un accesso riuscito con password.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

passkey-management

Consenti agli utenti di visualizzare e gestire le passkey registrate nel proprio account.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

passkey-reauthentication

Verifica l'identità di un utente che ha eseguito l'accesso utilizzando le passkey esistenti prima di un'azione sensibile.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

passkey-registration

Registra una passkey per un account utente esistente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

performance

batch-analytics-events

Raggruppa più eventi di analisi in un unico beacon per ridurre al minimo la contesa di rete e il carico del server, fornendo comunque aggiornamenti in tempo reale.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

break-up-long-tasks

Dividi l'elaborazione sincrona pesante (calcoli complessi e/o cicli lunghi) o gli aggiornamenti DOM per consentire al browser di gestire l'input utente e ridisegnare la schermata.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

calculate-total-foreground-time

Calcola il tempo totale trascorso da un utente a visualizzare una pagina, escludendo i periodi in cui la scheda era in background.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

conditional-async-dependencies

Carica o inizializza in modo condizionale le dipendenze asincrone (ad esempio l'importazione di polyfill per le funzionalità web mancanti) senza richiedere un'orchestrazione complessa in tutte le dipendenze di script di una pagina.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

defer-rendering-heavy-content

Riduci i tempi di rendering nelle pagine web con molti contenuti (ad es. pagine con feed lunghi, molti articoli o dashboard complesse) posticipando il rendering di tutti i contenuti che non sono immediatamente visibili all'utente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

defer-work-until-scroll-ends

Rimanda operazioni costose come aggiornamenti del DOM, recupero dei dati, monitoraggio di Analytics o ricalcolo del layout fino al termine dello scorrimento per mantenere prestazioni di scorrimento fluide.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

deprioritize-background-fetches

Ridurre la priorità dei recuperi di dati in background effettuati con l'API Fetch per evitare conflitti di rete con le richieste avviate dagli utenti.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

detect-initial-visibility-state

Determinare in modo affidabile se una pagina è stata caricata inizialmente in background, anche nei casi in cui lo script viene caricato in modo asincrono dopo che l'utente ha portato la pagina in primo piano.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

efficient-background-processing

Risparmia risorse di sistema e batteria mettendo in pausa l'esecuzione di JavaScript in background (ad esempio animazioni <canvas>, rendering WebGL o polling di dati WebSocket ad alta frequenza) quando il componente non è visibile sullo schermo e riprendendola appena in tempo quando torna visibile.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

faster-spa-view-transitions

Consente transizioni più rapide alle visualizzazioni visitate in precedenza in un'applicazione a pagina singola (SPA) conservando il relativo stato DOM strutturale anziché distruggerle e ricrearle a ogni navigazione.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

full-session-analytics

Monitora in modo affidabile i dati di analisi, gli errori e i dati di telemetria durante l'intera visita alla pagina dell'utente e posticipa l'invio dei dati fino a quando l'utente non esce dalla pagina.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

identify-heavy-scripts

Identificare gli script maggiormente responsabili dei frame di animazione lunghi

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

identify-inp-causes

Identificare il codice JavaScript con esecuzione lenta che influisce sulla metrica INP

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

improve-next-page-load-performance

Migliora le prestazioni di caricamento pagina eseguendo il precaricamento o il prerendering delle pagine che l'utente probabilmente visiterà successivamente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

interactions-in-complex-layouts

Rendi le interazioni più rapide e reattive (riducendo i punteggi Interaction to Next Paint (INP)) evitando i ricalcoli del layout in layout complessi, come dashboard con molti dati o griglie in stile foglio di lavoro.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

optimize-image-priority

Ottimizza la priorità di caricamento delle immagini candidate Largest Contentful Paint (LCP) e riduci la priorità delle immagini non critiche per ridurre i ritardi di caricamento delle risorse critiche.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

optimize-preload-priority

Ottimizza la priorità relativa dei contenuti precaricati per ridurre i ritardi di caricamento delle risorse critiche.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

optimize-script-priority

Ottimizza la priorità di caricamento degli script aumentando gli script asincroni critici e riducendo la priorità degli script non essenziali o late-body per migliorare il sequenziamento e ridurre i ritardi.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

resolution-optimized-pseudo-elements

Utilizza immagini ottimizzate per la risoluzione negli pseudo elementi CSS (come ::before e ::after) per ridurre il numero di nodi DOM.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

schedule-tasks-by-priority

Pianifica le attività con priorità diverse per garantire che il lavoro critico venga eseguito per primo, mentre il lavoro in background viene posticipato.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

sequence-distributed-events

Registra e sequenzia le operazioni in microservizi distribuiti o ambienti di tracciamento ad alta velocità effettiva registrando i timestamp con una risoluzione al nanosecondo.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

user-experience

adapt-scrollbar-to-contrast-preferences

Migliorare la visibilità della barra di scorrimento per gli utenti che preferiscono interfacce ad alto contrasto

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

anchor-positioning-tab-underline

Esegui la transizione di un elemento senza problemi tra due posizioni dell'elemento di destinazione. Ad esempio, spostando la sottolineatura di una scheda selezionata tra la scheda selezionata in precedenza e quella attualmente selezionata.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

animate-element-entry-exit

Nascondi/mostra gli elementi in modo fluido man mano che vengono aggiunti/rimossi dal DOM o man mano che i loro valori di visualizzazione vengono attivati/disattivati.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

animate-to-from-top-layer

Anima elementi come finestre di dialogo, popup e descrizioni comando quando entrano/escono dal livello superiore.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

animate-to-intrinsic-sizes

Anima in modo fluido i componenti interattivi (come fisarmoniche, menu e schede espandibili) verso e dalle loro dimensioni naturali.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

apply-webgl-shaders

Applica effetti visivi personalizzati con shader WebGL ai contenuti HTML.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

calculate-event-differentials

Calcola la durata e il tempo rimanente tra date e orari.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

calculate-with-intrinsic-sizes

Calcola le dimensioni di un elemento in base alle sue dimensioni intrinseche, assicurandoti che rientri nei vincoli di progettazione specificati.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

capture-location-agnostic-data

Registra dati cronologici che non devono cambiare in base alla posizione di un utente, ad esempio date di nascita, sveglie ricorrenti o festività nazionali.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

Crea un carosello di slide con immagini o altri elementi visivi, in cui ogni slide viene animata quando entra, si centra o esce dallo scorrimento. Ad esempio, le slide possono apparire/sparire gradualmente, ruotare, ingrandirsi o rimpicciolirsi e così via.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

Evidenzia visivamente l'elemento non interattivo attualmente agganciato nei caroselli, nelle gallerie o nelle esperienze di scorrimento a pagina intera. Ad esempio, l'espansione di una scheda quando viene spostata o la visualizzazione di contenuti nascosti.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

child-state-based-styling

Crea un componente che cambia il suo stile in base allo stato di uno dei suoi elementi secondari. Ad esempio, un componente che viene visualizzato in modalità chiara o scura a seconda che un pulsante di attivazione/disattivazione del tema sia selezionato o meno.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

complex-shapes

Ritaglia gli elementi e i relativi contenuti in qualsiasi forma libera, come un simbolo, un tratto di pennello o una trama organica, per creare design più espressivi.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

component-specific-light-dark-theme

Forza alcuni elementi a essere in modalità Luce o Buio (ad es. blocchi di codice, lettori multimediali e così via) indipendentemente dalla combinazione di colori della pagina.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

consistent-cross-document-transitions

Assicurati che lo stato della pagina critica sia caricato e stabile prima di avviare una transizione di visualizzazione tra documenti. Ciò significa che gli stili CSS critici vengono caricati e applicati, il JavaScript critico viene caricato ed eseguito e l'HTML visibile per la visualizzazione iniziale della pagina da parte dell'utente è stato analizzato prima dell'esecuzione della transizione.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

content-based-styling

Crea un componente che cambia layout in base alla presenza o meno di elementi secondari specifici. Ad esempio, se il componente contiene un'immagine, utilizza un layout a più colonne, altrimenti utilizza un layout a una sola colonna.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

coordinate-global-events

Pianifica riunioni o eventi futuri associandoli esplicitamente a un fuso orario IANA geografico in modo che gli orari degli eventi rimangano precisi indipendentemente dalle transizioni dell'ora legale, dalle ore "saltate" o "ripetute" durante i cambi di orario.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

cross-document-transitions

Crea transizioni fluide e senza interruzioni tra le navigazioni a pagina intera, ad esempio dissolvenze incrociate, effetti di rivelazione personalizzati o trasformazione dei contenuti da una pagina all'altra.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

customize-scrollbar-color-and-thickness

Personalizzare il colore o lo spessore di una barra di scorrimento

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

dark-mode

Implementa il supporto della modalità scura in modo da rispettare la preferenza dell'utente per il tema chiaro/scuro e adattare l'UI del browser (ad es. barre di scorrimento, controlli dei moduli e così via)

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

declarative-button-actions

Collega in modo dichiarativo un pulsante a qualsiasi elemento per attivare azioni personalizzate specifiche dell'applicazione utilizzando comandi di pulsanti dichiarativi, comandi di invocazione, comandi di pulsanti, comandi personalizzati o azioni di attivazione/disattivazione dichiarative.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

declarative-dialog-popover-control

Attiva/disattiva la visibilità di una finestra di dialogo o di un popup da un pulsante senza scrivere codice JavaScript.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

deliver-optimized-decorative-images

Fornisci immagini decorative ottimizzate (come sfondi, icone dell'interfaccia utente o maschere complesse) fornendo contemporaneamente formati di immagine di nuova generazione (come AVIF o WebP) insieme a più densità di pixel (come 1x e 2x) in modo che il browser possa negoziare dinamicamente la migliore combinazione di dimensioni del file e qualità visiva per le funzionalità del dispositivo dell'utente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

design-token-reactivity

Definisci token di progettazione di ordine superiore, come modalità di densità (compatta, comoda, spaziosa) o temi, e fai in modo che i componenti discendenti reagiscano alle modifiche direttamente e in modo appropriato per il componente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

directional-navigation-transitions

Anima le modifiche dello stato visivo in modo da riflettere la direzione del flusso di navigazione di un utente, ad esempio facendo scorrere i nuovi contenuti da destra quando si va avanti o da sinistra quando si torna a una schermata precedente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

dynamic-sibling-animations

Sfalsa la tempistica dell'animazione o della transizione tra gli elementi di pari livello in modo che ognuno inizi dopo un ritardo calcolato in base alla sua posizione nell'elenco dei pari livello.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

dynamic-sibling-styling

Crea spettri visivi dinamici o disposizioni di layout che si adattano automaticamente al numero di elementi in un gruppo.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

export-html-media-from-canvas

Acquisire ed esportare contenuti HTML dinamici come immagini o fotogrammi video all'interno del canvas.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

expose-canvas-content-to-browser-features

Esporre i contenuti visualizzati in un canvas a funzionalità del browser come tecnologie assistive, traduzione o modalità Lettura.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

flicker-free-client-side-ab-testing

Pubblica ed esegui il rendering di test A/B, test multivariati o altri esperimenti utilizzando JavaScript lato client per modificare o inserire HTML, CSS e JavaScript senza che i contenuti originali vengano visualizzati prima di sfarfallare o lampeggiare per mostrare i contenuti dell'esperimento.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

fluid-scaling

Ridimensiona elementi come la dimensione del carattere, la spaziatura e le dimensioni dei contenuti multimediali in modo uniforme in base alle dimensioni del contenitore principale anziché utilizzare punti di interruzione fissi.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

format-human-readable-durations

Presenta agli utenti il tempo trascorso o le durate in un formato leggibile e localizzato, con la flessibilità di visualizzare suddivisioni dettagliate delle unità (ad es. "1 ora e 30 minuti") o conteggi totali delle unità (ad es. "90 minuti") a seconda del contesto.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

group-element-transitions

Esegui la transizione di un gruppo di elementi simili contemporaneamente utilizzando la stessa logica di transizione, ad esempio rimuovendo un prodotto da un carrello degli acquisti e animando tutti gli altri prodotti nelle loro nuove posizioni.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

improve-text-layout-and-legibility

Migliora il layout e la leggibilità dei contenuti di testo brevi e autonomi, ad esempio titoli non più lunghi di poche righe, consentendo al browser di applicare interruzioni di riga bilanciate in modo uniforme durante il wrapping del testo.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

individual-transform-properties

Anima o esegui l'override delle singole proprietà di trasformazione CSS (ad es. traslazione, rotazione, scalatura) indipendentemente dalle altre proprietà di trasformazione di un singolo elemento.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

interactive-content-in-3d-scenes

Integrare elementi HTML interattivi in una scena 3D.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

interactive-content-reveal

Crea effetti di rivelazione interattivi, ad esempio un riflettore che segue il puntatore dell'utente per scoprire i dettagli all'interno di un'immagine o di una sezione dell'interfaccia utente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

interest-triggered-action-previews

Mostra un'anteprima live dell'effetto di un pulsante quando un utente segnala interesse (ad es. passando il mouse sopra, mettendo a fuoco o premendo a lungo) ma prima di fare clic.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

interest-triggered-tooltips

Mostra una descrizione comando o informazioni supplementari quando un utente passa il mouse sopra un elemento interattivo, lo seleziona o lo preme a lungo, senza richiedere un clic.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

light-dismiss-a-dialog

Crea una finestra di dialogo modale che può essere chiusa utilizzando la chiusura leggera (ovvero facendo clic o toccando all'esterno della finestra di dialogo)

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

manage-recurring-intervals

Calcola gli intervalli ricorrenti per le fatturazioni degli abbonamenti o i cicli di pagamento, eseguendo automaticamente gli aggiustamenti per i casi limite, ad esempio le transizioni di fine mese (ad es. l'aggiunta di un mese al 31 gennaio), per garantire calcoli accurati dei periodi.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

model-partial-time-concepts

Modella i concetti di data e ora che non hanno intrinsecamente un componente standard (ad esempio un anno, un giorno o una data specifici) senza utilizzare valori segnaposto arbitrari che introducono errori di calcolo.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

move-dom-element-without-losing-state

Sposta o riassegna un elemento DOM senza perdere lo stato importante dell'elemento, ad esempio gli stati di interattività (:focus/:active), lo stato di caricamento, lo stato di animazione/transizione e così via.<iframe>

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

Crea un componente del riquadro di navigazione a scomparsa che, quando viene attivato da un pulsante del menu, scorre dal lato sovrapposto ai contenuti della pagina esistenti e scorre verso l'esterno quando viene chiuso (scorrendo via, toccando all'esterno o premendo Esc).

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

overflow-clipping-control

Regola il limite di ritaglio visibile di un elemento in modo che sia allineato al bordo dei contenuti, al bordo del padding o al bordo del bordo oppure a un offset specificato da uno di questi, offrendo un controllo più granulare sul modo in cui i contenuti vengono ritagliati.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

parallax-scroll-effects

Crea effetti basati sullo scorrimento (ad esempio la parallasse) in cui i livelli in primo piano e di sfondo si muovono a velocità diverse, creando un senso di profondità mentre l'utente scorre la pagina.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

persistent-app-tours

Crea procedure dettagliate di onboarding persistenti utilizzando overlay nativi collegati che rimangono aperti durante l'interazione dell'utente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

persistent-toast-notifications

Crea notifiche toast e overlay non intrusive per messaggi e comunicazioni di stato persistenti e impilabili.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

persistent-top-layer-ui

Mantieni una finestra di dialogo modale, un elemento a schermo intero o un popover nativo visibilmente aperto e funzionalmente attivo quando il nodo DOM sottostante viene spostato o riassegnato nel DOM.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

physics-based-easing

Crea effetti di animazione e transizione personalizzati basati sulla fisica, come rimbalzo e molla, che risultano più naturali e coinvolgenti rispetto alle curve di accelerazione tradizionali.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

platform-controls-dismiss-dialog

Crea una finestra di dialogo modale che può essere chiusa utilizzando azioni utente standard specifiche della piattaforma, ad esempio premendo il tasto Esc sulle piattaforme desktop o un gesto "Indietro" o "Ignora" sulle piattaforme mobile.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

position-aware-tooltips

Crea descrizioni comando e popup con frecce direzionali (o altri stili visivi) che puntano automaticamente nella direzione corretta quando l'elemento viene spostato in una posizione di riserva.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

precise-text-alignment

Ottieni un allineamento verticale preciso con il testo di qualsiasi carattere. Ad esempio, una spaziatura interna visiva esattamente uguale sopra e sotto il testo o l'allineamento perfetto del testo con le icone o le immagini adiacenti.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

prevent-text-wrapping

Assicurati che il browser non inserisca interruzioni di riga nel testo e che consenta al testo di superare i limiti del contenitore.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

pull-to-reveal

Crea una funzionalità di trascinamento per mostrare più contenuti, ad esempio una barra di ricerca, quando l'utente scorre verso il basso sullo schermo.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

reduce-style-repetition

Ridurre la ripetizione eccessiva di stili incapsulando la logica di stile complessa o dinamica in funzioni riutilizzabili (ad esempio, una funzione che calcola un gradiente in base a un insieme di parametri di input).

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

resilient-context-menus-and-nested-dropdowns

Crea menu, descrizioni comando, menu a discesa o overlay contestuali accessibili e reattivi che devono essere collegati a elementi specifici dell'interfaccia utente, garantendo che l'overlay si riposizioni automaticamente (ad esempio, invertendo gli assi) quando incontra i bordi del riquadro visibile, in modo che non venga mai tagliato.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

same-document-transitions

Collega visivamente gli elementi persistenti in diversi stati della pagina o navigazioni in un'applicazione a pagina singola (SPA) (ad es. espandendo la miniatura di un prodotto in un'immagine hero a tutta pagina) modificando in modo fluido le dimensioni, la posizione o altre proprietà di stile.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

scroll-entry-exit-effects

Crea effetti di dissolvenza in entrata, ingrandimento o altri effetti complessi di tipo rivelazione sugli elementi quando entrano ed escono dalla finestra di scorrimento (o viewport) mentre l'utente scorre.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

scroll-position-aware-elements

Crea pulsanti o widget flottanti (torna in alto, scorri fino in fondo, avvio chat e così via) che vengono visualizzati e scompaiono in base allo scorrimento della pagina da parte dell'utente.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

scroll-progress-indicator

Crea una barra di avanzamento dello scorrimento, un tracker di avanzamento a fasi o qualsiasi ausilio visivo che comunichi quanto l'utente ha fatto scorrere una pagina o una sezione.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

scroll-snap-realtime-feedback

Fornisci un feedback visivo in tempo reale negli elementi UI collegati mentre un utente scorre i contenuti allineati allo snap, prima che il gesto di scorrimento venga completato.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

scroll-snap-state-sync

Sincronizza gli indicatori di navigazione, i riquadri dei contenuti collegati e il monitoraggio di Analytics con l'elemento attivo in un contenitore scorrevole.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

scroll-target-on-load

Crea un elenco scorrevole di elementi (ad es. un carosello di immagini o un thread di conversazione di chat) che può essere visualizzato con un particolare elemento scorrevole nella visualizzazione durante il rendering iniziale.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

scrollability-affordance-hints

Crea overlay con ombreggiatura di scorrimento, dissolvenze sfumate o indicatori a freccia direzionali che vengono visualizzati solo quando ci sono effettivamente altri contenuti da scorrere in quella direzione.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

scrollytelling

Anima le proprietà visive di un elemento di destinazione, ad esempio sfumando uno sfondo, modificando il colore di sfondo o per creare esperienze di scrollytelling, il tutto in base alla posizione della finestra di visualizzazione di un elemento completamente diverso.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

search-hidden-content

Nascondere i contenuti dalla visualizzazione utilizzando pattern come fisarmoniche, schede e sezioni "Scopri di più", garantendo al contempo che il testo nascosto venga visualizzato durante le ricerche native "Trova nella pagina", consente l'indicizzazione dei motori di ricerca, supporta i link diretti ai frammenti di URL e mantiene l'accessibilità ARIA.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

shaped-cutouts

Combina più forme per creare ritagli complessi o effetti "knockout" negli elementi, ad esempio aggiungendo una tacca a un elemento.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

shrinking-header-on-scroll

Anima in modo fluido un'intestazione fissa o una copertina a tutta pagina durante lo scorrimento per ridurla dinamicamente, aggiungere ombre e trasformarne il layout su una distanza di scorrimento predefinita.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

size-aware-styling

Crea un componente i cui stili possono dipendere in modo condizionale dalla propria larghezza o altezza, anziché dalla larghezza o altezza del viewport. Ad esempio, un componente scheda che può modificare i layout a seconda delle dimensioni o un pulsante di invito all'azione che può visualizzare in modo condizionale il testo di aiuto in base alla larghezza.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

soft-edge-content-fade

Applica una sfumatura di trasparenza ai bordi dei contenuti per indicare altre aree scorrevoli o per oscurare il testo protetto da paywall.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

stabilize-reactive-state

Gestisci le scadenze o le pianificazioni delle attività nelle visualizzazioni basate sui dati senza effetti collaterali imprevisti dello stato modificabile condiviso.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

stack-drill-down

Crea una navigazione gerarchica a schermo intero che consente agli utenti di visualizzare in dettaglio le visualizzazioni nidificate e scorrere o tornare indietro per tornare alla pagina precedente, con la cronologia del browser sincronizzata.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

style-parent-with-has

Applica uno stile agli elementi padre di un campo del modulo (ad es. etichette o fieldset) quando il campo non è valido.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

support-global-calendar-systems

Visualizzare e calcolare le date in sistemi di calendario non gregoriani (ad es. islamico, ebraico o cinese) in modo accurato per gli utenti internazionali.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

swipe-to-remove

Consenti agli utenti di agire sugli elementi di un elenco (rimuovere, archiviare, contrassegnare come letto e così via) con un gesto di scorrimento orizzontale, in modo che possano elaborare rapidamente le voci senza toccare un controllo separato.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

visually-stable-font-fallbacks

Definisci gli stili dei caratteri in modo che il testo rimanga leggibile e visivamente coerente nel caso in cui si verifichi uno scambio tra il carattere preferito e uno dei caratteri di riserva (o viceversa).

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

visually-stable-mixed-fonts

Definisci gli stili dei caratteri in modo che il testo rimanga leggibile e visivamente coerente nelle situazioni in cui vengono utilizzati più caratteri per il rendering di un singolo blocco di testo.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

visually-texture-content

Applica pattern di texture e usura realistici agli elementi per conferire loro un aspetto organico, invecchiato o di materiale fisico.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

webmcp

agentic-forms

Esporre la funzionalità lato client come strumenti per gli agenti AI annotando i moduli HTML standard con gli attributi WebMCP.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub

agentic-javascript-tools

Registra in modo programmatico le funzioni JavaScript lato client come strumenti per gli agenti di AI utilizzando l'API WebMCP imperativa.

Funzionalità utilizzate:

Visualizza il caso d'uso su GitHub