Ce document fait partie du guide des couleurs CSS haute définition.
Il existe deux stratégies principales pour modifier la couleur de votre projet Web afin de l'adapter Écrans larges:
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.
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:
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
@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:
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
@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é:
Vérifier à partir de JavaScript
Pour JavaScript, la classe
window.matchMedia()
peut être appelée et transmise à une requête média pour évaluation.
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
:
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
@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.
![Capture d'écran du rognage de la plage des outils de développement, avec une icône d'avertissement à côté de la couleur.](https://developer.chrome.com/static/docs/css-ui/migrate-hd-color/image/devtools-informing.png?authuser=9&hl=fr)
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.