Возможности свойства color-adjust CSS

Возможности свойства color-adjust CSS

От автора: Open Web продолжает проявлять себя там, где мы никогда бы не подумали: телефоны, телевизоры, часы, книги, игровые приставки, газовые насосы, лифты, автомобили — даже холодильники. Не определяя слишком много или слишком строго то, как использовать Интернет, он остается гибким и адаптируемым. Эти качества позволили ему превзойти закрытые технологии, такие как Flash и Silverlight.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Объявление color-adjust: exact; в этом примере заставляет браузер отображать все цвета как можно точнее. Точнее значит максимально близко, исходя из возможностей устройства.

Для значения economy в спецификации дается такое определение: «Агент пользователя должен внести коррективы в стили страницы, которые он считает необходимыми и разумными для устройства вывода». Оно полагается на браузер, позволяя ему корректировать цвет, как он считает нужным.

Возможности

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

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

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

Поддержка браузерами

На момент публикации этой статьи color-adjust поддерживалось в Firefox 48 и выше (и Android Firefox 60): Данные поддержки браузера принадлежат Caniuse, где вы можете найти более подробную информацию. Число указывает, что браузер поддерживает эту функцию с этой версии и выше.

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

Люди все еще распечатывают веб-страницы! Бумага не требует плана передачи данных, и соединение не прервется, когда вы спускаетесь под землю. Только вчера я видел в поезде человека, который использовал набор распечаток с сайта для подготовки к экзамену. И вот важный момент: печатные страницы ограничиваются только цветными дисплеями.

Также было бы упущением не упомянуть о ситуациях, когда стили для печати отсутствуют или плохо разработаны, что потенциально заставляло принтер тратить чернила, пытаясь сделать то, что требуют стили. Чернила для принтеров ужасно дороги — это значит, что ваш (или вашего IT-отдела) бюджет будет тратиться понапрасну.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Я думаю, что color-adjust может стать одним из тех свойств, которые лучше всего будут чувствовать себя, если их явно объявить в селекторе body, что позволит наилучшим образом воспользоваться преимуществами каскада:

В этом объявлении говорится: «Каждый раз, когда я объявляю цвет на этом веб-сайте, использовать значения, которые я указываю. Если вы не можете, ничего страшного — сделайте то, что, по вашему мнению, лучше ». Это намного лучше, чем когда браузер пытается буквально интерпретировать инструкции по стилю любой ценой и делает страницу совершенно нечитаемой.

Вы можете объявить color-adjust более специфическим образом, например, вложив в at-правило @supports внутри медиа-запроса print, но это лишняя работа. Это может не работать в сочетании с такими вещами, как High Contrast Mode или ожидаемыми медиа-функциями цветовой гаммы. Лучше оставить более широкий охват.

Мне также очень любопытно узнать, как color-adjust будет работать в сочетании с другими возможностями браузера, скажем, Ambient Light Sensor API (покойся с миром, Battery Status API). Было бы здорово, если бы можно было поэкспериментировать с другими специализированными режимами отображения — на ум приходят опции Night Shift, Increased Contrast, Grayscale и Reduce Transparency для MacOS.

Примечания относительно доступности

Мне интересно, можно ли написать программное обеспечение (расширение браузера, букмарклет и т. д.), чтобы переопределить то, что аппаратное обеспечение устройства сообщает о себе. Которое, подобно спуфингу агента пользователя, может «обмануть» браузер, заставляя его думать что устройство имеет ограниченный по цветам дисплей, и что, соответственно, следует использовать economy, чтобы улучшить контраст между текстом и цветом фона. Это было бы очень похоже на режимы чтения в браузере.

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

Сгибайтесь, но не ломайтесь

color-adjust похоже на естественное расширение Intrinsic Web Design Йена Симмонса: гибкий интерфейс, относительные размеры, медиа-запросы по мере необходимости и простые объявления.

Сила Каскада CSS заключается в том, что вы можете изящно создать намерение, а затем настроить его по мере необходимости. Документация по color-adjust специально описывает на ситуацию, когда было бы полезно обеспечить, чтобы полосы разного цвета строк таблицы сохранялись при печати, чтобы облегчить чтение. Такая настройка может быть привязана к одному селектору, без необходимости тратить время на его переопределение для всех остальных компонентов.

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

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

Автор: Eric Bailey

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree