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 tuo progetto web affinché li supporti display ad ampia gamma:

1. Riduzione controllata: utilizza i nuovi spazi colore e consenti al browser e il tuo sistema operativo determina il colore da mostrare in base alle funzionalità di visualizzazione.

2. Miglioramento progressivo: usa @supports e @media per valutare il funzionalità del browser dell'utente e, se le condizioni sono soddisfatte, offrono un'ampia colori gamut.

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

Ciascun approccio presenta vantaggi e svantaggi. Ecco un breve elenco di professionisti e svantaggi:

Riduzione graduale

• Pro
  • Il percorso più semplice.
  • La gamut del browser viene mappata o vincolata a sRGB se non è una visualizzazione ad ampia gamma. pertanto la responsabilità è del browser.
• Contro
  • Il browser potrebbe limitare la gamma di colori o mappare la gamma di colori 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 di riserva al colore precedente che riconosce.

Miglioramento progressivo

• Pro
  • Maggiore controllo con la fedeltà del colore gestita.
  • Una strategia additiva che non influisce sui colori correnti.
• Contro
  • Devi gestire due sintassi dei colori separate.
  • Devi gestire due gamut di colori separate.

Verificare il supporto di gamma e spazio colore

Il browser consente di verificare il supporto di funzionalità di gamma ampia e colori il supporto della sintassi da CSS e JavaScript. L'esatta gamma di colori di cui l'utente ha non viene reso disponibile, viene fornita una risposta generalizzata in modo che la privacy dell'utente viene mantenuta. Tuttavia, viene reso disponibile l'esatto supporto dello spazio colore, poiché non specifiche delle funzionalità dell'hardware dell'utente, ad esempio la gamma,

Query di assistenza per la gamma di colori

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

Assegno da CSS

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

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

È possibile chiedere assistenza approssimativa al color-gamut query supporti:

@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 supporti per verificare l'assistenza:

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

Controlla da JavaScript

Per JavaScript, il valore window.matchMedia() funzione può essere chiamata e passata una query supporti 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 le restanti query supporti.

Query di assistenza per lo spazio colore

I seguenti esempi di codice controllano il browser dell'utente che ha visitato il sito e la sua selezione di spazi colore su cui lavorare.

Assegno da CSS

Il supporto dello spazio colore individuale può essere richiesto utilizzando @supports query:

@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, il valore CSS.supports() funzione può essere chiamata e passata una coppia di proprietà e valore per verificare che il browser riconosce.

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

Integrazione dell'hardware e dei controlli di analisi

Mentre attendi che ogni browser implementi le nuove funzioni colore, è necessario è buona norma verificare le funzionalità hardware e l'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 creare, convertire ed eseguire il debug del colore HD.

Selettore colori aggiornato

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

Confini di Gamut

È stata aggiunta anche una linea di confine della gamma gamut 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 lavora con la funzione color() e la nuova spazi colore in quanto sono in grado di produrre colori sia non HD che HD. Se Se vuoi controllare la gamma di colori del tuo colore, apri il selettore colori e scopri di più.

Converti colori

DevTools è riuscito a convertire i colori tra formati supportati, come hsl, hwb, rgb e hex da molti anni. shift + click su un campione di colore quadrato in Riquadro degli stili per eseguire questa conversione. I nuovi strumenti per i colori non si limitano a scorrere tramite le conversioni, generano una finestra di dialogo in cui gli autori possono vedere e scegliere la conversione desiderata.

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

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

Passaggi successivi

Una maggiore vivacità, manipolazioni e interpolazioni coerenti e nel complesso assicurano una un'esperienza più vivace per gli utenti.

Leggi altre risorse per i colori dalla guida.