Guide di Modern Web Guidance

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

Applica effetti visivi personalizzati con gli shader WebGL ai contenuti HTML.

Indicazioni sui colori per il web, inclusi i requisiti di contrasto, le combinazioni di colori chiari e scuri, la modalità Colori forzati e la generazione di tinte e sfumature da un colore di base.

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

Aggiungi decorazioni di testo come sottolineature, sopralinee, barrature o forme completamente personalizzate, con animazioni di visualizzazione, offset personalizzati e rientri finali, nonché un salto dell'inchiostro flessibile.

Personalizza il colore o lo spessore di una barra di scorrimento

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

Integrare elementi HTML interattivi in una scena 3D.

Seleziona un colore del testo leggibile con un contrasto sufficiente su un colore di sfondo dinamico.

Fai in modo che ogni riga di un'intestazione o di un lockup su più righe abbia la stessa larghezza, come nella tipografia in stile poster o con titoli impilati. A differenza del testo giustificato, il testo stesso viene ridimensionato in base alla larghezza anziché alla spaziatura estesa

Acquisisci ed esporta contenuti HTML dinamici come immagini o fotogrammi video dall'interno del canvas.

Esporre i contenuti visualizzati in un canvas alle funzionalità del browser, come le tecnologie per la disabilità, la traduzione o la modalità Lettura.

Migliora il layout e la leggibilità dei contenuti di testo autonomi brevi, ad esempio intestazioni di poche righe, consentendo al browser di applicare interruzioni di riga bilanciate in modo uniforme quando il testo va a capo.

Ottieni un allineamento verticale preciso con il testo di qualsiasi carattere. Ad esempio, un padding visivo esattamente uguale sopra e sotto il testo o un testo perfettamente allineato con le icone o le immagini adiacenti.

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

Applica un gradiente di trasparenza ai bordi dei contenuti per indicare ulteriori aree scorrevoli o per oscurare il testo protetto da paywall.

Personalizza l'interfaccia utente generata dal browser, come la selezione del testo, le barre di scorrimento, i controlli dei moduli e i selettori, con CSS anziché ricrearla con elementi personalizzati.

Best practice per la tipografia per il web, tra cui unità di dimensione dei caratteri, altezza della riga, testo a capo e bilanciamento e tipo fluido che si adatta alla visualizzazione.

Effetti visivi con CSS, come ombre sovrapposte, modalità di fusione, gradienti con interpolazione dei colori prevedibile e pattern come strisce, scacchiere, punti e grafici a torta creati solo con gradienti.

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

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

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

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

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

Forzare determinati elementi in modalità Luce o Buio (ad es. blocchi di codice, media player e così via) indipendentemente dalla combinazione di colori della pagina.

Crea tooltip e popover con frecce direzionali (o altri stili visivi) che puntano automaticamente nella direzione corretta quando l'elemento passa a una posizione di riserva.

Crea una funzionalità di trascinamento per mostrare che consenta all'utente di trascinare verso il basso lo schermo per mostrare altri contenuti, ad esempio una barra di ricerca.

Crea una tabella di dati che presenti i dati tabulari con una semantica di intestazione corretta e che rimanga leggibile e navigabile su schermi di piccole dimensioni e con tecnologie per la disabilità.

Crea pulsanti o widget mobili (torna in alto, scorri verso il basso, pulsanti di avvio della chat e così via) che appaiono e scompaiono a seconda che l'utente abbia eseguito o meno lo scorrimento.

Crea overlay con ombreggiatura di scorrimento, sfumature o indicatori di freccia direzionale che vengono visualizzati solo quando sono effettivamente presenti altri contenuti da scorrere in quella direzione.

Anima in modo fluido un'intestazione fissa o una copertina a pagina intera durante lo scorrimento per rimpicciolirla, aggiungere ombre e trasformare il layout in modo dinamico su una distanza di scorrimento predefinita.

Crea intestazioni di sezione o barre di navigazione fisse che si trasformano visivamente quando sono effettivamente "bloccate " nella parte superiore, cambiando la combinazione di colori o acquisendo un'ombra.

Visualizza e gestisci le icone che possono essere impostate e parametrizzate da CSS, sono veloci da caricare, nitide a qualsiasi risoluzione e sono correttamente esposte (o nascoste) alle tecnologie per la disabilità.

Posiziona menu a discesa, menu a comparsa o riquadri di azioni contestuali collegati a un pulsante di attivazione in modo che invertano automaticamente gli assi ai bordi dell'area visibile anziché essere ritagliati.

Crea un componente scheda che adatta la sua presentazione allo spazio e ai contenuti disponibili.

Crea un componente di menu che mostri un elenco di opzioni o azioni, con supporto per sottomenu nidificati.

Evidenziare la sezione attualmente visibile di una pagina in un menu di navigazione

Crea una barra di avanzamento con stile che comunichi il completamento di un'attività o di un processo, sia in stato determinato che indeterminato.

Crea un componente hovercard che mostri un'anteprima strutturata interattiva della pagina a cui rimanda un determinato tipo di link (ad es. un profilo utente) quando ci passi sopra con il mouse.

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

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

Crea un componente di attivazione/disattivazione della modalità Buio che consenta agli utenti di ignorare la preferenza della combinazione di colori del sistema per il sito corrente.

Crea un componente di finestra di dialogo modale o non modale accessibile, che gestisca lo stato attivo in modo appropriato e che possa essere chiuso nel modo previsto dagli utenti su ogni piattaforma.

Crea un indicatore di caricamento che comunichi lo stato di occupato a tutti gli utenti, rispetti le preferenze di movimento ridotto e si animi in modo efficiente.

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

Crea un componente anello di progresso che rappresenti visivamente lo stato di completamento di un'attività o di un processo, con supporto per i contenuti al centro e uno stile coerente con il brand.

Crea una navigazione gerarchica a schermo intero che consenta agli utenti di visualizzare in dettaglio le visualizzazioni nidificate e di scorrere o tornare indietro, mantenendo sincronizzata la cronologia di navigazione del browser.

Stile delle caselle di controllo, tra cui icone personalizzate, layout, colori e animazioni di selezione/deselezione, preservando al contempo l'accessibilità e la funzionalità native.

Crea effetti di dissolvenza in entrata, aumento di scala o altri effetti di rivelazione complessi sugli elementi quando entrano ed escono dallo scrollport (o dalla viewport) mentre l'utente scorre.

Transizione di un elemento senza interruzioni tra due posizioni degli elementi di destinazione. Ad esempio, lo spostamento di una sottolineatura della scheda selezionata tra la scheda selezionata in precedenza e quella attualmente selezionata.

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

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

Supportare il trascinamento per spostare un elemento mobile nella pagina.

Crea effetti basati sullo scorrimento (come 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.

Evidenzia visivamente l'elemento non interattivo attualmente agganciato in caroselli con allineamento dello scorrimento, gallerie o esperienze di scorrimento a pagina intera. Ad esempio, espandere una scheda quando viene agganciata o mostrare contenuti nascosti.

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 codice 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.

Scagliona i tempi di animazione o transizione tra gli elementi di pari livello in modo che ognuno inizi dopo un ritardo calcolato in base alla sua posizione nell'elenco di elementi di pari livello.

Crea transizioni fluide e senza interruzioni tra le navigazioni nelle pagine intere, come dissolvenze incrociate, effetti di rivelazione personalizzati o trasformazione dei contenuti da una pagina all'altra.

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

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

Anima le modifiche dello stato visivo per 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.

Esegui la transizione di un gruppo di elementi simili contemporaneamente utilizzando la stessa logica di transizione, ad esempio rimuovendo un prodotto da un carrello acquisti e facendo in modo che tutti gli altri prodotti vengano animati nelle nuove posizioni.

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

Crea effetti di rivelazione interattivi, ad esempio un faretto che segue il puntatore dell'utente per mostrare i dettagli di un'immagine o di una sezione della UI.

Mostra un'anteprima dal vivo dell'effetto di un pulsante quando un utente segnala interesse (ad esempio passando il mouse sopra, impostando lo stato attivo o tenendo premuto), ma prima che faccia clic.

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

Anima l'interfaccia utente con transizioni CSS, animazioni, animazioni basate sullo scorrimento e transizioni di visualizzazione, mantenendo il movimento sul compositore e rispettando le preferenze di movimento ridotto.

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

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.

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

Crea una finestra di dialogo modale che possa essere chiusa tramite azioni utente standard specifiche della piattaforma, ad esempio premendo il tasto Esc sulle piattaforme desktop o un gesto "indietro" o "ignora" sulle piattaforme mobile.

Impedisci lo scorrimento della pagina sottostante mentre è aperta una finestra di dialogo modale.

Collega visivamente gli elementi persistenti tra diversi stati della pagina o navigazioni in un'applicazione a pagina singola (SPA) (ad es. espandendo una miniatura del prodotto in un'immagine hero full-bleed) modificando gradualmente le dimensioni, la posizione o altre proprietà di stile.

