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;

Der Wert der Eigenschaft print-color-adjust muss eines der folgenden Schlüsselwörter sein.

Werte

economy

Der User Agent darf Anpassungen am Element vornehmen, die er für geeignet und sinnvoll erachtet, um die Ausgabe für das Gerät, auf dem die Darstellung erfolgt, zu optimieren. Beispielsweise könnte ein Browser beim Drucken darauf verzichten, alle Hintergrundbilder anzuzeigen, und die Textfarben anpassen, um sicherzustellen, dass der Kontrast für das Lesen auf weißem Papier optimiert wird. Dies ist der Standardwert.

exact

Der Inhalt des Elements wurde speziell und sorgfältig gestaltet, um Farben, Bilder und Stile auf eine durchdachte und/oder wichtige Weise zu verwenden, so dass Änderungen durch den Browser die Dinge eher verschlechtern als verbessern könnten. Das Erscheinungsbild des Inhalts sollte nur auf Wunsch des Benutzers geändert werden. Beispielsweise könnte eine Seite eine Liste mit Informationen enthalten, bei der sich die Hintergrundfarben der Zeilen zwischen Weiß und einem hellen Grau abwechseln. Das Entfernen der Hintergrundfarbe würde die Lesbarkeit des Inhalts verringern.

Verwendungshinweise

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 zu ähnlich sind, um die Lesbarkeit zu gewährleisten.
• Wenn das Ausgabegerät ein Drucker ist, und um Tinte zu sparen, könnten dunkle oder extrem dichte Hintergrundbilder entfernt werden.
• Wenn eine Seite gedruckt wird, möchte der Browser eventuell hellen Text auf dunklem Hintergrund durch dunklen Text auf weißem Hintergrund ersetzen.

Jede Option, die der User Agent dem Benutzer bietet, um die Verwendung von Farbe und Bildern zu steuern, hat Priorität über den Wert von print-color-adjust. Das bedeutet, dass es keine Garantie dafür gibt, dass print-color-adjust etwas bewirken wird. Nicht nur kann der Benutzer das Verhalten überschreiben, sondern jeder User Agent darf selbst entscheiden, wie er print-color-adjust in einer bestimmten Situation handhabt.

Formale Definition

Formale Syntax

print-color-adjust = 
  economy  |
  exact    

Beispiele

Erhaltung von geringem Kontrast

In diesem Beispiel wird eine Box gezeigt, die ein background-image und eine durchsichtige linear-gradient()-Funktion auf einem schwarzen Hintergrund verwendet, um einen dunkelblauen Verlauf hinter einem mittelroten Text darzustellen. Aus welchem Grund auch immer, dies ist das gewünschte Erscheinungsbild in jeder Darstellung, einschließlich auf Papier. Daher verwenden wir print-color-adjust: exact, um dem Browser mitzuteilen, keine Farb- oder Stiländerungen an der Box vorzunehmen, wenn sie gerendert wird.

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 farbbezogene Eigenschaften: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, und column-rule-color
• background-image