print-color-adjust

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

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

Шрифт и Цвет

• @font-face

• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• line-height

• color
• print-color-adjust
• opacity

Синтаксис

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

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

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

• CSS Color Adjustment Module Level 1

Пример

CSSHTMLРезультат

.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;
}

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

Ссылки

• print-color-adjust ^{MDN (анг.)}

Комментарии