Школа
Веб-разработка

Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA?

У меня вопрос о нотации в ЦСС. Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? Например, когда красный с 10% опасности описывают в коде с помощью #ff00001a вместо rgba(255, 0, 0, 0.1)
https://caniuse.com/css-rrggbbaa

Какие преимущества и недостатки видите у этого способа записи альфа‑канала? Используете ли его в своих проектах?

Иван Рожков
19 окт 2023
👁 2809   🗩3
Веб-разработка

Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA?

У меня вопрос о нотации в ЦСС. Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? Например, когда красный с 10% опасности описывают в коде с помощью #ff00001a вместо rgba(255, 0, 0, 0.1)
https://caniuse.com/css-rrggbbaa

Какие преимущества и недостатки видите у этого способа записи альфа‑канала? Используете ли его в своих проектах?

Иван Рожков
19 окт 2023
👁 2809   🗩3
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 8
8
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Иван!

В целом уже неважно, на пороге большие изменения, см. «OKLCH в CSS: почему мы ушли от RGB и HSL». Недавно появился новый формат записи цвета с целым набором преимуществ, его вот‑вот уже можно будет использовать во всех браузерах.

Верный признак хорошего кода — можно без его выполнения понять результат его выполнения. В случае с ХТМЛ и ЦСС — понять вид страницы без заглядывания в браузер

Но пока будущее ещё не наступило… Главный плюс РГБА, по сравнению с шестнадцетеричной (хекс‑записью), — РГБА заметно нагляднее, нужно меньше напрягать мозг.

Верный признак хорошего кода — можно без его выполнения понять результат его выполнения. В случае с ХТМЛ и ЦСС — понять вид страницы без заглядывания в браузер

Понять и представить примерный цвет РГБА сможет даже далёкий от разработки человек. В хекс‑записи это сможет сделать далеко не каждый — где там вообще цвет, а где прозрачность?

Чем понятнее сама запись, тем проще видеть связи нескольких записей. В РГБА сходу виден принцип формирования одних цветов из других. С хекс‑записью придётся сильнее напрячь мозг. Что за цвет e2 и почему 50% прозрачности записывается как 80?

.link {
  color: rgb(226, 0, 22);
  text-decoration-color: rgba(226, 0, 22, 0.5);
}
  
.link:hover {
  color: rgb(6, 85, 128);
  text-decoration-color: rgba(6, 85, 128, 0.5);
}
  
.link:visited {
  color: rgb(85, 26, 139);
  text-decoration-color: rgba(85, 26, 139, 0.5);
}
.link {
  color: #e20016;
  text-decoration-color: #e2001680;
}
  
.link:hover {
  color: #065580;
  text-decoration-color: #06558080;
}
  
.link:visited {
  color: #065580;
  text-decoration-color: #06558080;
}



А ещё в РГБА можно использовать переменные:

.link {
  text-decoration-color: rgba(226, 0, 22, var(--underline-opacity, 0.5));
}
  
.link:hover {
  --underline-opacity: 1;
}

В целом хекс‑запись прозрачности — как будто усложнение на пустом месте.

Разработчик ничего не получает, но вынужден по чуть‑чуть тратить свой самый ценный ресурс — внимание — на бесполезную когнитивную нагрузку. А чем больше внимания разработчик тратит на бесполезное, тем меньше его остаётся для полезных задач. Понимание этого помогает выбрать не только форму записи цвета, но и технологический стек, архитектуру и патерны, и даже частоту регулярных встреч с коллегами :‑)

P. S. Приглашаю уважаемых советчиков поделиться своими мыслями по теме в коментах. Особенно хочется услышать противоположное мнение — почему хекс круто, а РГБА отстой?

P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 8
8
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Алексей Канаев

Не считаю хекс‑запись совсем уж бесполезной, в некоторых случаях она может быть удобна. Например, если пилишь в свободное время свой личный сайтик и нужно цвету, уже описанному в формате #RRGGBB, быстро добавить прозрачность — можно просто дописать ещё 2 цифры в конце. Также удобно для быстрой визуальной оценки того, как будет выглядеть цвет с полупрозрачностью. И т. п. Кейсы специфические, но они есть.

Полагаю, шестнадцатеричная запись удобна, если нет необходимости играться с цветом, а нужно просто подставить уже готовые. Легко скопипастить, занимает мало места. Читаемость обеспечивают среды разработки, которые пусть и не все, но умеют отображать цвет цветовых литералов в разных форматах записи. Поэтому полагаю, записи #RRGGBB и #RRGGBBAA ещё долго останутся в строю, как задание размеров элементов в пикселях. Но то, что она не поддерживает более широкие палитры, чем sRGB, — это, конечно, жирнейший минус.

Sass позволяет записывать цвет в виде rgba(#000000, 0.5).

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы