Applicazione di temi alla UI generata dal browser

La maggior parte delle UI generate dal browser può essere personalizzata in una certa misura utilizzando i CSS. Anche se richiede funzionalità moderne, si adatta senza problemi ai browser meno recenti e, pertanto, spesso non richiede un polyfill o un fallback.

Prima di ricreare la UI del browser (controlli dei moduli, barre di scorrimento, selezioni, messaggi di errore e così via), verifica innanzitutto che:

1. La UI del browser non può essere personalizzata abbastanza per le tue esigenze, anche con CSS moderni.
2. la personalizzazione desiderata è sufficientemente critica da giustificare i compromessi della ricreazione della UI integrata, in particolare la perdita della semantica accessibile, della gestione della tastiera, dell'IME e dell'integrazione AT che la UI nativa fornisce senza costi.

Esempi di personalizzazioni possibili:

• Utilizza ::selection per personalizzare i colori dell'evidenziazione personalizzata.
• NON applicare user-select: none al testo dei contenuti, perché interrompe le funzioni di copia e incolla, gli strumenti di traduzione e i gesti "leggi da qui " delle tecnologie per l'accessibilità. Limitalo alla UI (punti di manipolazione, barre degli strumenti, etichette dei pulsanti ridondanti).
• Utilizza accent-color per applicare il colore intenso della pagina a qualsiasi UI generata dal browser.
• Utilizza color-scheme per adattare la UI del browser alla modalità Luce/Buio.
• Utilizza scrollbar-color per personalizzare i colori della barra di scorrimento e scrollbar-width per controllarne lo spessore. Assicurati che il cursore sia visibilmente distinto dalla barra (≥3:1) e non impostare scrollbar-width: none sulle regioni scorrevoli (utilizzalo solo quando lo scorrimento è completamente sostituito da un'altra affordance).
• Utilizza :user-invalid/:user-valid per lo stile di convalida, non :invalid/:valid, che corrispondono solo dopo che l'utente ha interagito con il campo, evitando l'impostazione predefinita ostile di contrassegnare i campi obbligatori vuoti come errori al caricamento della pagina. Escludi i cursori di intervallo quando scegli come target input in modo generico (ad es. input:not(input[type="range"]):user-valid), in modo che la regolazione di un cursore non applichi bordi o sfondi di validità del campo.
• In genere, i pulsanti e i campi di testo (incluso <textarea>) possono essere formattati come elementi normali.
• Utilizza font-size per scalare e altre proprietà testuali per controllare la tipografia

Stile dei campi di testo (<input> e <textarea>)

Per la maggior parte degli scopi di stile (ad es. colori, bordi, sfondi, tipografia e così via), tratta questi elementi come normali contenitori di testo.

• Utilizza :placeholder-shown e ::placeholder per applicare uno stile ai segnaposto di input.
• Utilizza field-sizing: content per adattare le dimensioni dei campi di testo ai contenuti.
• Per gli elementi <textarea>, utilizza resize: vertical per disattivare il ridimensionamento orizzontale o resize: none per disattivare tutto il ridimensionamento.

Controlli a scelta multipla (seleziona, pulsanti di opzione, caselle di controllo)

• Per selezionare una tra le tante opzioni presentate in un menu a discesa: utilizza <select> + appearance: base-select + ::picker(select). Per saperne di più, consulta Stile di selezione con branding
• Selezione di una o più opzioni tra più opzioni disposte in linea nella pagina: utilizza un <input type=checkbox> o un <input type=radio> all'interno di un <label> per ogni opzione. Stile tramite label:has(:checked).
• Stilizza caselle di controllo, pulsanti di opzione e pulsanti di attivazione/disattivazione tramite appearance: none + contenuti generati (::before/::after) o immagini di sfondo per disegnare lo stato selezionato.

<input> non testuali (pulsanti, cursori, input di file e così via)

• Input file: utilizza ::file-selector-button per applicare lo stile al pulsante.
• Non utilizzare <input> con un type di button, submit o reset. Utilizza invece <button> e applica lo stile come un elemento normale.
• Cursori: utilizza gli pseudo-elementi thumb appearance: none (::-webkit-slider-thumb, ::-moz-range-thumb e così via) e gli pseudo-elementi track (::-webkit-slider-runnable-track, ::-moz-range-track e così via) per un controllo più granulare.