Anima le modifiche di stato all'interno di un singolo componente (una scheda, un elenco, un riquadro o un altro sottoalbero) mentre il resto della pagina rimane interattivo e altre transizioni vengono eseguite contemporaneamente.

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.

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

Anima le proprietà visive di un elemento target, ad esempio la dissolvenza di uno sfondo, lo spostamento di un colore di sfondo o la creazione di esperienze di scrollytelling, in base alla posizione della porta di scorrimento di un elemento completamente diverso.

Nascondi i contenuti utilizzando pattern come sezioni a fisarmonica, schede e sezioni "Leggi di più", assicurandoti al contempo che il testo nascosto venga visualizzato durante le ricerche native "Trova nella pagina", consenta l'indicizzazione dei motori di ricerca, supporti i deep link dei frammenti di URL e mantenga l'accessibilità ARIA.

Crea un elenco scorrevole di elementi (ad es. un carosello di immagini o un thread di conversazione in chat) che possono essere visualizzati con un elemento specifico che viene visualizzato durante il rendering iniziale.

Mostra un tooltip o informazioni supplementari quando un utente passa il mouse sopra, seleziona o tiene premuto un elemento interattivo, senza richiedere un clic.

Implementa una navigazione spaziale accessibile utilizzando i tasti freccia che funzionano correttamente in diverse modalità di layout (griglia e così via)

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

Consenti agli utenti di scorrere in orizzontale su un elemento dell'elenco o un riquadro dei contenuti per visualizzare i pulsanti di azione contestuali o un menu laterale senza attivare automaticamente un'azione.

Attiva effetti visivi, animazioni o modifiche dello stato attivo su un elemento di destinazione solo dopo che è stato completato uno scorrimento programmatico fluido verso quell'elemento.

Consenti agli utenti di spostarsi o scorrere liberamente su superfici bidimensionali, come mappe, immagini ingrandite, canvas infiniti o griglie di dati di grandi dimensioni, in entrambe le direzioni (in diagonale o cambiando direzione a metà gesto) senza che il gesto si blocchi su un singolo asse orizzontale o verticale.

Crea un componente di selezione personalizzato con un menu a discesa animato. Ad esempio, il menu appare in dissolvenza o scorre nella visualizzazione oppure le opzioni si animano quando vengono selezionate.

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

Definisci lo stile di un cursore di intervallo nativo con stati di traccia, cursore, riempimento e stato attivo personalizzati, preservando al contempo l'accessibilità e la funzionalità native.

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

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

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

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

Crea un'opzione accessibile con l'attributo switch HTML nativo, utilizzando una casella di controllo con stile quando non è supportato.

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

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

Consenti ai campi del modulo di espandersi e ridursi per adattarsi 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 che si adattano al design della pagina.

Best practice per la creazione di moduli web accessibili, sicuri e facili da usare. Utilizza questa guida per creare o modificare moduli, input e flussi di invio.

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

Implementa l'invio con il tasto Invio nelle aree di testo e negli input a riga singola (chat, ricerca, ridenominazione in linea) in modo sicuro per gli utenti di IME (Input Method Editor) per evitare l'invio di testo incompleto.

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

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.

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

Verifica i numeri di telefono degli utenti e i passcode monouso inviati tramite SMS con l'estrazione automatica del codice e l'input dei moduli accessibile.

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

