Semplificazione degli stili di forma con accent-color

Non so voi, ma adoro quando arrivano nuove proprietà CSS che semplificano la nostra vita quotidiana di sviluppatori e ci consentono di rimuovere un sacco di codice ridondante. aspect-ratio è una di queste proprietà (di recente eliminando la necessità di modificare il riempimento). accent-color potrebbe essere il prossimo.

Input del modulo di stile

Prendiamo le caselle di controllo. In ogni browser, questi sono stilizzati in modo diverso dal foglio di stile dell'agente utente (responsabile degli stili predefiniti del browser).

Storicamente non c'è stato alcun modo reale per definire questi input. Invece, molti sviluppatori web ricorrono a un noto hack, che consiste nel nascondere visivamente (ma in modo accessibile) l'input stesso, quindi applicare uno pseudo-elemento sull'etichetta. (Tutto questo vale anche per i pulsanti di opzione.)

Questo è in realtà meno dettagliato delle soluzioni passate. ModernCSS ha un tutorial dettagliato su come implementare caselle di controllo personalizzate e pulsanti di opzione utilizzando questa tecnica.

Questa tecnica funziona su più browser e sarà comunque necessaria se le caselle di controllo devono essere completamente personalizzate (con animazioni e così via). Ma in molti casi non abbiamo bisogno di uno stile elegante: dobbiamo semplicemente essere in grado di applicare un colore di marca e andare avanti. Non sarebbe fantastico sbarazzarsi di tutto quel goffo CSS? Inserisci accent-color !

Uso semplice

Per il caso d'uso più semplice, possiamo impostare la proprietà accent-color sull'elemento :root e applicarla ovunque sulla nostra pagina web:

 :root { accent-color: rgba(250, 15, 117); }

Questo applica il colore scelto (al momento della scrittura) alle caselle di controllo, ai pulsanti di opzione, all'intervallo e agli elementi di avanzamento.

Accessibilità

Una caratteristica piuttosto interessante è che il browser determinerà automaticamente il colore migliore per il segno di spunta per garantire un contrasto cromatico sufficiente, utilizzando i propri algoritmi interni. Ciò significa che non è necessario uno stile di codice aggiuntivo per garantire che le nostre caselle di controllo siano il più accessibili possibile.

Nella seguente demo, stiamo applicando due diversi colori di accento. Se lo visualizzi in Chrome, dovresti vedere che il segno di spunta di quello a sinistra è bianco, mentre quello a destra è nero. I browser utilizzano algoritmi diversi per questo, quindi potresti riscontrare risultati diversi in Chrome rispetto a Firefox.

Proprietà personalizzate

Se vogliamo applicare lo stesso colore ad altri elementi dell'interfaccia utente, potremmo utilizzare una proprietà personalizzata. Possiamo impostare il nostro colore come proprietà personalizzata sull'elemento radice, quindi applicarlo (ad esempio) alle intestazioni o ad altri elementi del modulo:

 :root { --brand: rgba(250, 15, 117); accent-color: var(--brand); }

Possiamo anche creare degli effetti divertenti. Nella demo seguente, assegneremo a ciascun gruppo di caselle di controllo una proprietà personalizzata che corrisponde all'indice dell'elemento ( --i ) utilizzando l'attributo style nell'HTML. Quindi lo stiamo usando nel nostro CSS per calcolare il valore della tonalità in una funzione di colore HSL per determinare il colore dell'accento. Caselle di controllo arcobaleno!

Altri elementi del modulo

Sfortunatamente accent-color non viene applicato ad altri elementi che potremmo aspettarci, come selezionare i menu a discesa. Potremmo voler applicare il colore scelto a elementi del modulo già stilizzabili, come pulsanti e input di testo. La proprietà personalizzata è utile qui, poiché possiamo applicarla al bordo dei nostri input di testo e allo sfondo dei pulsanti, ad esempio:

La documentazione di Web.dev accent-color include questo pratico snippet di Adam Argyle per lo stile di altri elementi non esclusivi dei moduli, inclusi i marcatori di elenco, le evidenziazioni di selezione del testo e l'anello di messa a fuoco:

 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); }

Combinazioni di colori

