Это color-adjustсвойство описывается в спецификации как «сохранение цветов в устройствах с различными возможностями». Вы знаете, что существуют телефоны, планшеты и другие устройства без экранов качества Retina? Что ж, это свойство дает браузеру подсказку для принятия решений о том, как обрабатывать цвета на основе этого качества.
Возможно, вы думаете что-то вроде: «Подождите, а не красный ли просто красный?» И да, это абсолютно верно. Какой смысл в оптимизации или настройке цвета, который будет верным независимо от того, где он отображается?
Дело в том, что браузеры уже имеют тенденцию делать эти определения и настраивать цвета самостоятельно, например, выводят немного другой красный цвет, если пользовательский агент не может отобразить конкретное шестнадцатеричное значение из-за качества экрана из-за какого-то другого фактора. Свойство фактически говорит браузеру: «Эй, я бы хотел, чтобы вы использовали этот цвет, но это круто, если вы не можете и хотите применить лучшую альтернативу для данной ситуации». Или, наоборот, он может указать браузеру любой ценой точно подобрать цвет.
Печатные стили
Интересно, что в спецификации используется пример печати веб-страниц во всем определении color-adjust. Однако фактической документации, предназначенной для печати, нет. Это не помешало Chrome и Safari реализовать версию с префиксом named webkit-print-color-adjust, что является убедительным свидетельством того, что она предназначена для печати.
Почему это важно? В спецификации описан вариант использования, в котором поддержание полосатости зебры стилизованной таблицы на печатной странице может улучшить читаемость:
Например, картографический веб-сайт, предлагающий напечатанные маршруты, может «разметать» шаги в направлениях, чередуя белый и светло-серый фон. Если вы потеряете эту полосатую зебру и получите чисто-белый фон, вам будет сложнее читать указания с первого взгляда, когда вы отвлечены в машине.
color-adjustустановлено значение economy.
Синтаксис
.my-element ( color-adjust: (economy | exact); )Значения
economy(начальное значение): это значение позволяет браузеру вносить изменения в цвет и стиль элемента там, где он решает, что это необходимо, будь то улучшение читаемости, замена цвета, который устройство не может отображать, или какой-либо другой фактор. Обратите внимание, что это значение по умолчанию, и даже если свойство не применяется, браузеры будут вести себя именно так.exact: Это значение указывает браузеру любой ценой подобрать цвет для сохранения заявленного стиля. Он будет использоваться для вызова стилей, которые «важны» или «значимы» для элемента.
Обратите внимание, что использование по умолчанию того economy, вызывается свойство или нет, предполагает, что color-adjustоно предназначено для предоставления браузерам сигнала, указывающего стили, которые достаточно важны, чтобы их сохранить.
Статус спецификации
color-adjustСвойство определяется в CSS Color Module Level 4, который находится в первом проекте статуса общественного рабочего на момент написания этой статьи. Это означает, что он еще не одобрен W3C и может быть обновлен, изменен или даже исключен в более поздних версиях. Таким образом, это свойство не готово к производству и считается экспериментальным.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 19 * | 48 | Нет | 79 * | 6 * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 14,0-14,4 |
Дополнительная информация
- CSS Color Module Level 4 Первый общедоступный рабочий проект
- Статистика использования Microsoft Edge
- Документация MDN
- Возможности свойства настройки цвета