Rendi gli elementi personalizzati accessibili per impostazione predefinita, impostando i ruoli e lo stato ARIA tramite il mixin ARIA ElementInternals, gestendo lo stato attivo con delegatesFocus e mantenendo le relazioni ARIA all'interno di un'unica root shadow.

Definisci, registra e gestisci il ciclo di vita degli elementi personalizzati autonomi, comprese le regole del costruttore, i callback del ciclo di vita, i tempi di upgrade, la riflessione di attributi/proprietà e le convenzioni di denominazione.

Fai in modo che un controllo personalizzato partecipi in modo nativo ai moduli con formAssociated ed ElementInternals, inviando il proprio valore, integrandosi con la convalida dei vincoli e reagendo a reimpostazione, disattivazione e ripristino dello stato.

Linee guida orientate all'azione per l'architettura HTML moderna, la semantica, le API interattive native (Dialog, Popover, Details), la gestione dello stato attivo e la definizione delle priorità delle risorse. Utilizza questa guida per strutturare i documenti web, implementare overlay nativi o ottimizzare l'ordine di caricamento delle risorse.

Esegui il rendering lato server di un elemento personalizzato, quindi idratalo in loco senza eseguire nuovamente il rendering o un flash di contenuti non formattati.

Incapsula il DOM e gli stili di un componente con Shadow DOM, crea l'albero in modo efficiente con i template HTML e proietta i contenuti dei consumer con gli slot.

Applica lo stile oltre il confine dello shadow DOM con i selettori :host, le proprietà ereditate e personalizzate per i temi, ::slotted e ::part, nonché i livelli di struttura a cascata e le query container all'interno dei componenti.

Orientamento e principi trasversali per la creazione e l'utilizzo di componenti web, tra cui elementi personalizzati, Shadow DOM, template e slot, Shadow DOM dichiarativo, stile oltre il confine dello shadow, elementi personalizzati associati ai moduli e requisiti di accessibilità. Utilizza questa guida per creare componenti UI riutilizzabili, sistemi di progettazione o elementi personalizzati con rendering lato server.

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

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

Crea un componente che cambia lo stile in base allo stato di uno dei suoi elementi secondari. Ad esempio, un componente che viene visualizzato in modalità Luce o Buio a seconda che l'opzione di attivazione/disattivazione del tema sia selezionata o meno.

Applica in modo condizionale determinate regole o dichiarazioni CSS solo se una determinata regola at-rule è supportata dal browser.

Crea un componente che modifica il proprio layout in base al fatto che contenga o meno elementi secondari specifici. Ad esempio, se il componente contiene un'immagine, utilizza un layout a più colonne, altrimenti utilizza un layout a colonna singola.

Layout CSS moderni come flexbox, griglia, sottogriglia, query container, posizionamento degli ancoraggi e dimensionamento intrinseco. Utilizza questa competenza quando progetti componenti UI o layout di pagina adattabili.

Linee guida orientate all'azione per l'architettura CSS moderna, tra cui la struttura a cascata, i selettori, lo scoping, l'nidificazione e i token di progettazione. Utilizza questa guida per creare stili o gestire sistemi di progettazione.

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

Scala elementi come le dimensioni dei caratteri, la spaziatura e le dimensioni dei contenuti multimediali in modo fluido in base alle dimensioni del contenitore principale, anziché utilizzare breakpoint fissi

Anima o esegui l'override di singole proprietà di trasformazione CSS (ad es. translate, rotate, scale) indipendentemente da altre proprietà di trasformazione su un singolo elemento.

Regola il bordo di ritaglio visibile di un elemento in modo che si allinei 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.

Riduci l'eccessiva ripetizione degli 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).

Crea un'interfaccia utente che si adatta alle dimensioni del container e dell'area visibile, incluse query container, unità di area visibile dinamiche, proporzioni e tipografia adattabile.

Scegli come target gli elementi in base all'intersezione o all'unione di selettori e regole @ condizionali, riducendo al minimo la ripetizione.

Crea componenti che adattano la logica visiva in base al contesto semantico utilizzando le query di stile del container CSS.

