La proprietà CSS color-scheme
e il meta tag corrispondente consentono agli sviluppatori di attivare nelle loro pagine le impostazioni predefinite specifiche per il tema del foglio di stile dello user agent.
Contesto
La funzionalità dei contenuti multimediali con preferenze dell'utente prefers-color-scheme
La funzionalità dei contenuti multimediali con le preferenze dell'utente prefers-color-scheme
offre agli sviluppatori il controllo completo sull'aspetto delle loro pagine.
Se non la conosci, leggi il mio articolo
prefers-color-scheme
: Ciao oscurità, mio vecchio amico,
in cui ho documentato tutto ciò che so sulla creazione di fantastiche esperienze con la modalità Buio.
Un pezzo di puzzle menzionato solo brevemente nell'articolo è la proprietà CSS color-scheme
e il corrispondente meta tag con lo stesso nome.
Entrambi semplificano la vita di sviluppatore consentendoti di attivare nella tua pagina i valori predefiniti specifici del tema del foglio di stile dello user agent, ad esempio i controlli del modulo, le barre di scorrimento e i colori di sistema CSS.
Allo stesso tempo, questa funzionalità impedisce ai browser di applicare autonomamente qualsiasi trasformazione.
Supporto del browser
prefers-color-scheme
color-scheme
Foglio di stile dello user agent
Prima di continuare, vorrei descrivere brevemente che cos'è un foglio di stile user agent. La maggior parte delle volte, la parola user agent (UA) è un modo sofisticato di dire browser. Il foglio di stile UA determina l'aspetto e il design predefiniti di una pagina. Come suggerisce il nome, un foglio di stile UA dipende dall'UA in questione. Puoi dare un'occhiata al foglio di stile UA di Chrome (e a Chromium) e confrontarlo con quello di Firefox o Safari (e WebKit). In genere, i fogli di stile UA concordano sulla maggior parte delle cose. Ad esempio, tutti gli elementi rendono i link blu, il testo generico nero e il colore di sfondo bianco, ma presentano anche differenze importanti (e a volte fastidiose), come lo stile dei controlli dei moduli.
Esamina più da vicino il foglio di stile UA di WebKit e cosa fa in merito alla modalità Buio.
Esegui una ricerca del testo completo per "scuro" nel foglio di stile.
Il valore predefinito fornito dal foglio di stile cambia a seconda che la modalità Buio sia attivata o disattivata.
Per illustrare questo comportamento, ecco una regola CSS che utilizza la
pseudoclasse :matches
e le variabili interne di WebKit come -apple-system-control-background
,
nonché l'istruzione del preprocessore interno di WebKit #if defined
:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
Noterai alcuni valori non standard per le proprietà color
e background-color
indicate sopra.
Né text
né -apple-system-control-background
sono colori CSS validi.
Sono colori semantici interni di WebKit.
Abbiamo scoperto che i colori del sistema CSS sono standardizzati.
Sono specificati in
Livello 4 del modulo colore CSS.
Ad esempio, Canvas
(da non confondere con il tag <canvas>
) è per lo sfondo dei contenuti o dei documenti dell'applicazione, mentre CanvasText
è per il testo nei contenuti o nei documenti dell'applicazione.
Questi due metodi sono collegati tra loro e non devono essere utilizzati separatamente.
I fogli di stile UA possono utilizzare colori proprietari o standardizzati del sistema semantico
per determinare la modalità di rendering predefinita degli elementi HTML.
Se il sistema operativo è impostato sulla modalità Buio o utilizza un tema scuro,
CanvasText
(o text
) verrebbe impostato in modo condizionale sul bianco
e Canvas
(o -apple-system-control-background
) verrebbe impostato sul nero.
A questo punto, il foglio di stile UA assegna il seguente CSS solo una volta e copre sia la modalità Luce sia la modalità Buio.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
La proprietà CSS color-scheme
La specifica per il livello 1 del modulo di regolazione del colore CSS introduce un modello e controlli sulla regolazione automatica del colore da parte dello user agent con l'obiettivo di gestire le preferenze dell'utente come la modalità Buio, la regolazione del contrasto o le specifiche combinazioni di colori desiderate.
La proprietà color-scheme
definita nell'elemento consente a un elemento di indicare
con quali combinazioni di colori è preferibile visualizzare.
Questi valori vengono negoziati in base alle preferenze dell'utente, il che genera una scelta di combinazione di colori che influisce su elementi dell'interfaccia utente (UI), ad esempio i colori predefiniti dei controlli dei moduli e delle barre di scorrimento, nonché sui valori utilizzati dei colori di sistema CSS.
Al momento sono supportati i seguenti valori:
normal
Indica che l'elemento non è a conoscenza delle combinazioni di colori, pertanto deve essere visualizzato con la combinazione di colori predefinita del browser.[ light | dark ]+
Indica che l'elemento conosce le combinazioni di colori elencate e può gestirle ed esprime una preferenza ordinata tra di loro.
In questo elenco, light
rappresenta una combinazione di colori chiara, con colori di sfondo chiari e colori in primo piano scuri, mentre dark
rappresenta il contrario, con colori di sfondo scuri e colori in primo piano chiari.
Per tutti gli elementi, il rendering con una combinazione di colori dovrebbe far sì che i colori utilizzati in tutte le UI fornite dal browser corrispondano allo scopo della combinazione di colori. Esempi: barre di scorrimento, sottolineature per il controllo ortografico, controlli modulo e così via.
Nell'elemento :root
, il rendering con una combinazione di colori deve incidere anche sul colore della superficie del canvas (ovvero il colore di sfondo globale), sul valore iniziale della proprietà color
e sui valori utilizzati dei colori di sistema. Inoltre, dovrebbe influire sulle barre di scorrimento dell'area visibile.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
Il meta tag color-scheme
Per onorare la proprietà CSS color-scheme
, è necessario scaricare prima il CSS (se vi viene fatto riferimento tramite <link rel="stylesheet">
) e analizzarlo.
Per aiutare gli user agent a visualizzare lo sfondo della pagina con la combinazione di colori desiderata immediatamente, è possibile specificare anche un valore color-scheme
in un elemento <meta name="color-scheme">
.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
Combinazione di color-scheme
e prefers-color-scheme
Poiché sia il meta tag che la proprietà CSS (se applicata all'elemento :root
) comportano lo stesso comportamento alla fine, consiglio sempre di specificare la combinazione di colori tramite il meta tag, in modo che il browser possa adottare più velocemente lo schema preferito.
Mentre per le pagine di riferimento assolute non sono necessarie regole CSS aggiuntive,
in generale dovresti sempre combinare color-scheme
con prefers-color-scheme
.
Ad esempio, il colore CSS proprietario -webkit-link
, utilizzato da WebKit e Chrome
per il link classico blu rgb(0,0,238)
,
ha un rapporto di contrasto insufficiente di 2,23:1 su sfondo nero e
non soddisfa
i requisiti WCAG AA e WCAG AAA.
Ho aperto i bug per Chrome, WebKit e Firefox, nonché un problema di meta nello standard HTML per risolverlo.
Interazione con prefers-color-scheme
All'inizio l'interazione tra la proprietà CSS color-scheme
e il meta tag corrispondente con la funzionalità dei contenuti multimediali delle preferenze dell'utente prefers-color-scheme
può sembrare poco chiara.
In effetti giocano molto bene insieme.
La cosa più importante da capire è che color-scheme
determina esclusivamente l'aspetto predefinito, mentre prefers-color-scheme
determina l'aspetto stilibile.
Per rendere il tutto più chiaro, supponiamo la seguente pagina:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
Il codice CSS incorporato nella pagina imposta il valore background-color
dell'elemento <fieldset>
su gainsboro
in generale e su darkslategray
se l'utente preferisce una combinazione di colori dark
in base alla funzionalità dei contenuti multimediali con preferenze dell'utente prefers-color-scheme
.
Tramite l'elemento <meta name="color-scheme" content="dark light">
,
la pagina comunica al browser se supporta un tema scuro e uno chiaro,
con una preferenza per il tema scuro.
A seconda che il sistema operativo sia impostato sulla modalità Buio o Luce, l'intera pagina appare chiara su scuro o viceversa, in base al foglio di stile dello user agent. Non sono coinvolti altri CSS forniti dallo sviluppatore per modificare il testo del paragrafo o il colore di sfondo della pagina.
Nota come il valore background-color
dell'elemento <fieldset>
cambia
a seconda che la modalità Buio venga attivata o meno, seguendo le regole
nel foglio di stile in linea fornito dallo sviluppatore sulla pagina.
È gainsboro
o darkslategray
.
L'aspetto dell'elemento <button>
è controllato dal foglio di stile dello user agent.
Il suo color
è impostato sul colore di sistema
ButtonText
mentre i suoi background-color
e i quattro border-color
sono impostati sul colore di sistema
ButtonFace
.
Ora nota come cambia l'elemento border-color
dell'elemento <button>
.
Il valore calcolato per border-top-color
e border-bottom-color
passa da rgba(0, 0, 0, 0.847)
(nero) a rgba(255, 255, 255, 0.847)
(bianca, perché lo user agent viene aggiornato ButtonFace
in modo dinamico in base alla combinazione di colori.
Lo stesso vale per l'elemento color
dell'elemento <button>
impostato sul colore di sistema corrispondente ButtonText
.
Demo
Puoi vedere gli effetti di color-scheme
applicati a un numero elevato di elementi HTML
in una demo su Glitch.
La demo mostra deliberatamente la violazione delle WCAG AA e WCAG AAA con i colori dei link menzionati nell'avviso sopra.
Ringraziamenti
La proprietà CSS color-scheme
e il meta tag corrispondente sono stati implementati da
Rune Lillesveen.
Rune è anche co-editor della specifica di livello 1 del modulo di regolazione del colore CSS.
Immagine hero di Philippe Leone su Unsplash.