Migrer vers la couleur CSS HD

Ce document fait partie du guide des couleurs CSS haute définition.

Adam Argyle

Il existe deux stratégies principales pour mettre à jour la couleur de votre projet Web afin de prendre en charge les affichages sur une large gamme:

1. Dégradation élégante: utilisez les nouveaux espaces de couleur, et laissez le navigateur et le système d'exploitation déterminer la couleur à afficher en fonction des fonctionnalités d'affichage.

2. Amélioration progressive: utilisez @supports et @media pour évaluer les fonctionnalités du navigateur de l'utilisateur et, si les conditions sont remplies, fournir des couleurs à large gamme.

Si un navigateur ne reconnaît pas la couleur display-p3:

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

Si un navigateur reconnaît la couleur display-p3:

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

Chacune de ces méthodes présente des avantages et des inconvénients. Voici une liste rapide des avantages et inconvénients:

Dégradation progressive

• Avantages
  • Le chemin le plus simple.
  • La gamme du navigateur est mappée ou se limite à sRVB s'il ne s'agit pas d'un écran large. La responsabilité incombe donc au navigateur.
• Inconvénients
  • Le navigateur risque de limiter la gamme de couleurs à une couleur que vous n'aimez pas.
  • Le navigateur peut ne pas comprendre la demande de couleur et échouer complètement. Cependant, il est possible d'atténuer ce problème en spécifiant deux fois la couleur, ce qui permet à la cascade de revenir à la couleur précédente qu'elle comprend.

Amélioration progressive

• Avantages
  • Plus de contrôle grâce à la fidélité des couleurs gérée.
  • Stratégie additive qui n'affecte pas les couleurs actuelles.
• Inconvénients
  • Vous devez gérer deux syntaxes de couleurs distinctes.
  • Vous devez gérer deux gammes de couleurs distinctes.

Vérifier la prise en charge de la gamme et de l'espace colorimétrique

Le navigateur permet de vérifier la prise en charge des fonctionnalités gamut et de la syntaxe des couleurs CSS et JavaScript. La gamme exacte de couleurs dont l'utilisateur dispose n'est pas disponible. Une réponse généralisée est fournie afin de préserver la confidentialité de l'utilisateur. La prise en charge exacte de l'espace colorimétrique est toutefois disponible, car elle n'est pas spécifique aux capacités du matériel de l'utilisateur, comme l'est la gamme.

Requêtes de prise en charge de la gamme de couleurs

Les exemples de code suivants vérifient la gamme de couleurs de l'affichage de l'utilisateur visiteur.

Vérifier dans le CSS

La demande d'assistance la moins spécifique est la requête média dynamic-range:

Navigateurs pris en charge

• 98
• 98
• 100
• 13.1

Source

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

Pour obtenir une assistance approximative ou supérieure, vous pouvez utiliser la requête média color-gamut:

Navigateurs pris en charge

• 58
• 79
• 110
• 10

Source

@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 */
}

Deux autres requêtes média permettent de vérifier la compatibilité:

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

Vérifier à partir de JavaScript

Pour JavaScript, la fonction window.matchMedia() peut être appelée et transmise à une requête média pour évaluation.

Navigateurs pris en charge

• 9
• 12
• 6
• 5.1

Source

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

Le format ci-dessus peut être copié pour le reste des requêtes média.

Requêtes d'assistance concernant l'espace colorimétrique

Les exemples de code suivants vérifient le navigateur de l'utilisateur visiteur et la sélection des espaces de couleur avec lesquels travailler.

Vérifier dans le CSS

La prise en charge des espaces colorimétriques individuels peut être demandée à l'aide d'une requête @supports:

Navigateurs pris en charge

• 28
• 12
• 22
• 9

Source

@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 */
}

Vérifier à partir de JavaScript

Pour JavaScript, la fonction CSS.supports() peut être appelée et transmise à une paire propriété/valeur pour voir si le navigateur la comprend.

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

Assembler le matériel et les vérifications d'analyse

En attendant que chaque navigateur mette en œuvre ces nouvelles fonctionnalités de couleur, nous vous recommandons de vérifier à la fois la capacité matérielle et la capacité d'analyse des couleurs. C'est souvent celui que j'utilise pour améliorer progressivement les couleurs vers la haute définition:

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

Déboguer les couleurs à l'aide des outils pour les développeurs Chrome

Les outils pour les développeurs Chrome sont mis à jour et équipés de nouveaux outils pour aider les développeurs à créer, convertir et déboguer des couleurs HD.

Sélecteur de couleur modifié

Le sélecteur de couleur est désormais compatible avec tous les nouveaux espaces de couleur. Permettre aux auteurs d'interagir avec les valeurs de canal comme ils le feraient.

Limites de la gamme

Une limite de gamme a également été ajoutée afin de séparer les gammes srgb et display-p3. Clarifier la gamme dans laquelle se trouve la couleur sélectionnée.

Cela permet aux auteurs de différencier visuellement les couleurs HD des couleurs non HD. Cette approche est particulièrement utile lorsque vous utilisez la fonction color() et les nouveaux espaces colorimétriques, car ils permettent de produire des couleurs non-HD et HD. Si vous souhaitez vérifier dans quelle gamme votre couleur fait partie, ouvrez le sélecteur de couleur et voyez !

Convertir les couleurs

Depuis de nombreuses années, les outils de développement convertissent les couleurs dans des formats compatibles tels que HTL, HWB, RVB et hexadécimal. shift + click sur un échantillon de couleur carrée dans le volet "Styles" pour effectuer cette conversion. Les nouveaux outils de couleur ne se contentent pas de faire défiler les conversions : ils offrent une boîte de dialogue dans laquelle les auteurs peuvent voir et sélectionner la conversion de leur choix.

Lors d'une conversion, il est important de savoir si elle a été coupée pour s'adapter à l'espace. Les outils de développement disposent désormais d'une icône d'avertissement dans la couleur convertie qui vous avertit de ce rognage.

Découvrez d'autres fonctionnalités de débogage CSS dans les outils de développement.

Étapes suivantes

Des manipulations et interpolations plus cohérentes, ainsi que des couleurs plus vives, offrent globalement une expérience plus colorée à vos utilisateurs.

Découvrez d'autres ressources de couleur dans le guide.