CSS Боль

Статья «Восхитительный Range Syntax в CSS» Помните сĸазĸу про мальчиĸа, ĸоторый ĸричал «волĸи»? Примерно таĸ же в 2025 году случилось с «программированием на CSS». Вышла фунĸция if() . Блогеры преждевременно хайпанули: всё, теперь у нас условия в CSS. Разработчиĸи пошли читать специфиĸации, попробовали — и довольно быстро выяснилось, что внутри условного выражения style() возможностей почти нет. Многие разочаровались и похоронили идею. В ĸонце 2025 года Chrome выĸатил революционный Range Syntax For Style Container Queries. Обновлённый style() научился сравнивать переменные между собой и поддерживать диапазонные выражения. Мы наĸонец-то получили мощную условную логиĸу в CSS, но мало ĸто это заметил. В статье мы возрождаем идею программирования на CSS. На примере паттерна — «выделение диапазона дат в ĸалендаре» — разберём, ĸаĸ обычная JS-логиĸа превращается в CSS-логиĸу (спойлер: очень просто). Читать статью → https://habr.com/ru/articles/1002216/ Попробовать демку → https://htmlacademy.ru/demos/249

CSS Masking уже почти Widely Available, а многие до сих пор её игнорируют. ➿➿➿➿➿➿➿➿➿➿ В новом выпуске «CSS Боли» разбираем CSS-маски для тех, кто с ними не знаком, с помощью интерактивных визуализаций. — Что такое маскирование и как оно работает. — Главная «киллер-фича» масок. — Принцип работы масок. — 4 свойства, которые закрывают 95% задач. — Классный пример маски в реальном интерфейсе. 🎁 Попробуйте в демке самостоятельно и смотрите разбор целиком. Если работаете с UI — это надо знать. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

Накрутчики обрушили доверие к резюме — компании больше не верят ни трудовой, ни GitHub. Как доказать реальный опыт? ➿➿➿➿➿➿➿➿➿➿➿➿ Самый простой способ — дринкапы: бесплатные встречи разработчиков, где формируются связи и рекомендации. Начать можно уже на этой неделе. А ещё три способа посерьёзнее — в видео. Один из них — вечная ачивка, за другой вам ещё и заплатят. В новом выпуске «CSS Боли» — почему кризис доверия останется навсегда и как подготовиться уже сейчас. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

mlut - это необычный, алгоритмический, взгляд на atomic-подход в CSS. Что в корне отличает его от знакомого всем Tailwind. В mlut используются атомарные классы ("утилиты"), каждый из которых делает одно действие. Обычно они применяет одно CSS-свойство (например, цвет текста). В отличие от привычного атомарного CSS, классы в mlut закодированы и выглядят примерно так: D-ib, Bgc-blue_h. Это кодирование кажется сложным, но эта сложность обманчива и играет на руку тем, кто использует фреймворк. Одно из неочевидных следствий использования mlut – это "вечная" привязка клиентов к разработчику для доработок и поддержки. Ведь другие разработчики испугаются синтаксиса, да и нейросети тоже не смогут помочь. А это, если задуматься, ценная во времена глубокого кризиса IT особенность, которую даст не каждый простой инструмент. Недавно разработчики фрейморка запустили проект на ProductRadar, где борются со стартапами за топ-3 продуктов этой недели. Они будут благодарны за поддержку лайком на этой площадке и любой фидбек.

clip-path и CSS-маски не меняют форму блока — они её имитируют. Рамка, тень, outline не знают о вырезах и работают как с обычным прямоугольником. Свойство border-shape работает по-другому. Как border-radius научил рамки скругляться, так border-shape + функция shape() учат их принимать произвольную форму. Рамки повторяют контур, box-shadow и outline тоже. В спецификации CSS Borders Level 4 уже есть черновик, а в Chrome Canary — первые работающие прототипы. Пока ждём поддержку в браузерах, самое время разобраться с функцией shape(). В новом выпуске «CSS Боли» — как мы дошли от border-radius до произвольных форм и почему маски оказались тупиком для рамок и теней. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

