La color-adjustpropriété est décrite par la spécification comme «préservation des couleurs dans les appareils à capacités différentes». Vous savez comment il existe des téléphones, des tablettes et d'autres appareils sans écran de qualité rétine? Eh bien, cette propriété fournit au navigateur un indice pour prendre des décisions sur la façon de gérer les couleurs en fonction de cette qualité.
Vous pensez peut-être à quelque chose du genre: "Attendez, le rouge n'est-il pas seulement rouge?" Et, oui, c'est absolument vrai. Quel est l'intérêt d'optimiser ou d'ajuster une couleur qui est vraie, peu importe où elle est affichée?
Le fait est que les navigateurs ont déjà tendance à faire ces déterminations et à ajuster les couleurs eux-mêmes, comme la sortie d'un rouge légèrement différent si l'agent utilisateur est incapable de rendre un hexagone spécifique en raison de la qualité de l'écran d'un autre facteur. La propriété dit effectivement au navigateur: "Hé, j'aimerais que vous utilisiez cette couleur, mais c'est cool si vous ne pouvez pas et que vous voulez appliquer votre meilleure alternative à la situation." Ou, à l'inverse, il peut demander au navigateur de faire correspondre exactement la couleur à tout prix.
Styles imprimés
Il est intéressant de noter que la spécification utilise l'exemple de l'impression de pages Web tout au long de la définition de color-adjust. Cependant, il n'y a pas de documentation réelle qu'il est destiné à l'impression. Cela n'a pas empêché Chrome et Safari d'implémenter une version préfixée nommée webkit-print-color-adjust, ce qui est une forte indication qu'elle est destinée à des fins d'impression.
Pourquoi est-ce important? La spécification décrit un cas d'utilisation où le maintien de la bande zébrée d'un tableau stylisé sur une page imprimée pourrait améliorer la lisibilité:
Par exemple, un site Web de cartographie proposant des instructions imprimées pourrait «zébrer» les étapes dans les directions, en alternant entre des arrière-plans blancs et gris clair. Perdre ces rayures zébrées et avoir un fond blanc pur rendrait les directions plus difficiles à lire avec un coup d'œil rapide lorsque vous êtes distrait dans une voiture.
color-adjustest défini sur economy.
Syntaxe
.my-element ( color-adjust: (economy | exact); )Valeurs
economy(valeur initiale): Cette valeur permet au navigateur de modifier la couleur et le style d'un élément là où il le souhaite, que ce soit pour améliorer la lisibilité, remplacer une couleur qu'un périphérique est incapable d'afficher ou un autre facteur. Notez qu'il s'agit de la valeur par défaut et, même si la propriété n'est pas appliquée, c'est ainsi que les navigateurs se comporteront.exact: Cette valeur indique au navigateur de faire correspondre une couleur à tout prix afin de préserver le style déclaré. Il serait utilisé pour désigner les styles qui sont «importants» ou «significatifs» pour l'élément.
Notez que l'utilisation par défaut de economysavoir si la propriété est appelée ou non suggère qu'elle color-adjustest conçue pour fournir un signal aux navigateurs indiquant les styles suffisamment importants pour être préservés.
Statut de spécification
La color-adjustpropriété est définie dans le CSS Color Module Level 4, qui est dans le statut de premier projet de travail public au moment de la rédaction de cet article. Cela signifie qu'il n'a pas encore été approuvé par le W3C et pourrait être mis à jour, modifié ou même supprimé dans les révisions ultérieures. En tant que telle, cette propriété n'est pas prête pour la production et est considérée comme expérimentale.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 19 * | 48 | Non | 79 * | 6 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Plus d'information
- Module de couleurs CSS Niveau 4 Premier projet de travail public
- Statistiques d'utilisation de Microsoft Edge
- Documentation MDN
- Les possibilités de la propriété de réglage des couleurs