Crea un componente i cui stili possono dipendere in modo condizionale dalla larghezza o dall'altezza del componente stesso, anziché dalla larghezza o dall'altezza dell'area visibile. Ad esempio, un componente scheda che può modificare i propri layout a seconda delle dimensioni o un pulsante call to action che può mostrare un testo di supporto condizionale in base alla larghezza.

Definisci lo stile degli elementi principali di un campo del modulo (ad es. etichette o fieldset) quando il campo non è valido.

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

Calcola il tempo trascorso o rimanente tra date e ore, bilancia le unità di durata e formatta le durate localizzate leggibili utilizzando Temporal.Duration e Intl.DurationFormat.

Modella date di calendario indipendenti dalla località, ore dell'orologio, date parziali (compleanni ricorrenti, scadenze delle carte di credito) e intervalli mensili ricorrenti senza deviazioni del fuso orario utilizzando i tipi Temporal Plain.

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

Analizza, ordina e misura gli intervalli tra timestamp ISO 8601 di sottomillisecondi o nanosecondi senza collisioni di troncamento della data utilizzando Temporal.Instant.

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

Compila C/C++ in WebAssembly utilizzando Emscripten

Suddividi l'elaborazione sincrona pesante (calcoli complessi e/o loop lunghi) o gli aggiornamenti del DOM per consentire al browser di gestire l'input utente e ridisegnare lo schermo.

Calcola il tempo totale che un utente ha effettivamente trascorso a visualizzare una pagina, esclusi i periodi in cui la scheda era in background.

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 tra tutte le dipendenze degli script di una pagina.

Esegui il debounce e raggruppa più eventi di analisi, telemetria e Core Web Vitals in un unico beacon per ridurre al minimo la contesa di rete e il carico del server, continuando a fornire aggiornamenti in tempo reale.

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.

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

Fornisci immagini decorative ottimizzate (come sfondi, icone della UI o maschere complesse) fornendo contemporaneamente formati 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.

Riduci la priorità dei recuperi di dati in background effettuati con l'API Fetch per evitare conflitti di rete con le richieste avviate dall'utente.

Determinare in modo affidabile se una pagina è stata inizialmente caricata 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.

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

Consenti transizioni più rapide alle visualizzazioni visitate in precedenza in un'applicazione a pagina singola (SPA) preservando lo stato strutturale del DOM anziché distruggerlo e ricostruirlo a ogni navigazione.

Pubblicare ed eseguire 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 mostrati prima di sfarfallare o lampeggiare per mostrare i contenuti dell'esperimento.

Identifica il codice JavaScript con esecuzione lenta e altre cause di scarsa reattività di Interaction to Next Paint (INP).

Identifica gli script più responsabili dei frame dell'animazione lunghi

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

Rimanda il download di risorse video e audio fuori schermo, incluse le immagini poster dei video e i dati multimediali precaricati, finché il media player non si avvicina alla visualizzazione per risparmiare larghezza di banda e ridurre la contesa di rete durante il caricamento iniziale della pagina.

Misura il tempo necessario per le interazioni degli utenti e le navigazioni lato client per visualizzare nuovi aggiornamenti con contenuti sullo schermo.

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.

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

Ottimizza la priorità di caricamento degli script aumentando la priorità degli script asincroni critici e riducendo quella degli script non essenziali o di fine corpo per migliorare la sequenza e ridurre i ritardi.

