Веб продолжает появляться там, где мы его не ожидали: в телефонах, телевизорах, часах, книгах, игровых приставках, меню сетей быстрого питания, газовых насосах, лифтах, автомобилях – даже в холодильниках.

С развитием интернета появляются новые возможности и новые функции. Многие устройства не имеют высококлассных мониторов, поэтому в CSS Color Module Level 4 было предложено свойство для настройки цветов color-adjust.

Оно имеет два значения: economy и exact. Значение exact указывает браузеру, что он не должен вносить изменения в цвета, объявленные в таблице стилей:

Браузер будет отображать все цвета как можно более точно для всех элементов с классом card. Степень точности зависит от возможностей устройства.

Значение economy в спецификации описано так:

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

Таким образом, браузер может вносить коррективы в цветовые значения по своему усмотрению.

Отличные возможности

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

Но мы должны понимать, что наша платонически идеальная конструкция не может существовать в реальном мире, как хотелось бы. Не у всех есть retina-устройства с роскошным цветовым пространством DCI-P3, а также идеальное зрение и идеальное освещение. В таких обстоятельствах лучше прогнуться, а не сломаться.

Мы живем в мобильном, маленьком, портретно ориентированном, медленном, монохромном мире без эффектов наведения курсора. Экраны с ограниченным цветоотображением встречаются не так редко, как вам кажется, и вероятно, будут распространяться еще сильнее. Интернет все больше используется в развивающихся странах людьми с низкими доходами, которые используют преимущественно дешевые приборы с дисплеями низкого качества.

Поддержка браузеров

На момент публикации этой статьи свойство color-adjust поддерживалось Firefox начиная с 48 версии (а также на Android Firefox с версии 60).

Десктопные браузеры

  • Chrome: 19
  • Opera: 15
  • Firefox: 48
  • IE: No support
  • Edge: 18
  • Safari: 6

Мобильные/Планшетные браузеры

  • iOS Safari: 12
  • Opera Mobile: No support
  • Opera Mini: No support
  • Android: 67
  • Android Chrome: 67
  • Android Firefox: 60

Подробнее вы можете узнать на Caniuse.

Chrome и Safari, оба браузера WebKit, требуют объявления с вендорным префиксом -webkit-print-color-adjust. Забавно, что -webkit-print сигнализирует о том, что данное свойство предназначено только для печати. Хотя в документации W3C упоминаются случаи использования для печати, она не ограничивается этим.

Люди все еще печатают веб-страницы! Бумага не зависит от интернет-соединения и мощности устройства. Печатные страницы – это просто дисплеи с ограниченным цветовоспроизведением.

Потенциальное использование

Можно использовать преимущества каскадной модели и указывать color-adjust для тела документа:

Разрешить браузеру при необходимости корректировать цвета намного лучше, чем заставлять его любой ценой соблюдать стили, потенциально делая страницу совершенно неразборчивой.

Можно настроить отображение цветов более конкретно внутри правила @supports в медиазапросе для печати, но это лишняя работа.

Любопытно посмотреть, как color-adjust будет работать в сочетании с другими возможностями браузера, например, API датчика света (бывший Battery Status API). Было бы неплохо иметь возможность экспериментировать с другими специализированными режимами отображения: Night Shift, увеличением контрастности, Grayscale и уменьшением прозрачности на macOS.

Замечание о доступности

Существует ли программное обеспечение, которое может быть переопределить описание устройства. Оно может «обмануть» браузер, заставляя его думать, что необходимо включить экономный режим цветовоспроизведения. Это было бы очень похоже на некоторые режимы чтения, только с сохранением макета страницы.

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

Гнуться, не ломаясь

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

Благодаря отказоустойчивости CSS браузеры, которые не понимают новое свойство, просто проигнорируют его.

Важно, чтобы сайты и веб-приложения адаптировались к среде и условиям пользователя, а не наоборот.

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован