CSS Боль

Что нового 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 решили сделать игру про такое знакомое — классический предновогодний кранч и трэш в диджитале. Получилось смешно и терапевтично, ведь каждый горящий диджитальный декабрь только и хочется простого «отвлечься, выдохнуть и потупить». Никаких продаж и контент-планов, просто делимся с вами такими знакомыми декабрьскими ситуациями. В игре можно выбрать роль — дизайнер или разработчик, а затем получить клиента и попытаться завершить его проект до нового года! А ещё внутри прикольные клиенты, открытки, поздравляшки и разные концовки :) [Поиграть в игру]

Как упростить React в 2 раза с помощью программирования на CSS ➿➿➿➿➿➿➿➿➿➿➿ В новом выпуске «CSS Боль» показываем, как современный CSS убивает React. На реальном примере слайдера разбираемся, почему компонент разрастается до сотни строк — и как сделать его вдвое проще, ничего не потеряв. Внутри — живой пример, где два компонента выглядят одинаково, но один написан «по привычке», а второй — с использованием возможностей современного CSS. После этого выпуска React перестаёт быть калькулятором для стилей, а CSS — «просто оформлением». В выпуске: ✓ Классическая реализация слайдера на React: состояние, вычисления и условия ✓ Как перенести расчёты положения и состояний элементов в CSS ✓ Использование CSS-переменных и calc() вместо JavaScript ✓ Что такое «реактивный CSS» и как он работает вместе с React ✓ Когда можно начать использовать этот подход 🐭 Смотреть на YouTube 🐹 Смотреть в VK

CSS 2025: Baseline Widely Available Завтра в 20:00 (17 декабря) проведём стрим и соберём CSS-тирлист: что в S-тир, а что пока «ну, прикольно». Container queries. oklch(). Тригонометрия в calc(). Анимация гридов. Range syntax в медиазапросах. И ещё куча возможностей, которые стали доступны в 2025 году. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

Уже сегодня, приходите в 20:00!

CSS 2025: Baseline Widely Available Завтра в 20:00 проведём стрим и соберём CSS-тирлист: что в S-тир, а что пока «ну, прикольно». Container queries. oklch(). Тригонометрия в calc(). Анимация гридов. Range syntax в медиазапросах. И ещё куча возможностей, которые стали доступны в 2025 году. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

CSS-анимации можно описывать не только через десятки @keyframes. В CSS есть функция, которая позволяет задать всю форму движения одной строкой — с ускорениями, паузами, рывками и перелётами. В свежем выпуске «CSS Боль» разбираем функцию linear() в animation-timing-function и показываем, как с её помощью управлять прогрессом анимации точнее, чем привычными ease и cubic-bezier(). ➿➿➿➿➿➿➿➿➿➿➿➿ В выпуске: ✓ Как работает linear() и почему это не просто «линейная» анимация ✓ Что такое точки прогресса и как они выходят за диапазон 0–1 ✓ Как делать паузы, отскоки и overshoot без сложных @keyframes ✓ Почему отрицательные значения — это часть спецификации, а не баг ✓ Как одной тайминг-функцией синхронизировать несколько анимаций ✓ Разбор спецификации CSS Easing Functions Level 2 и практические примеры Меньше кода, больше контроля над движением — и анимации, которые наконец перестают быть болью. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

Сфера IT за 10 лет изменилась до неузнаваемости. В 2016 достаточно было пройти базовый курс по вёрстке — и через месяц ты уже работал, получая зарплату выше средней по стране. В 2026 всё наоборот: требования выросли, зарплаты стоят на месте, а путь джуна легко растягивается до года. В свежем выпуске «CSS Боль» сравниваем рынок 2016 и 2026 и разбираемся, почему вход в профессию стал в разы сложнее — и что это означает для тех, кто только собирается учиться. ➿➿➿➿➿➿➿➿➿➿ В выпуске: ✓ Как работал вход в IT в 2016-м и почему он был таким быстрым ✓ Почему стартовые 40–60 тысяч в 2026-м — уже не «прыжок вверх», а просадка по доходу ✓ Насколько выросли требования к джуну: вёрстка, чистый JS, SPA, фреймворк и работа с ИИ ✓ Почему процесс выхода на первое собеседование теперь занимает 6–12 месяцев ✓ Что показывают данные Росстата и статистика HTML Academy о реальном состоянии рынка ✓ И к чему приведёт эта тенденция: прогноз кадрового кризиса в ближайшие 2–3 года ✓ Кому будет легко входить в IT в 2026 Если вы планируете вход в IT — этот выпуск поможет понять текущие реалии без иллюзий и хайпа. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

CSS теперь умеет сравнивать значения прямо в стилях: запись вроде 10 <= --x <= 12 — это рабочий код, а не псевдоязык. ➿➿➿➿➿➿➿➿➿➿ В свежем выпуске «CSS Боль» разбираем range syntax в стилевых запросах и смотрим, как с его помощью подсветить диапазон дат в календаре на чистом CSS. По пути становится понятно, почему :nth-child(of S) в этой задаче быстро упирается в свои ограничения, а реактивный CSS с переменными и range syntax даёт более прямое и прозрачное решение. В выпуске: ✓ Как работает range syntax и откуда берётся запись 10 <= --x <= 12 в стилях ✓ Почему :nth-child(of S) не подходит для подсветки диапазона дат в календаре ✓ Как связать custom properties, CSS-математику и условия в стилевых запросах ✓ Пример полностью рабочей подсветки диапазона на чистом CSS, без JavaScript 🐭 Смотреть на YouTube 🐹 Смотреть в VK