Перейти к содержанию

print-color-adjust

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

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

Шрифт и Цвет

Синтаксис

1
2
3
4
5
6
7
8
9
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

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

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

Пример

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
.my-box {
  background-color: black;
  background-image: linear-gradient(
    rgba(0, 0, 180, 0.5),
    rgba(70, 140, 220, 0.5)
  );
  color: #900;
  width: 15rem;
  height: 6rem;
  text-align: center;
  font: 24px 'Helvetica', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  print-color-adjust: exact;
}
1
2
3
<div class="my-box">
  <p>Need more contrast!</p>
</div>

print-color-adjust

Ссылки

Комментарии