DUMP SPB 2026 × HTML Academy Весь внешний вид компонента — в CSS-переменных. JavaScript только переключает состояния. Звучит непривычно, но это рабочий подход. На DUMP SPB 13 февраля Александр Першин выступит с докладом «Реактивный CSS» — про перенос логики отображения из JavaScript в стили. В докладе — сравнение двух реализаций одного компонента: классической на JS и реактивной на CSS. Можно будет оценить разницу в объёме и сложности кода. Промокод PERSHIN — скидка 10% на билет. Конференция · О докладе

Круглый вырез в карточке — пять обёрток, 20 строчек CSS и сломанный фон на стыках блоков. Знакомо? Классический подход заставляет «нарезать» карточку на кусочки: колонка для контента, колонка для выреза, внутри — три блока с flex-grow и radial-gradient. И всё ломается, если карточке задать градиентный фон — состыковать части принципиально невозможно. Одно свойство mask-image с тем же radial-gradient решает задачу без единой обёртки. Карточка остаётся цельной — и корректно тянется, и принимает любой фон. В статье собираем оба варианта пошагово и сравниваем. Демонстрация: https://htmlacademy.ru/demos/235 Читать статью → https://habr.com/ru/articles/993310/

Что нового Baseline Widely Available, часть 1 В прошлом году (+ в январе 2026) довольно много платформенных фич достигли статуса Baseline Widely Available — это значит, что они поддерживаются во всех основных браузерах уже 30 месяцев! А это повод бескомпромиссно тащить их в прод проверить аналитику по пользовательским устройствам и браузерам в вашем проекте (скорее всего ваши пользователи уже обзавелись браузером, которые эти фичи поддерживают). Собрал списком все фичи с кратким описанием и моими комментами к их использованию. CSS Container Queries — применение стилей на основе размеров родительского контейнера, а не viewport. Позволяет создавать адаптивные компоненты, которые реагируют на свой контейнер.

.card {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card { background-color: lightblue; }
}

Мнение: 5 из 5, но требует перестроить майндсет в целом при работе с UI (то есть не только вам как разработчику, но ещё из продукту и дизайнеру, часто думающим "мобилками"). Хорошо ложится на UI-киты и разработку изолированных компонентов. — Individual Transform Properties — отдельные свойства translate, scale, rotate вместо одного transform. Упрощает анимации и улучшает читаемость кода.

.element {
  translate: 20px 10px;
  scale: 0.8;
  rotate: 90deg;
}

Мнение: 3 из 5, приятный сахар, помогает сократить повторящийся код при написании трансформов, легко внедрить. — Motion Path — анимация элементов вдоль заданного пути с помощью offset-path.

.element {
  offset-path: path('M10 10 L 100 100');
  animation: move 2s linear infinite;
}

Мнение: 2 из 5, специфичная, но прикольная фича, но если появится подходящая задача и вовремя вспомнить, можно избежать использования JS для анимации движения элемента по траектории. — Grid Animation — анимация свойств grid-template-columns и grid-template-rows.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.3s;
}
.grid:hover {
  grid-template-columns: 1fr 2fr;
}

Мнение: 2 из 5, в целом прикольная фича для разъезжающихся динамических лейаутов, но применимость нечастая. — animation-composition — выбор способа комбинирования анимаций, влияющих на одно свойство.

.element {
  animation-composition: add; /* replace, add, accumulate */
}

Мнение: 2 из 5, если делаете руками CSS-анимации, может пригодиться, иначе не будет полезно. — color-mix() — смешивание двух цветов в заданном цветовом пространстве. Полезно для создания светлых/тёмных оттенков.

.element {
  background: color-mix(in srgb, red 50%, white 50%);
}

Мнение: 4 из 5, чрезвычайно мощная штука, если настраиваете собственную дизайн-систему, стайлгайд или UI-кит в проекте. — color() — выбор цвета из указанного цветового пространства. Поддерживает wide-gamut пространства вроде display-p3 для более насыщенных цветов.

.element {
  color: color(display-p3 0.5 0.2 0.8);
}

Мнение: 4 из 5, аналогично мнению про color-mix(). — Lab и LCH — цветовые пространства с перцептивной равномерностью. Lab использует прямоугольные координаты, LCH — полярные. Oklab и OkLCh — цветовые пространства, разработанные для лучшего соответствия человеческому восприятию цвета. OkLCh — полярный вариант Oklab.

.element {
  color: lab(50% 20 -30);
  background: lch(60% 50 150);
  color: oklab(0.5 0.2 -0.1);
  background: oklch(0.6 0.5 120);
}

Мнение: 4 из 5, формат oklch может также пригодиться для гибкой настройки цветовой палитры и её производных в проекте. — Small, Large, Dynamic Viewport Units — единицы dvh, svh, lvh для учёта UI мобильных браузеров. sv* — минимальный размер, lv* — максимальный, dv* — динамический.

.element {
  height: 100svh; /* 100% минимального viewport height */
  width: 100dvw;  /* 100% динамического viewport width */
}

Мнение: 4 из 5, если вы когда-нибудь боролись с fullscreen-высотой в вёрстке на мобилках, то в следующий раз присмотритесь к этим значениям. продолжение следует... #Пульс_веб_платформы @web_platform | Поддержать платформу ⭐️

Авторский "тирлист" CSS-фич, которые недавно стали широко доступны, с подробной аргументацией

Вывести значение CSS-переменной прямо на страницу — без JavaScript. Звучит как фантастика, но CSS это умеет: две строчки, работает во всех браузерах. ➿➿➿➿➿➿➿➿➿➿➿➿ Связка counter-reset + counter() + content превращает CSS-переменную в текст на экране. Для целых чисел — элементарно. Для дробных — обход через calc(), чтобы подсказать счётчику тип данных. А если в переменной хранятся градусы или пиксели? Тут помогает tan(atan2()) — трюк, который убирает единицу измерения из значения. В новом выпуске «CSS Боли» — путь от простого счётчика до анимированного кругового прогресс-бара. Попробуйте в демке самостоятельно и смотрите разбор целиком. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

✨ На грядущем PiterJS для вас выступит Александр Першин (20 лет в веб-разработке, сооснователь HTML Academy, много лет исследует современный CSS) с докладом: 📜 Вырезы в блоках. Революция

В современном CSS произошла тихая революция — теперь простые вырезы в блоках можно делать всего одним свойством. В докладе мы сравним старый и новый подходы к созданию блоков с вырезами, а также разберём полную "обвязку" визуальных решений: как делать тени, рамки и аутлайны, повторящие форму вырезов. Это доклад про будущее, которое уже наступило, и про решения, которые упрощают разработку сложных интерфейсных решений на порядок.

🎫 Регистрируйся, пока есть места: https://piterjs.org/#meetup=16t4un_a87dnm ✔️ А если передумал идти — отмени регистрацию там же.

CSS scroll-driven animations позволяют привязать любую анимацию к состоянию прокрутки — без JavaScript, без вычислений offset, без боли. Раньше для анимаций по скроллу приходилось вспоминать, как работают все эти offsetTop, scrollY, getBoundingClientRect. Потом — математика, потом — кроссбраузерность. Теперь достаточно одного CSS-свойства: animation-timeline: scroll(). Попробуйте в демке. В новом выпуске CSS Боли разбираем, как это работает. Функция scroll() с параметрами scroller и axis, тонкости с containing block и позиционированием, почему nearest ведёт себя не так очевидно. Это первая часть серии — знакомство с анонимной временной шкалой прокрутки. В следующих выпусках — ещё больше. Демонстрации: 🔜 Прогрессбар со scroll-анимацией 🔜 Абсолютное позиционирование 🐭 Смотреть на YouTube 🐹 Смотреть в VK

Когда дизайнер присылает макет с «инвертированным углом», начинаются страдания. Псевдоэлементы, абсолютное позиционирование, подгонка радиусов — и всё это разваливается, как только под карточкой появляется градиент или картинка. Александр Першин написал nebo.css — опенсорсную библиотеку для впуклых углов. Название расшифровывается как negative border radius. По духу это как normalize.css: подключаете один CSS-файл, добавляете класс nebo — и угол готов. Работает на любых фонах, настраивается через CSS-переменные. Разбираем, как это устроено: https://habr.com/ru/articles/987944/ GitHub: https://github.com/htmlacademy/nebo.css

В начале 2025-го казалось, что всё кончено: ИИ нас заменит, разработчиков уволят, стартапы будут делать в одиночку люди без опыта, а один джун с агентами закроет работу целой команды. К концу года паника прошла — наступило нейроотрезвление. ➿➿➿➿➿➿➿➿➿➿ В новом выпуске «CSS Боли» спокойно разбираемся, что на самом деле происходит. Почему ИИ стал удобным прикрытием для увольнений, а не их причиной. Сколько денег сожгли на вайб-кодинге. И главное — ставим эксперимент: даём ChatGPT реальную задачу и смотрим, как он с ней справляется. Спойлер: после долгих препирательств нейросеть призналась — «Я соврал концептуально». Ролик для всех, не только для программистов: код будет, но понимать его не нужно — всё и так видно. Если тревожно за будущее профессии, самое время посмотреть и выдохнуть. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

Что стало Widely available в Baseline в декабре 2025 Коротко: • calc() keywords • JavaScript modules in workers • window.print() 😄 Длинно: https://habr.com/ru/articles/979276/

Рамки в форме вырезов — без SVG, картинок и костылей ➿➿➿➿➿➿➿➿➿➿➿➿ Кажется, CSS-маски умеют всё… пока дизайнер не говорит: «А можно, чтобы рамка повторяла форму выреза?» В новом выпуске «CSS Боль» рассказываем, почему привычные border и box-shadow внезапно перестают работать, и как современный CSS позволяет решить задачу аккуратно, надёжно и с отличной поддержкой. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

Статья “Верстаем сложный прогрессбар в 2026 году” Опубликовал на Хабре текстовую версию свежего выпуска CSS Боли про сложный круговой прогрессбар для тех, кому удобнее читать, а не смотреть: https://habr.com/ru/articles/983810/ P.S.: Пошаговая демка со всем кодом и пояснениями находится здесь: https://htmlacademy.ru/demos/251

Запись доклада “Negative border radius — не больно” с FrontendConf 2025 В конце 2025 я рассказал про то, как создавалась и как устроена библиотека nebo.css, которая позволяет делать впуклые углы буквально в пару строчек нативного CSS. Помимо кода в докладе есть несколько баек из старых времён и общие размышления про современный CSS. И теперь Дедушка Мороз привёз вам запись доклада под ёлочку. Пока запись есть только на ютюбе: https://www.youtube.com/watch?v=WmiIvorelhw

Раньше круговые прогрессбары делали на SVG: считали углы, контролировали атрибуты, страдали. До сих пор больно открывать инспектор на старых проектах. Сегодня — один div, одно CSS-свойство. А на выходе прогрессбар, который сам меняет цвет и анимируется без единой строчки JavaScript. Приём работает во всех современных браузерах уже сейчас. Можно забирать в продакшен сегодня. Новый выпуск CSS Боль: 🐭 Смотреть на YouTube 🐹 Смотреть в VK

Игруля про декабрь в айти — такой знакомый и болючий! Смотря на новогодние активности, мы в @outagency и @ligaaagency решили сделать игру про такое знакомое — классический предновогодний кранч и трэш в диджитале. Получилось смешно и терапевтично, ведь каждый горящий диджитальный декабрь только и хочется простого «отвлечься, выдохнуть и потупить». Никаких продаж и контент-планов, просто делимся с вами такими знакомыми декабрьскими ситуациями. В игре можно выбрать роль — дизайнер или разработчик, а затем получить клиента и попытаться завершить его проект до нового года! А ещё внутри прикольные клиенты, открытки, поздравляшки и разные концовки :) [Поиграть в игру]