Per personalizzare ulteriormente i nostri elementi del modulo, la proprietà della color-scheme può aiutarci a modellarli in base alle preferenze dell'utente per la modalità chiara o scura. Al momento, possiamo fornire stili in modalità oscura in base alle preferenze di sistema dell'utente con la media query prefers-color-scheme :

 /* If the user's preference is set to 'dark', this renders white text on a black background */ @media (prefers-color-scheme: dark) { body { background-color: #000000; color: #ffffff; } }

Se lo lasciamo così, le nostre caselle di controllo avranno ancora uno sfondo chiaro nel loro stato deselezionato.

Possiamo utilizzare color-scheme per garantire che le nostre caselle di controllo assumano uno stile chiaro o scuro in base alle preferenze. Impostandolo sull'elemento radice nel nostro CSS si assicura che si applichi all'intera pagina:

 :root { color-scheme: light dark; }

Questo esprime le combinazioni di colori in ordine di preferenza. In alternativa potremmo implementarlo utilizzando un meta tag nel nostro HTML:

 <meta name="color-scheme" content="light dark">

Questo è effettivamente preferibile, poiché verrà letto dal browser immediatamente prima che il file CSS venga analizzato ed eseguito, quindi potrebbe aiutarci a evitare un flash of unstyled content (FOUC).

Nella nostra demo della casella di controllo arcobaleno, potresti notare che il browser regola anche il colore di alcuni segni di spunta quando cambiamo la combinazione di colori, pur mantenendo un contrasto sufficiente. Abbastanza bello!

color-scheme influisce sugli stili dell'agente utente. Se lo usiamo senza fornire altri colori di sfondo o stili di colore del testo per la pagina, i colori predefiniti della pagina verranno invertiti se l'utente seleziona una combinazione di colori scuri, quindi il colore di sfondo predefinito sarà nero e il colore del testo sarà bianco. In pratica, è molto probabile che vorremo sovrascriverli con CSS. Possiamo usare la combinazione di colori insieme alla query multimediale prefers-color-scheme color-scheme In questa demo, utilizzo prefers-color-scheme per impostare il colore del testo solo quando si preferisce uno schema scuro.

color-scheme può anche essere impostata su singoli elementi, il che è utile se ci sono alcune aree nel nostro design in cui vogliamo mantenere una combinazione di colori specificata, indipendentemente dal fatto che la modalità chiara o scura sia attivata. In questa demo, abbiamo un modulo con uno sfondo scuro anche quando la combinazione di colori generale è chiara. Possiamo specificare una combinazione di colori scuri, per garantire che le nostre caselle di controllo siano sempre abbinate a un colore scuro:

 .dark-form { color-scheme: dark; }

Limitazioni

Come accennato, ci sono diversi elementi che al momento non sono interessati da accent-color , per i quali questa funzionalità sarebbe utile. Un'altra considerazione è che attualmente siamo limitati allo stile solo dello stato selezionato della casella di controllo o del pulsante di opzione, a parte l'utilizzo di color-scheme , che ha qualche effetto sul bordo della casella di controllo, ma non consente la personalizzazione completa. Sarebbe fantastico poter modellare il colore del bordo e lo spessore per l'input nel suo stato non selezionato o implementare uno stile ancora più personalizzato, come cambiare la forma generale, ma non ci siamo ancora del tutto. Per lo meno, sarebbe preferibile consentire al bordo della casella di controllo di ereditare il colore del corpo del testo.

Sarebbe anche utile poter estendere l'uso del accent-color ad altri elementi oltre alle forme, come i controlli video. Attualmente per uno sviluppatore la creazione di controlli personalizzati richiede una notevole quantità di lavoro per ricreare l'accessibilità di quelli nativi. Questo eccellente articolo di Stephanie Stimac descrive in dettaglio il lavoro svolto da Open UI per standardizzare gli elementi dell'interfaccia utente in modo da rendere più facile per gli sviluppatori lo stile.

Alternative

Un modo alternativo per applicare uno stile a una casella di controllo o a un pulsante di opzione è nascondere lo stile predefinito con -webkit-appearance: none e sostituirlo con un'immagine di sfondo. (Vedi questa demo.) I browser moderni lo supportano abbastanza bene, ma ha i suoi limiti rispetto al primo metodo di utilizzo di uno pseudo-elemento (descritto all'inizio di questo articolo), poiché non possiamo manipolare direttamente l'immagine di sfondo con CSS (ad es. cambiandone il colore o l'opacità), oppure effettua la transizione dell'immagine.

L'API CSS Paint, parte del set di API CSS di Houdini, apre più opzioni per la personalizzazione, consentendoci di passare proprietà personalizzate per manipolare un'immagine di sfondo. Dai un'occhiata a questa bella demo (e al worklet di accompagnamento) di Matteo. Il supporto è attualmente limitato ai browser Chromium.

Accessibilità

Dovremmo fare attenzione a fornire stili di messa a fuoco accessibili quando si usa nascondere l'aspetto predefinito dei controlli dei moduli. Un vantaggio di accent-color è che non nasconde le impostazioni predefinite del browser, preservando l'accessibilità.

Supporto del browser

accent-color è attualmente supportato nelle ultime versioni di Chrome ed Edge. Può essere abilitato in Firefox con il layout.css.accent-color.enabled e dovrebbe essere supportato nella prossima versione. Sfortunatamente, al momento non è disponibile il supporto per Safari. Questo non vuol dire che non puoi iniziare a usarlo subito: i browser che non supportano accent-color otterranno semplicemente le impostazioni predefinite del browser, quindi funziona alla grande come miglioramento progressivo.

Conclusione

Abbiamo parlato principalmente di caselle di controllo e pulsanti di opzione qui, poiché sono tra gli elementi del modulo più comuni che richiedono la personalizzazione. Ma accent-color ha il potenziale per fornire uno stile semplice e veloce per molti dei nostri elementi del modulo, specialmente dove non è necessaria un'ampia personalizzazione, oltre a consentire al browser di scegliere le migliori opzioni per l'accessibilità.

Ulteriori letture

Alcune risorse sugli input dei moduli accent-color , color-scheme e styling:

• documentazione MDN
• Guida CSS Tricks per accent-color
• Web.dev: colore accento CSS
• Web.dev: modalità scura migliorata con combinazione di colori
• CSS moderno: stili CSS personalizzati per input di moduli e aree di testo
• CSS moderno: pulsanti di opzione con stile personalizzato CSS puro