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 modifier la couleur de votre projet Web afin de l'adapter Écrans larges:

1. Dégradation élégante: utilisez les nouveaux espaces colorimétrique et laissez le navigateur et système d'exploitation à déterminer quelle couleur afficher en fonction des capacités d'affichage.

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

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

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

Si un navigateur accepte 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 <ph type="x-smartling-placeholder">
  </ph>
  • C'est la solution la plus simple.
  • La carte de la gamme du navigateur se limite à sRVB s'il ne s'agit pas d'un affichage large c'est donc le navigateur qui en est responsable.
• Inconvénients <ph type="x-smartling-placeholder">
  </ph>
  • Le navigateur peut restreindre la portée ou la palette à une couleur que vous n'aimez pas.
  • Le navigateur peut ne pas comprendre la demande de couleur et échouer complètement. Toutefois, vous pouvez l'atténuer en spécifiant deux fois la couleur, ce qui permet à la cascade à la couleur précédente qu'il comprend.

Amélioration progressive

• Avantages <ph type="x-smartling-placeholder">
  </ph>
  • Plus de contrôle grâce à la fidélité des couleurs gérée.
  • Stratégie d'addition qui n'affecte pas les couleurs actuelles.
• Inconvénients <ph type="x-smartling-placeholder">
  </ph>
  • Vous devez gérer deux syntaxes de couleurs distinctes.
  • Vous devez gérer deux palettes de couleurs distinctes.

Vérifier la compatibilité avec la gamme et l'espace colorimétrique

Le navigateur permet de vérifier la compatibilité des fonctionnalités à large gamme et des couleurs compatibles avec la syntaxe CSS et JavaScript. La gamme exacte des couleurs dont l'utilisateur a n'est pas rendue disponible, une réponse générale est fournie afin que la confidentialité des utilisateurs soit sont gérés. La prise en charge exacte de l'espace colorimétrique est toutefois disponible, car elle n'est pas propres aux capacités du matériel de l'utilisateur, comme l'est Gamut.

Requêtes d'assistance pour la gamme de couleurs

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

Vérifier via le CSS

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

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

Vous pouvez obtenir de l'aide approximative ou supérieure auprès du color-gamut requête média:

@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 requêtes média supplémentaires permettent de vérifier la compatibilité:

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

Vérifier à partir de JavaScript

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

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 les autres 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 sa sélection d’espaces colorimétriques à utiliser.

Vérifier via le CSS

Pour obtenir de l'aide concernant chaque espace colorimétrique, utilisez un Requête @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 */
}

Vérifier à partir de JavaScript

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

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

Combiner les vérifications de matériel et d'analyse

En attendant que chaque navigateur implémente ces nouvelles fonctionnalités de couleur, bonne idée de vérifier à la fois la capacité du matériel et la capacité d'analyse des couleurs. Voici ce que j'utilise souvent pour améliorer progressivement les couleurs en 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 la couleur avec les outils pour les développeurs Chrome

Les outils pour les développeurs Chrome sont mis à jour et incluent de nouveaux outils pour aider les développeurs créer, convertir et déboguer une couleur HD.

Sélecteur de couleur mis à jour

Le sélecteur de couleur est désormais compatible avec tous les nouveaux espaces de couleur. Permettre aux auteurs de interagissent avec les valeurs de la chaîne comme ils l'auraient fait.

Limites de gamme

Une ligne délimitant la gamme a également été ajoutée pour tracer une ligne entre s rgb et des gammes display-p3. Indiquer clairement dans quelle gamme se trouve la couleur sélectionnée.

Cela aide les auteurs à distinguer visuellement les couleurs HD des couleurs non HD. Il est particulièrement utile lorsque vous travaillez avec la fonction color() et le nouveau espaces colorimétrique car ils sont capables de produire des couleurs non HD et HD. Si vous voulez vérifier la gamme de votre couleur, ouvrez le sélecteur de couleur et voyez !

Convertir les couleurs

Les outils de développement ont pu convertir les couleurs entre les formats pris en charge tels que HSL, hwb, rgb et hex depuis de nombreuses années. shift + click sur un échantillon de couleur carré dans Volet "Styles" pour effectuer cette conversion. Les nouveaux outils de couleur ne font pas que via les conversions, elles génèrent une boîte de dialogue dans laquelle les auteurs peuvent voir la conversion souhaitée.

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

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

Étapes suivantes

Plus de vibrance, des manipulations et interpolations cohérentes et un résultat global une expérience plus colorée à vos utilisateurs.

En savoir plus sur les ressources sur les couleurs dans le guide.