От автора: Open Web продолжает проявлять себя там, где мы никогда бы не подумали: телефоны, телевизоры, часы, книги, игровые приставки, газовые насосы, лифты, автомобили — даже холодильники. Не определяя слишком много или слишком строго то, как использовать Интернет, он остается гибким и адаптируемым. Эти качества позволили ему превзойти закрытые технологии, такие как Flash и Silverlight.
С развитием Сети появляются новые функции, позволяющие лучше учитывать новые форм-факторы и варианты использования. Одна из функций, которые меня особо интересуют — это свойство color adjust CSS, предложенное в CSS Color Module Level 4. Это подтверждение того, что сеть будет продолжать отображаться на устройствах, которые имеют не самые крутые дисплеи.
Существует два значения для color-adjust: economy и exact. Значение exact указывает браузеру, что он не должен корректировать цвета, объявленные в таблице стилей:
.card { background-color: #98b3c7; border-bottom: 0.25rem solid #7c92a3; color: #f3f3f3; color-adjust: exact; ...
}Объявление 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, но не ограничиваются печатью.
Я думаю, что color-adjust может стать одним из тех свойств, которые лучше всего будут чувствовать себя, если их явно объявить в селекторе body, что позволит наилучшим образом воспользоваться преимуществами каскада:
body { color-adjust: economy; ...
}В этом объявлении говорится: «Каждый раз, когда я объявляю цвет на этом веб-сайте, использовать значения, которые я указываю. Если вы не можете, ничего страшного — сделайте то, что, по вашему мнению, лучше ». Это намного лучше, чем когда браузер пытается буквально интерпретировать инструкции по стилю любой ценой и делает страницу совершенно нечитаемой.
Вы можете объявить 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 специально описывает на ситуацию, когда было бы полезно обеспечить, чтобы полосы разного цвета строк таблицы сохранялись при печати, чтобы облегчить чтение. Такая настройка может быть привязана к одному селектору, без необходимости тратить время на его переопределение для всех остальных компонентов.
body { color-adjust: economy; ...
} tr { color-adjust: exact;
}Соответственно браузеры, которые не понимают это объявление, будут игнорировать его и продолжат разбор остальной части таблицы стилей. Браузеры, которые его поддерживают, могут воспользоваться этим объявлением, без какой-либо сложной настройки или опасности сниффинга агента пользователя.
Важно, чтобы дизайн веб-сайтов и веб-приложений адаптировался к среде и обстоятельствам, а не наоборот. Оптимальный опыт пользователя определяется тем, что нужно пользователю, а не тем, что, мы надеемся, ему будет нужно.
Автор: Eric Bailey
Источник: https://css-tricks.com/
Редакция: Команда webformyself.