TGViewer
Defront — про фронтенд-разработку и не только Defront — про фронтенд-разработку и не только @defront · 5.05K subscribers
Post #704 3.47K
Пару месяцев назад в твиттере завирусился свежий CSS-синтаксис для задания прозрачности у цвета. Крис Койер написал по этому поводу небольшую статью — "No-Comma Color Functions in CSS".

Ранее у CSS-функций для работы с цветом были две версии: обычная ( rgb, hsl ), и с добавлением альфа-канала ( rgba, hsla ). Чтобы не создавать лишние сущности, авторы спецификации унифицировали синтаксис определения прозрачности при добавлении новых функций lab, lch, color, и теперь можно задать цвет с альфа-каналом без использования специальных функций. В новом синтаксисе компоненты цвета перечисляются через пробел, альфа-канал указывается после символа "/":

/* было */
rgba(0, 128, 255, 0.5)
hsla(198, 28%, 50%, 0.5)

/* стало */
rgb(0 128 255 / 50%)
hsl(198deg 28% 50% / 50%)
lab(56.29% -10.93 16.58 / 50%)
lch(56.29% 19.86 236.62 / 50%)
color(sRGB 0 0.50 1 / 50%)


Поддержка нового синтаксиса есть во всех современных браузерах кроме IE11 (для его поддержки можно использовать PostCSS-плагин).

#css

https://css-tricks.com/no-comma-color-functions-in-css/
CSS-Tricks No-Comma Color Functions in CSS There have been a couple of viral tweets about this lately, one from Adam Argyle and one from Mathias Bynes. This is a nice change that makes CSS a bit
More from @defront
  1. Jan 7, 2024Channel name was changed to «Defront — про фронтенд-разработку и не только»
  2. Feb 24, 2022Про войну в Украине Шлю лучи поддержки братьям и сёстрам украинцам. В моём окружении нет н…
  3. Feb 23, 2022Qwik — возобновляемый JavaScript-фреймворк Райан Карниато поделился своими мыслями после р…
  4. Feb 22, 2022Обработка ошибок с помощью reportError Стэфан Джудис рассказал про малоизвестный метод для…
  5. Feb 21, 2022Выбор библиотеки по её размеру Владимир Клепов рассказал про подводные камни выбора библио…
  6. Feb 10, 2022Time-travel debugging в Svelte Сэм Ван Тассел рассказал про DeLorian — новый инструмент дл…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →