Colore intenso CSS

Aggiungi il colore del tuo brand agli input integrati nel modulo HTML con una sola riga di codice.

Andrea Rossi
Joey Arhar
Joey Arhar
X GitHub

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.

Supporto dei browser

  • 93
  • 93
  • 92
  • 15,4

Fonte

Uno screenshot con tema chiaro di una demo con colori intensi in cui la casella di controllo, i pulsanti di opzione, un dispositivo di scorrimento dell'intervallo e l'elemento di avanzamento sono tutti rosa acceso.
Demo

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.

Uno screenshot con tema scuro di una demo con colori intensi in cui casella di controllo, pulsanti di opzione, un cursore di intervallo ed un elemento di avanzamento sono tutti rosa acceso.
Demo

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):

Uno screenshot di Firefox e Chromium uno accanto all'altro, in cui viene visualizzato uno spettro completo di caselle di controllo in varie tonalità e oscurità.

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.