Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété color-adjust

Description de la propriété color-adjust.

color-adjust indique si le navigateur est autorisé à optimiser les couleurs. Cette optimisation est surtout utile au moment de l'impression, mais certains navigateurs optimisent également les couleurs sur l'écran, par exemple pour améliorer la lisibilité.

Plusieurs cas de figure nécessitent une optimisation :

  • A l'impression, pour économiser de l'encre. Les grands aplats de couleurs consomment beaucoup d'encre. Le navigateur peut alors décider d'inverser les couleurs du premier-plan (texte) et de l'arrière-plan.
    Autre exemple : une impression du texte en gris sur une imprimante couleur utilise les trois cartouches d'encre rouge, verte et bleue, pour créer le gris, alors qu'une impression en noir n'aurait consommé que de l'encre noire.
  • Problème de lisibilité sur une impression en noir et blanc. Certaines couleurs peuvent être faciles à distinguer sur un écran en couleurs mais trop proches sur une impression monochrome.
  • A l'écran, lorsque la couleur du texte et la couleur de l'arrière-plan sont très proches l'une de l'autre, l'optimisation peut améliorer la lisibilité. Peu de navigateurs (voire aucun) effectuent une optimisation à l'écran.

L'utilisateur peut généralement désactiver l'impression des images d'arrière-plan et des aplats de couleur. Dans ce cas, les options choisies par l'utilisateur sont prioritaires : la propriété color-adjust n'a plus d'effet.

La propriété color-adjust n'est pas encore standardisée. Il peut y avoir des différences de traitement, même entre des navigateurs qui reconnaissent la propriété.

Reste aussi le fait que l'utilisateur peut, de façon prioritaire, choisir une option contradictoire. Le fonctionnement de la propriété color-adjust est donc relativement aléatoire.

Chrome utilise une propriété spécifique nommée -webkit-print-color-adjust

Syntaxes pour color-adjust.

  • color-adjust: economy;

    Valeur par défaut. Le navigateur est autorisé à optimiser les couleurs en vue d'économiser l'encre ou d'améliorer la lisibilité.

  • color-adjust: exact;

    Le navigateur doit imprimer les couleurs telles qu'elles sont définies par la feuille de styles. Cette valeur peut être utilisée lorsque les couleurs apportent une signification et n'ont pas uniquement un rôle esthétique.
    Cependant, l'utilisateur peut décider, au moment d'imprimer, d'opter pour l'option contraire.

  • color-adjust: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Si votre navigateur optimise les couleurs à l'écran, vous verrez une amélioration de la lisibilité du premier cadre. Pour l'impression vous devrez afficher l'aperçu et constater si le deuxième cadre s'imprime sur un fond noir ou pas. Le troisième cadre aura une image de fond ou pas, à l'impression ou sur l'aperçu.

Ajouter un préfixe :
color-adjust :
-webkit-print-color-adjust :
Ce texte est écrit dans une couleur très proche de celle de l'arrière-plan
Certains navigateurs changent l'une des couleurs pour améliorer la lisibilité
Ce texte est écrit sur un fond noir, ce qui consomme beaucoup d'encre à l'impression.
Afficher l'aperçu avant impression pour voir l'effet de la propriété color-adjust.
L'arrière-plan de cet élément comporte une image. Afficher l'aperçu avant impression pour voir l'effet de la propriété color-adjust.

Prise en charge par les navigateurs (compatibilité).

La propriété color-adjust n'étant pas standardisée par le W3C, il est recommandé de l'utiliser avec précautions et de décliner les syntaxes avec les préfixes -moz- et -webkit-.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Impression - Propriétés.

  • bleed :
  • break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
  • break-before : Interdit ou impose des sauts (page, colonne...) avant l'élément.
  • break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
  • orphans : Gestion des coupures en bas de page.
  • size : Dimensions et orientation des pages imprimées.
  • widows : Gestion des ruptures en haut de page.

Impression - Directives.

  • @page : Caractéristiques de la page, à l'impression.