print-color-adjust CSS property

Syntax

print-color-adjust: economy;
print-color-adjust: exact;

/* Global values */
print-color-adjust: inherit;
print-color-adjust: initial;
print-color-adjust: revert;
print-color-adjust: revert-layer;
print-color-adjust: unset;

Werte

Diese Eigenschaft wird als eines der folgenden Schlüsselwort-Werte angegeben:

economy

Dem User-Agent ist es erlaubt, Anpassungen am Element vorzunehmen, die er für geeignet und sinnvoll erachtet, um die Ausgabe für das Gerät zu optimieren, auf dem es dargestellt wird. Zum Beispiel könnte ein Browser beim Drucken alle Hintergrundbilder weglassen und Textfarben anpassen, um sicherzustellen, dass der Kontrast für das Lesen auf weißem Papier optimiert ist. Dies ist der Standardwert.

exact

Der Inhalt des Elements wurde speziell und sorgfältig mit Farben, Bildern und Stilen gestaltet, sodass eine Anpassung durch den Browser die Dinge möglicherweise verschlechtern würde. Das Erscheinungsbild des Inhalts sollte nur auf Wunsch des Nutzers geändert werden. Zum Beispiel könnte eine Seite eine Liste von Informationen enthalten, deren Zeilen abwechselnd weiße und hellgraue Hintergrundfarben haben. Das Entfernen der Hintergrundfarbe würde die Lesbarkeit des Inhalts verringern.

Anwendungshinweise

Es gibt eine Reihe von Gründen, warum ein Browser von der angegebenen Darstellung abweichen möchte, wie zum Beispiel:

• Der Inhalt verwendet Text- und Hintergrundfarben, die auf dem Ausgabegerät für Lesbarkeitszwecke zu ähnlich sind.
• Wenn das Ausgabegerät ein Drucker ist und um Tinte zu sparen, könnten dunkle oder extrem dichte Hintergrundbilder entfernt werden.
• Beim Drucken einer Seite möchte der Browser möglicherweise hellen Text auf dunklem Hintergrund durch dunklen Text auf weißem Hintergrund ersetzen.

Alle Optionen, die der User-Agent dem Benutzer bietet, um die Verwendung von Farben und Bildern zu steuern, haben Vorrang vor dem Wert von print-color-adjust. Mit anderen Worten, es gibt keine Garantie, dass print-color-adjust irgendetwas bewirkt. Der Benutzer kann nicht nur das Verhalten überschreiben, sondern jeder User-Agent darf selbst entscheiden, wie er print-color-adjust in einer gegebenen Situation behandelt.

Formale Definition

Formale Syntax

print-color-adjust = 
  economy  |
  exact    

Beispiele

Erhaltung von geringem Kontrast

In diesem Beispiel wird ein Kasten gezeigt, der ein background-image und eine durchscheinende linear-gradient() Funktion über einer schwarzen Hintergrundfarbe verwendet, um einen dunkelblauen Verlauf hinter einem mittleren roten Text zu erzeugen. Aus welchem Grund auch immer, dies ist das gewünschte Erscheinungsbild in jeder Wiedergabeumgebung, einschließlich auf Papier, daher verwenden wir auch print-color-adjust: exact, um dem Browser mitzuteilen, keine Farb- oder Stiländerungen am Kasten vorzunehmen, wenn er ihn rendert.

CSS

.my-box {
  background-color: black;
  background-image: linear-gradient(rgb(0 0 180 / 50%), rgb(70 140 220 / 50%));
  color: #990000;
  width: 15rem;
  height: 6rem;
  text-align: center;
  font:
    24px "Helvetica",
    sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  print-color-adjust: exact;
}

HTML

<div class="my-box">
  <p>Need more contrast!</p>
</div>

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere Farb-bezogene Eigenschaften: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, und column-rule-color
• background-image