Rendi le interazioni più rapide e reattive (riducendo i punteggi di 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.

Aggiorna in modo dichiarativo una pagina con contenuti trasmessi in streaming in un secondo momento nello stesso documento HTML o tramite API JavaScript imperative.

Linee guida pratiche per l'ottimizzazione delle applicazioni web moderne. Utilizza questa guida per controllare le prestazioni, ottimizzare le metriche di caricamento, correggere le interazioni lente e ottimizzare i Core Web Vitals (LCP, INP, CLS)

Monitora in modo affidabile dati di analisi, Core Web Vitals, errori e dati di telemetria durante l'intera visita alla pagina da parte dell'utente e posticipa l'invio dei dati fino a quando l'utente non abbandona la pagina.

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

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

Linee guida di programmazione pratiche per la creazione di applicazioni web accessibili, che coprono HTML semantico, gestione dello stato attivo, moduli, contenuti multimediali e test. Utilizza questa competenza durante l'audit o l'implementazione di funzioni di accessibilità, navigazione da tastiera o ARIA.

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

Utilizza i contenuti generati tramite CSS (::before/::after) in modo che rimangano accessibili, incluso il testo alternativo per i contenuti decorativi.

Rispetta la preferenza di ridimensionamento del testo del sistema operativo per una pagina in modo che le dimensioni dei caratteri, il layout e le misurazioni basate su rem seguano le impostazioni di accessibilità dell'utente.

Confronta e convalida le origini web e i siti in modo sicuro tra messaggi e URL tra documenti senza analisi delle stringhe soggetta a errori.

Stabilisci secret condivisi utilizzando l'incapsulamento della chiave pubblica o l'accordo sulla chiave, inclusa la protezione ibrida e post-quantistica, e cripta i dati sensibili nel browser con la crittografia autenticata.

Accedere alle risorse sulla rete locale o sull'interfaccia di loopback di un utente da un'applicazione web pubblica.

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

Registra in modo silenzioso una passkey per un utente esistente dopo un accesso con password riuscito.

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

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

Registra una passkey per un account utente esistente.

Orientamento completo e principi trasversali per l'implementazione di WebAuthn e delle passkey nelle applicazioni web. Utilizza questa guida per gestire la registrazione, l'autenticazione, la gestione o la riautenticazione delle passkey.

Previeni gli attacchi XSS basati su DOM definendo una policy Trusted Types per la sanitizzazione dell'HTML non attendibile, utilizzando la policy durante la scrittura in sink DOM come innerHTML e applicando Trusted Types tramite Content Security Policy.

Autentica gli utenti di ritorno direttamente con le passkey o le password salvate prima di passare a una pagina di accesso o interrompere il loro flusso di lavoro.

Limita una pagina o un worker alla comunicazione solo con una lista consentita esplicita di endpoint di rete per impedire richieste di terze parti non autorizzate ed esfiltrazione di dati lato client.

Analizza e visualizza in sicurezza i contenuti HTML non attendibili provenienti dall'input dell'utente rimuovendo elementi e attributi non sicuri.

Verifica l'integrità crittografica di script, fogli di stile, caratteri e immagini esterni caricati da origini di terze parti e controlla se queste richieste inviano credenziali o URL referrer.

Firma e verifica messaggi, token o artefatti nel browser utilizzando chiavi asimmetriche classiche o resistenti ai quanti (post-quantistiche) per garantire l'integrità e l'autenticità dei dati.

Verifica che un utente sia proprietario di un indirizzo email durante la creazione, l'accesso o il recupero dell'account senza inviare un passcode monouso o un'email con un link magico.

Linee guida di sicurezza preventiva per gli sviluppatori web (XSS, CSP, cookie, isolamento multiorigine). Utilizza questa skill per guidare il processo di controllo, test e deployment dei criteri di sicurezza in modo sicuro.

Linee guida orientate all'azione per gli sviluppatori web per implementare la privacy by design, la minimizzazione dei dati, gli audit di terze parti e la gestione sicura dei dati. Utilizza questa competenza quando progetti applicazioni, integri servizi di terze parti, gestisci i dati utente o configuri intestazioni di sicurezza.

Trasferisci un'app web installata a una nuova origine, preservando la configurazione utente e le scorciatoie a livello di sistema operativo.

Rileva la lingua dei contenuti generati dagli utenti o dei contenuti del sito già presenti.

Esegui l'inferenza del linguaggio naturale on-device nel browser utilizzando l'API Prompt, con output in streaming, risposte JSON strutturate e gestione delle sessioni a più turni.

Riassumi i contenuti testuali utilizzando l'API Summarizer on-device.

Traduci il testo tra diverse lingue utilizzando l'API Translator on-device.

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

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

Utilizza questa guida per implementare WebMCP (Web Model Context Protocol) nelle applicazioni browser, esponendo le funzionalità lato client come strumenti agli agenti AI tramite API dichiarative o imperative.