Aggiungi il colore del tuo brand agli input integrati nel modulo HTML con una sola riga di codice.
Gli elementi dei moduli HTML odierni sono difficili da personalizzare. Sembra che si tratti di scegliere tra pochi o nessuno stili personalizzati o di reimpostare gli stili di input e di crearli da zero. Costruire da zero diventa molto più lavoro del previsto. Potrebbe anche portare all'oblio degli stili per gli stati degli elementi (indeterminati, guardo te) e la perdita delle funzioni di accessibilità integrate. Ricreando completamente i contenuti del browser, potrebbe essere necessario più lavoro di quello che si aspetta.
accent-color: hotpink;
Il CSS accent-color
della specifica dell'interfaccia utente dei CSS consente di colorare gli elementi con un'unica riga di CSS, in modo da evitare la personalizzazione in quanto fornisce un modo per inserire il tuo brand in elementi.
La proprietà accent-color
funziona anche con
color-scheme
, consentendo agli autori di colorare
gli elementi chiari e scuri.
Nell'esempio seguente l'utente ha un tema scuro attivo, la pagina utilizza
color-scheme: light dark
e lo stesso accent-color: hotpink
per i controlli
colori rosa acceso con tema scuro.
Elementi supportati
Al momento, solo quattro elementi vengono colorati tramite la proprietà accent-color
:
casella di controllo, radio, intervallo e
avanzamento. Ognuno può essere visualizzato in anteprima qui
https://accent-color.glitch.me in combinazioni di colori chiari e
scuri.
Casella di controllo
Radio
Intervallo
Avanzamento
Garanzia del contrasto
Per evitare la presenza di elementi inaccessibili, i browser con accent-color
devono determinare un colore di contrasto idoneo da utilizzare insieme all'accesso personalizzato. Di seguito è riportato uno screenshot che mostra la differenza negli algoritmi di Chrome 94 (sinistra) e Firefox 92
notte (destra):
La cosa più importante da considerare è considerare attendibile il browser. Specifica il colore del tuo brand e confida nel fatto che prenderà decisioni intelligenti per te.
Extra: più colorazione
Forse ti starai chiedendo come colorare più di questi quattro elementi del modulo. Ecco una sandbox minima che colora:
- l'anello di messa a fuoco
- evidenziazioni selezione del testo
- elencare gli indicatori
- indicatori freccia (solo Webkit)
- pollice della barra di scorrimento (solo con Firefox)
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }
:is(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button
) {
color: var(--brand);
}
Potenziale futuro
Le specifiche non limitano l'applicazione di accent-color
ai quattro elementi
mostrati in questo articolo, potrebbe essere aggiunto ulteriore supporto in un secondo momento. Gli elementi come
<option>
selezionato in un <select>
potrebbero essere evidenziati con
accent-color
.
Cos'altro ti piace colorare sul web? Invia un tweet a @argyleink con il tuo selettore e potrebbe essere aggiunto a questo articolo.