- Сообщения
- 4 860
- Реакции
- 2 872
Полный текст заметки о новых возможностях цветоуказания для веб по ссылке.
Включение в CSS 4 версии трех стандартных и актуальных способа цветопередачи в @media - в принципе хорошая идея. CSS предусмотрел и другие варианты цветоуказания, в том числе даже CIE Lab и CIE LCh, которые пока не поддерживаются большинством браузеров. Но мне показалось, что отдельное прописывание в @media привычных hex # цветоуказаний для мейнстримных на сегодня и в близком будущем цветовых охватов устройств - решение правильное. Ведь hex хорош своей однозначностью, в нем не может быть отрицательных значений или значений с перебором, не нужно быть колористом, чтобы правильно интерпретировать тот или иной hex в браузере при его проектировании. Тогда как для цветоуказания в LCh потребуется и написание матричной хроматической адаптации, и написание гамут-маппинга, и однозначности представления цвета в таком случае просто не будет, потому что гамут-маппингов много, и никогда несколько колористов не сойдутся в единой оценке - а кто сжал "правильнее". А никто, все хорошо, каждый по-своему, на любой вкус. То есть LCh в CSS ведет к энтропии цвета, к неоднозначности его интерпретации за рамками охвата устройства отображения, а в старой доброй RGB разметке hex никакой энтропии, все однозначно, ничего заохватного.
Что важно отрефлексировать каждому, связанному с веб-дизайном. CSS версии 4 впервые в истории явно указал, что любые просто rgba и hex значения в разметке относятся к стандарту sRGB, а не к чему взбредет в голову разработчику браузера, многие из них ранее относили разметку к неопределенному клиентскому монитору, за что и были биты колористами многократно и нещадно. В 4 версии нет больше никакого "RGB просто", а есть стандарт sRGB. Это очень важно. Так исторически сложилось в лучших браузерах и было узаконено в спецификации CSS не так давно.
В теге @media (color-gamut) три варианта RGB-стандартов: srgb, p3, rec2020. Причем прописывать первый srgb отдельно в принципе не обязательно, любая разметка rgba и hex теперь считается именно стандартом sRGB, если специальным @media не оговорено иное. Разве что программисты отсталых браузеров не сразу сообразят досконально переписать колориметрию взаимоотношений браузера с монитором в операционной системе, и некоторое время будут упорствовать в неопределенности rgba и hex разметки, как не относящейся ни к какой конкретно модели RGB. Может быть для таких упертых и упоротых проектировщиков браузеров и присутствует отдельное указание - @media (color-gamut: srgb). Для нормальных разработчиков браузеров оно давно излишне. А в CSS Level 4 - теперь узаконено-излишне. Но дополнительное принуждение к законности отстающих как бы присутствует во вроде бы излишнем для профи @media (color-gamut: srgb).
Цветофобия, игнорирование непростых вопросов, связанных с такой многогранной штукой, как цвет - присуще бывает и полиграфистам, и веб-дизайнерам, и людям, далеким от этих профессий. Не разобравшись в вопросе, мне уже успели попенять, что hex представление цвета сайта - это вообще полная ерунда, и ни в чем, кроме как в LCh мы не приемлем цветовую разметку для веб. Я очень удивился, потому что LCh попал в CSS версии 4 совсем недавно, и практически никакие браузеры на сегодня разметки LCh не поддерживают. А поддержка LCh в будущем внесет скорее неоднозначность и вариативность представления, нежели однозначность и предсказуемость. Я не против уже несколько лет как давно анонсированному LCh в CSS - но каждому сверчку свой шесток, без уверенного владения непростой колориметрией, и программисты браузеров, и веб-дизайнеры, еще нам наворотят проблем в LCh, предполагаю. С матричной хромадаптацией PCS D50 к белой точке монитора справятся, конечно, а вот с гамут-маппингом точно будет кавардак.
Мне показалось достаточно уныло пересчитывать hex в другие актуальные модели RGB поштучно в цветовом конвертере или где-то еще из одного охвата в другие, потому и написал простую утилиту для такого автоматического и главное правильного матричного пересчета, и автоматического оформления разметки нужными тегами. Пользуйтесь.
У меня на заглавной странице сайта есть красный цвет в оформлении некоторых слов, которые не должны быть чересчур красными, красный не должен резать глаза чрезмерной насыщенностью и яркостью. Этот красный цвет я задавал когда-то не слишком насыщенным и ярким в модели sRGB, дефолтной для веб, но для бОльших охватов p3 и rec2020 тот же hex слишком насыщенный на мой вкус. Я хочу красный, но не хочу, чтобы пользователей крутых профессиональных устройств отображения такой мой красный ослеплял или раздражал избыточностью светлоты с насыщенностью. Я попробовал приделать к основному стилю CSS сайта пару посчитанных в предлагаемой утилите @media и получил на своем стандартном P3 экране большого охвата ровно то что хотел - такой же не слишком режущий по глазам красный, как и на мониторах небольшого охвата sRGB.
Как-то так выглядит сейчас мой css в самом низу дополнительной разметки:
@media (color-gamut: p3) {
.red {color: #CC2F20;}
.novinka {color: #CC2F20;}
}
@media (color-gamut: rec2020) {
.red {color: #9B2B10;}
.novinka {color: #9B2B10;}
}
при том, что в основном теле мейнстримной разметки для традиционного sRGB этот красный цвет представлен в hex как #df0e07.
Включение в CSS 4 версии трех стандартных и актуальных способа цветопередачи в @media - в принципе хорошая идея. CSS предусмотрел и другие варианты цветоуказания, в том числе даже CIE Lab и CIE LCh, которые пока не поддерживаются большинством браузеров. Но мне показалось, что отдельное прописывание в @media привычных hex # цветоуказаний для мейнстримных на сегодня и в близком будущем цветовых охватов устройств - решение правильное. Ведь hex хорош своей однозначностью, в нем не может быть отрицательных значений или значений с перебором, не нужно быть колористом, чтобы правильно интерпретировать тот или иной hex в браузере при его проектировании. Тогда как для цветоуказания в LCh потребуется и написание матричной хроматической адаптации, и написание гамут-маппинга, и однозначности представления цвета в таком случае просто не будет, потому что гамут-маппингов много, и никогда несколько колористов не сойдутся в единой оценке - а кто сжал "правильнее". А никто, все хорошо, каждый по-своему, на любой вкус. То есть LCh в CSS ведет к энтропии цвета, к неоднозначности его интерпретации за рамками охвата устройства отображения, а в старой доброй RGB разметке hex никакой энтропии, все однозначно, ничего заохватного.
Что важно отрефлексировать каждому, связанному с веб-дизайном. CSS версии 4 впервые в истории явно указал, что любые просто rgba и hex значения в разметке относятся к стандарту sRGB, а не к чему взбредет в голову разработчику браузера, многие из них ранее относили разметку к неопределенному клиентскому монитору, за что и были биты колористами многократно и нещадно. В 4 версии нет больше никакого "RGB просто", а есть стандарт sRGB. Это очень важно. Так исторически сложилось в лучших браузерах и было узаконено в спецификации CSS не так давно.
В теге @media (color-gamut) три варианта RGB-стандартов: srgb, p3, rec2020. Причем прописывать первый srgb отдельно в принципе не обязательно, любая разметка rgba и hex теперь считается именно стандартом sRGB, если специальным @media не оговорено иное. Разве что программисты отсталых браузеров не сразу сообразят досконально переписать колориметрию взаимоотношений браузера с монитором в операционной системе, и некоторое время будут упорствовать в неопределенности rgba и hex разметки, как не относящейся ни к какой конкретно модели RGB. Может быть для таких упертых и упоротых проектировщиков браузеров и присутствует отдельное указание - @media (color-gamut: srgb). Для нормальных разработчиков браузеров оно давно излишне. А в CSS Level 4 - теперь узаконено-излишне. Но дополнительное принуждение к законности отстающих как бы присутствует во вроде бы излишнем для профи @media (color-gamut: srgb).
Цветофобия, игнорирование непростых вопросов, связанных с такой многогранной штукой, как цвет - присуще бывает и полиграфистам, и веб-дизайнерам, и людям, далеким от этих профессий. Не разобравшись в вопросе, мне уже успели попенять, что hex представление цвета сайта - это вообще полная ерунда, и ни в чем, кроме как в LCh мы не приемлем цветовую разметку для веб. Я очень удивился, потому что LCh попал в CSS версии 4 совсем недавно, и практически никакие браузеры на сегодня разметки LCh не поддерживают. А поддержка LCh в будущем внесет скорее неоднозначность и вариативность представления, нежели однозначность и предсказуемость. Я не против уже несколько лет как давно анонсированному LCh в CSS - но каждому сверчку свой шесток, без уверенного владения непростой колориметрией, и программисты браузеров, и веб-дизайнеры, еще нам наворотят проблем в LCh, предполагаю. С матричной хромадаптацией PCS D50 к белой точке монитора справятся, конечно, а вот с гамут-маппингом точно будет кавардак.
Мне показалось достаточно уныло пересчитывать hex в другие актуальные модели RGB поштучно в цветовом конвертере или где-то еще из одного охвата в другие, потому и написал простую утилиту для такого автоматического и главное правильного матричного пересчета, и автоматического оформления разметки нужными тегами. Пользуйтесь.
У меня на заглавной странице сайта есть красный цвет в оформлении некоторых слов, которые не должны быть чересчур красными, красный не должен резать глаза чрезмерной насыщенностью и яркостью. Этот красный цвет я задавал когда-то не слишком насыщенным и ярким в модели sRGB, дефолтной для веб, но для бОльших охватов p3 и rec2020 тот же hex слишком насыщенный на мой вкус. Я хочу красный, но не хочу, чтобы пользователей крутых профессиональных устройств отображения такой мой красный ослеплял или раздражал избыточностью светлоты с насыщенностью. Я попробовал приделать к основному стилю CSS сайта пару посчитанных в предлагаемой утилите @media и получил на своем стандартном P3 экране большого охвата ровно то что хотел - такой же не слишком режущий по глазам красный, как и на мониторах небольшого охвата sRGB.
Как-то так выглядит сейчас мой css в самом низу дополнительной разметки:
@media (color-gamut: p3) {
.red {color: #CC2F20;}
.novinka {color: #CC2F20;}
}
@media (color-gamut: rec2020) {
.red {color: #9B2B10;}
.novinka {color: #9B2B10;}
}
при том, что в основном теле мейнстримной разметки для традиционного sRGB этот красный цвет представлен в hex как #df0e07.