Colore CSS Migrate to HD

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

Esistono due strategie principali per aggiornare il colore del progetto web in modo da supportare display con un'ampia gamma di opzioni:

1. Riduzione granulare: utilizza i nuovi spazi colore e lascia che sia il browser e il sistema operativo a stabilire 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 ampia.

Se un browser non riconosce il colore display-p3:

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

Se un browser riconosce il colore display-p3:

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

Ciascuna di esse presenta vantaggi e svantaggi. Ecco un elenco rapido dei pro e dei contro:

Riduzione granulare

• Pro
  • Il percorso più semplice.
  • La gamma del browser viene mappata o applicata a sRGB, se non è presente un display ad ampia gamma, quindi la responsabilità è sul browser.
• Svantaggi
  • Il browser può applicare una mappatura gamut 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, lasciando che la cascata di riserva al colore precedente che comprende.

Miglioramento progressivo

• Pro
  • Maggiore controllo con la fedeltà dei colori gestita.
  • Una strategia aggiuntiva che non influisce sui colori correnti.
• Svantaggi
  • Devi gestire due sintassi dei colori diverse.
  • Devi gestire due gamut di colori separate.

Verificare il supporto della gamma e dello spazio colore

Il browser consente di verificare il supporto delle funzionalità a un'ampia gamma di gamma e del supporto della sintassi dei colori da CSS e JavaScript. L'esatta gamma di colori di cui l'utente non ha disponibile, viene fornita una risposta generalizzata per garantire la privacy dell'utente. Viene però reso disponibile il supporto esatto dello spazio colore, in quanto non è specifico delle funzionalità dell'hardware dell'utente, come la gamma.

Query di supporto per la gamma di colori

I seguenti esempi di codice controllano la gamma di colori del display dell'utente che visita il sito.

Controlla dal CSS

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

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

È possibile richiedere assistenza approssimativa o superiore con la query multimediale 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 */
}

Sono disponibili altre due query supporti per controllare l'assistenza:

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

Controlla da JavaScript

Per JavaScript, è possibile chiamare la funzione window.matchMedia() e passare una query multimediale 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 precedente può essere copiato per il resto delle query supporti.

Domande di assistenza per lo spazio colore

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

Controlla dal CSS

È possibile richiedere assistenza per i singoli spazi 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, la funzione CSS.supports() può essere chiamata e passata una proprietà e una coppia di 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)')

Unione dell'hardware e dei controlli di analisi

Nell'attesa che ogni browser implementi queste nuove funzionalità cromatiche, è consigliabile verificare sia la funzionalità hardware sia quella di analisi del colore. Spesso è quello che uso quando perfezioniamo progressivamente i colori all'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);
  }
}

Esegui 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 dei colori HD.

Selettore colori aggiornato

Il selettore colori ora supporta tutti i nuovi spazi colore. Permettendo agli autori di interagire con i valori del canale come farebbero.

Confini gamut

È stata aggiunta anche una linea di confine della gamma, che traccia una linea tra sgsuite e display-p3. Chiarimento della gamma di colori selezionati.

Ciò consente agli autori di distinguere visivamente i colori in HD da quelli non HD. È particolarmente utile quando si lavora con la funzione color() e i nuovi spazi colore, perché sono in grado di produrre colori sia non HD che HD. Se vuoi controllare la gamma di colori, apri il selettore colori e guarda!

Converti colori

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

Durante la conversione, è importante sapere se la conversione è stata ridotta per adattarla allo spazio. Ora DevTools presenta un'icona di avviso sul colore convertito che ti avvisa di questo ritaglio.

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

Passaggi successivi

Una maggiore vivacità, manipolazioni e interpolazioni coerenti e nel complesso offrono un'esperienza più colorata agli utenti.

Leggi altre risorse colore nella guida.