Dai colore del tuo brand agli input integrati nei moduli HTML con una riga di codice.
Gli elementi del modulo HTML di oggi sono difficili da personalizzare. È come se fosse scegliere tra pochi stili personalizzati o nessuno oppure reimpostare gli stili di input e a costruirlo da zero. Svilupparlo da zero diventa molto più del progetto. Inoltre, può causare l'oblio di stili per gli stati degli elementi (indeterminato, ti sto guardando) e la perdita delle funzioni di accessibilità integrate. Per ricreare completamente ciò che il browser può offrire, di quello che intendi affrontare.
accent-color: hotpink;
CSS accent-color
dall'UI del CSS
della specifica è qui per
con una sola riga di codice CSS, evitando così la personalizzazione
è un modo per mettere in risalto il tuo brand.

La proprietà accent-color
funziona anche con
color-scheme
, che consente agli autori di colorare entrambi
gli elementi chiari e scuri.
Nell'esempio seguente l'utente ha un tema scuro attivo, la pagina utilizza
color-scheme: light dark
e utilizza lo stesso accent-color: hotpink
per gli ambienti scuri
controlli colorati a tema hotpink.

Elementi supportati
Al momento, solo quattro elementi verranno colorati tramite la proprietà accent-color
:
casella di controllo, radio, intervallo e
avanzamento. Qui puoi visualizzare l'anteprima di ognuno
https://accent-color.glitch.me in condizioni di luce e
combinazioni di colori scuri.
Casella di controllo
Radio
Intervallo
Avanzamento
Garantire il contrasto
Per evitare che esistano elementi inaccessibili, i browser con accent-color
occorre stabilire un contrasto idoneo
color [colore] da utilizzare insieme al colore
accento. Di seguito è riportato uno screenshot che mostra come Chrome 94 (a sinistra) e Firefox 92
Per la modalità notturna (a destra) gli algoritmi sono diversi:
La cosa più importante da togliere da questo aspetto è fidare il browser. Fornisci un colore per il brand e confida nel fatto che prenderà decisioni oculate al posto tuo.
Extra: maggiore colorazione
Forse ti starai chiedendo come colorare più di questi quattro elementi del modulo. Ecco un una sandbox minima che evidenzia:
- l'anello di messa a fuoco
- evidenziazioni della selezione del testo
- elencare gli indicatori
- Indicatori a freccia (solo Webkit)
- Icona 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
La specifica non limita l'applicazione di accent-color
ai quattro elementi
mostrato in questo articolo, potrebbe essere aggiunto ulteriore supporto in un secondo momento. Elementi come
La colonna <option>
selezionata in una <select>
può essere evidenziata con il
accent-color
.
Cos'altro ti piace mettere in risalto sul web? Tweet @argyleink con il tuo selettore e potrebbe ottenere aggiunto a questo articolo.