Colore intenso CSS

Dai colore del tuo brand agli input integrati nei moduli HTML con una riga di codice.

Adam Argyle

Joey Arhar

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.