CSS-свойство `print-color-adjust`

CSS-свойство print-color-adjust CSS задаёт, может ли пользовательский агент оптимизировать отображение элемента на устройстве вывода и каким образом. По умолчанию браузеру разрешено вносить любые изменения во внешний вид элемента, которые он считает необходимыми и целесообразными с учётом типа и возможностей устройства вывода.

Синтаксис

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;

Значения

Это свойство задаётся одним из следующих ключевых слов:

economy

Пользовательский агент может изменять элемент так, как считает уместным и целесообразным, чтобы оптимизировать вывод для устройства, на котором он отображается. Например, при печати браузер может не выводить фоновые изображения и изменять цвета текста, чтобы обеспечить оптимальный контраст при чтении на белой бумаге. Это значение по умолчанию.

exact

Содержимое элемента было тщательно продумано и создано с использованием цветов, изображений и стилей, которые имеют особое значение и/или важны, поэтому изменения браузера могут ухудшить внешний вид. Внешний вид содержимого не должен изменяться без запроса пользователя. Например, страница может содержать список сведений, строки которого чередуются белым и светло-серым фоном. Удаление цвета фона снизит разборчивость содержимого.

Примечания по использованию

Браузер может захотеть отступить от заданного внешнего вида по ряду причин, например:

• Цвета текста и фона содержимого могут быть слишком похожи на устройстве вывода, что затруднит чтение.
• Если устройством вывода является принтер, тёмные или очень плотные фоновые изображения могут быть удалены для экономии чернил.
• При печати страницы браузер может заменить светлый текст на тёмном фоне тёмным текстом на белом фоне.

Любые настройки, предлагаемые пользовательским агентом для управления использованием цветов и изображений, имеют приоритет над значением print-color-adjust. Иными словами, нет гарантии, что print-color-adjust что-либо изменит. Пользователь может переопределить это поведение, а пользовательский агент может самостоятельно решать, как обрабатывать print-color-adjust в каждой конкретной ситуации.

Формальное определение

Формальный синтаксис

print-color-adjust = 
  economy |
  exact

Примеры

Сохранение низкой контрастности

В этом примере показан блок, в котором используются background-image и полупрозрачная функция linear-gradient() поверх чёрного фона, чтобы создать тёмно-синий градиент за текстом среднего оттенка красного. По какой-либо причине именно такой внешний вид необходим в любой среде отображения, в том числе на бумаге, поэтому мы также используем print-color-adjust: exact, чтобы указать браузеру не изменять цвета или стили блока при его отображении.

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>

Результат

Спецификации

Совместимость с браузерами

См. также

• Другие свойства, связанные с цветом: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color и column-rule-color
• background-image