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.