Colore CSS Migrate to HD

Questo documento fa parte della guida ai colori CSS ad alta definizione.

Adam Argyle

Esistono due strategie principali per aggiornare i colori del progetto web in modo da supportare visualizzazioni di gamma ampia:

1. Degradazione controllata: utilizza i nuovi spazi di colore e lascia che il browser e il sistema operativo decidano quale colore mostrare in base alle funzionalità di visualizzazione.

2. Miglioramento progressivo: utilizza @supports e @media per valutare le funzionalità del browser dell'utente e, se le condizioni sono soddisfatte, fornisci colori a gamma estesa.

Se un browser non riconosce il colore display-p3:

color: red;
color: color(display-p3 1 0 0);

Se un browser supporta il colore display-p3:

color: red;
color: color(display-p3 1 0 0);

Ognuno presenta vantaggi e svantaggi. Ecco un breve elenco di pro e contro:

Riduzione controllata

• Pro
  • Il percorso più semplice.
  • La gamma del browser viene mappata o limitata a sRGB se non è un display a gamma estesa, pertanto la responsabilità è del browser.
• Svantaggi
  • Il browser potrebbe applicare la limitazione della gamma o la mappatura della gamma a un colore che non ti piace.
  • Il browser potrebbe non comprendere la richiesta di colore e non riuscire del tutto. Tuttavia, questo può essere mitigato specificando il colore due volte, in modo che la cascata utilizzi il colore precedente che riconosce.

Miglioramento progressivo

• Vantaggi
  • Maggiore controllo con la fedeltà dei colori gestita.
  • Una strategia additiva che non influisce sui colori attuali.
• Contro
  • Devi gestire due sintassi di colore distinte.
  • Devi gestire due gamme di colori distinte.

Verificare il supporto della gamma e dello spazio di colore

Il browser consente di verificare il supporto delle funzionalità di gamma estesa e della sintassi dei colori da CSS e JavaScript. La gamma esatta di colori di cui dispone l'utente non viene messa a disposizione, viene fornita una risposta generica per mantenere la privacy dell'utente. Tuttavia, viene reso disponibile il supporto esatto dello spazio colore, in quanto non è specifico per le funzionalità dell'hardware dell'utente, ad esempio la gamma.

Domande di assistenza sulla gamma di colori

Gli esempi di codice seguenti controllano la gamma di colori dell'utente che visita il sito sul suo display.

Assegno da CSS

La richiesta di assistenza meno specifica è la query media dynamic-range:

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

È possibile richiedere assistenza approssimativa o di altro tipo con la query media color-gamut:

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

Esistono altre due query sui media per verificare il supporto:

1. @media (color)
2. @media (color-index)

Controllo da JavaScript

Per JavaScript, la funzione window.matchMedia() può essere chiamata e può essere passata una query sui contenuti multimediali per la valutazione.

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

Il pattern riportato sopra può essere copiato per il resto delle query sui media.

Domande sull'assistenza per gli spazi colore

Gli esempi di codice seguenti controllano il browser dell'utente che visita il sito e la selezione degli spazi di colore con cui lavorare.

Controlla dal CSS

È possibile richiedere il supporto per singoli spazi di colore utilizzando una query @supports:

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

Controlla da JavaScript

Per JavaScript, è possibile chiamare la funzione CSS.supports() e passare una coppia di proprietà e valori per vedere se il browser comprende.

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

Combinare i controlli hardware e di analisi

Nell'attesa che ogni browser implementi queste nuove funzionalità di colore, è consigliabile verificare sia la funzionalità hardware sia la funzionalità di analisi del colore. Questa è spesso quella che uso per migliorare progressivamente i colori ad alta definizione:

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

Eseguire il debug del colore con Chrome DevTools

Chrome DevTools è aggiornato e dispone di nuovi strumenti per aiutare gli sviluppatori a creare, convertire ed eseguire il debug del colore HD.

Selettore colori aggiornato

Il selettore di colori ora supporta tutti i nuovi spazi di colore. Consentire agli autori di interagire con i valori del canale come se fossero presenti.

Limiti della gamma

È stata aggiunta anche una linea di confine del gamut, che traccia una linea tra i gamut sRGB e display-p3. Definizione della gamma di gamma del colore selezionato.

In questo modo gli autori possono distinguere visivamente i colori HD da quelli non HD. È particolarmente utile quando si utilizza la funzione color() e i nuovi spazi colore, poiché sono in grado di produrre colori sia non HD che HD. Se vuoi controllare la gamma di colori del tuo colore, apri il selettore colori e scopri di più.

Convertire i colori

DevTools è in grado di convertire i colori tra formati supportati come hsl, hwb, rgb ed esadecimale da molti anni. shift + click su un campione di colore quadrato nel riquadro Stile per eseguire questa conversione. I nuovi strumenti per i colori non si limitano a scorrere le conversioni, ma offrono una finestra di dialogo in cui gli autori possono vedere e scegliere la conversione che preferiscono.

Durante la conversione, è importante sapere se la conversione è stata ritagliata per adattarsi allo spazio. DevTools ora ha un'icona di avviso per il colore convertito che ti avvisa di questo ritaglio.

Scopri di più sulla funzionalità di debug CSS in DevTools.

Passaggi successivi

Più vivacità, manipolazioni e interpolazioni coerenti e, in generale, un'esperienza più colorata per i tuoi utenti.

Leggi altre risorse per i colori nella guida.