CSS Боль

Мифические измерения гридов

"Флексы одномерные, а гриды двумерные" (ага, а трансформации трёхмерные).

Никогда не понимал, что это значит. Признайтесь, у кого так же? Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 4 колонке 3 ряда". И он будет там жить, даже если в грид-контейнере он один-одинёшенек. Двумерная адресация — это хорошо. Но настоящая жемчужина (без иронии) гридов — именованные области и адресация по имени: grid-template-areas + grid-area. Поиграться с именованными областями можно в новом уровне грид-лего

Лего-гриды Гриды бесят. Это самый сложный и муторный механизм раскладки, в котором есть дополнительная (по сравнению с флексами) виртуальная сущность — шаблоны. Флексы намного проще и намного популярнее. Но, к сожалению, владеть нужно и гридам — слишком уж мощная технология. И если разбираться с гридами неспеша, с помощью красивых кубиков лего, то они почти не бесят. Играть в новый уровень про гриды

Продолжение мини-игры по CSS-фильтрам Меняйте код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем вы круче! Можно играть даже на мобильном. 👉🏻 Играть здесь

Мини-игра по CSS-фильтрам Нужно менять код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем лучше. Можно играть даже на мобильном. Играть здесь

Реактивный CSS всё ближе Свершилось! В 151 Firefox завезли стилевые контейнерные запросы. Это значит, что сложная клиентская логика на CSS теперь доступна во всех основных браузерах. И доклады про реактивный CSS становятся всё более актуальными Есть и ещё одна хорошая новость. За флагом добавили range синтаксис для сравнений:

@container style() range syntax queries: layout.css.attr.enabled

То есть Firefox в вопросах клиентской логики семимильными шагами догоняет Chrome. Для полной картины осталось добавить только if(). Детали релиза: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151

Прощай, квадратный веб Chrome радует скоростью релиза новых фич. Совсем недавно, в начале февраля, мы обсуждали новости про экспериментальную фичу — свойство border-shape. А спустя два месяца, 7 апреля 2026, фича уже в релизе в Chrome 147. Напомню, чем так мил border-shape. Свойство позволяет задавать произвольную форму блока с помощью функции shape(), которая уже используется в clip-path, и с которой многие уже знакомы. Но главное, что эту форму понимают все остальные декоративные свойства — рамки, тени, аутлайны. Эту форму видит и внутренний контент. Так что выход border-shape можно смело называть революцией. И ещё один приятный момент. Сама функция shape() находится в интеропе 2026. А значит, что и border-shape во всех браузерах может появиться быстро. В общем, всех поздравляю с обновкой! А я пошёл думать над интерактивным курсом по border-shape.

Больше знаешь — крепче спишь (девиз ордена Хранителей) Новая истина для айтишников. Причём именно в такой формулировке. Бизнес с удовольствием заменил бы всех разработчиков на оркестры агентов, но мешает одно «но» — автобусное число. Кто-то должен знать, как устроена система, как устроены эти оркестры, и нести за это ответственность. Короче, каждой системе нужен Хранитель, а лучше — несколько. Хранителей не уволят, хранителей будут беречь: они ценны, а выращивать новых очень дорого. Когда орден Хранителей для каждого продукта будет создан и угроза автобусному числу исчезнет, бизнес начнёт избавляться от рядовых разработчиков, которые занимаются рутиной. Задачи уволенных будут передаваться в оркестры. Кого же выберут в Хранители? Тех, кто лучше, полнее и глубже знает свой продукт, свою систему, свой оркестр. Так что больше знаешь — крепче спишь. Резервный канал в MAX

Круговой прогресс-бар на CSS — после первого выпуска казалось, что тема закрыта. Два градиента, пара переменных, готово. А потом пришёл запрос: «Сделай концы шкалы круглыми». Одно «маленькое» требование — и в реализации появилась тригонометрия, формулы позиционирования по окружности, синхронизация четырёх градиентов. Как из двух градиентов вырос прогресс-бар с CSS-тригонометрией — в новом выпуске. Попробуйте демонстрацию — покрутите параметры и посмотрите, как всё работает вживую. 🐭 Смотреть на YouTube

Когнитивная пропасть и нейросети Многие уверены: нейросети облегчили вход в айти. Но в жизни всё ровно наоборот. ИИ не облегчил вход в айти, а серьёзно его усложнил. На пути новичка появилась настоящая когнитивная пропасть. Без упоминания «поверхностных вайбкодеров» рассказ не выйдет. Это ребята, которые не разбираются в разработке, но умело пользуются нейросетями и даже ваяют какие-то IT-продукты. Казалось бы, отличный пример легчайшего входа в айти через владение ИИ. Но малину портят два но: 1. Низкий (почти отсутствующий) порог входа в вайбкодинг Если ИИ осваивается за пару недель, то сколько вайбкодеров наплодится за полгода? Сотни тысяч, миллионы? Низкий порог входа всегда приводит к гигантской конкуренции и отрицательной рентабельности в каждой сфере. Короче, на вайбкодинге очень скоро будет не заработать. 2. Пропасть в эффективности между разработчиками и вайбкодерами Сильный разработчик, который отлично владеет ИИ, заменяет сотни поверхностных вайбкодеров. Он выдаёт результат быстрее, качественнее, дешевле. А ещё он решает задачи, которые вайбкодеру не поддались, потому что разработчик видит решение задачи до того, как начинает писать промт. А теперь задайте себе вопрос. Кто нужен серьёзному бизнесу, в котором можно построить профессиональную карьеру? Поверхностные вайбкодеры или сильные разработчики, хорошо владеющие ИИ. Теперь для входа в айти (и для последующего роста) критически важны: – глубокие технические навыки (шире и глубже, чем требовались раньше); – навыки проектирования систем, декомпозиции и постановки задач (которые вообще-то у разработчиков развиваются годами по мере набора опыта); – умение работать с нейросетями. Требования для входа в айти из-за ИИ не упали, а выросли в разы. Это и есть когнитивная пропасть. Для подготовки кадров это означает, что надо давать глубокую базу и после неё обучать владению ИИ. Мы в Академии уже перестроили под это свои программы. Посмотрите, как это устроено, на примере «Нейрофронтендера». 📲 Резервный канал в MAX

От резюме к доказательному найму Рынок найма сломан двумя кризисами: экономическим и кризисом доверия. Они наложились друг на друга и бьют даже по сильным специалистам. Новый дефолт рынка — нулевое доверие к кандидатам. И это надолго. Резко выросла ценность цифрового профессионального следа — пруфов, которые подтверждают опыт и уровень навыков. Рынок движется к доказательному найму. У большинства разработчиков таких доказательств нет. А нарабатывать их долго и дорого. Поэтому появляются форматы, которые дают достоверное подтверждение уровня, сопоставимое по силе с докладом на технической конференции. Один из таких форматов — чемпионат по вёрстке для мидлов от @htmlacademy. Он изначально строился как доказательный формат и включает: – сложное задание с высоким потолком скила; – двухнедельный формат, в котором можно показать свой максимум; – ручную проверку работ; – сильных проверяющих — синьоров из бигтеха и крупных продуктовых компаний; – публикацию результатов в публичном рейтинге качества фронтенд-разработки. Старт — 30 марта. Если у вас есть коммерческий опыт в разработке, это способ получить публичный пруф своего уровня. Записаться на чемпионат

Накрутчики опыта в IT, у вас проблемы. HeadHunter зарелизил систему, после которой фейковые резюме исчезнут из выдачи. Совсем. Рекрутеры получили инструменты, чтобы отделить реальный опыт от накрученного прямо в списке с откликами. Врал годами? Станешь невидимкой. Честные наконец попадут в поле зрения. А ещё рекрутёрам дали лёгкий способ банить накрутчиков навсегда. HR-сообщество вычистит платформу за считаные месяцы. Эйчары ждали этого годами. Как это работает, кто пострадает первым и почему не все платформы могут себе это позволить. Разбираем в новом выпуске CSS Боли. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

Цифровой профессиональный след Яркая новинка HR-сезона 2026 — понятие цифрового профессионального следа. Я начал встречать его упоминания в феврале в HR-каналах и в вакансиях. В чём суть явления? Эйчары не доверяют опыту, описанному в резюме, или записям в трудовой книжке. Но им надо разбирать отклики от кандидатов, надо на что-то полагаться. Поэтому им нужна хоть какая-то опора. Цифровой профессиональный след и есть эта опора. По сути, это набор внешних, объективных, достоверных подтверждений (пруфов) либо опыта, либо уровня скилов кандидата. Важно, чтобы кандидат не мог повлиять на этот пруф. Идеальный пример ЦПС — это доклад на конференции. Описание доклада висит на сайте конференции, и кандидат не может его изменить. По докладу можно понять уровень докладчика, сколько у него лет опыта, где он работал. Вроде бы идея с цифровым следом здравая. Но есть проблема — хороших источников цифрового следа мало. Что ещё можно исползовать как цифровой след? Накидайте вариантов. И ещё одна проблема. Теперь каждому разработчику с самого начала карьеры надо вести дневничок и собирать портфолио наград и грамот, как в школе? Вы готовы к этому, дети? Да, капитан!

Мы сделали пошаговую демку к новому выпуску — попробуйте сами собрать 3D-эффект летающих мышек на CSS-масках. Каждый шаг из ролика можно пройти в браузере и посмотреть код. В выпуске — анимация mask-position и mask-size, множественные маски в противофазе, mask-composite для пересечений. Нейросеть генерирует @keyframes за минуту — и это честный пример того, как ИИ ускоряет разработчика. Но ускоряет именно разработчика, а не заменяет его. Во второй части — почему нейросети не облегчили вход в разработку, а наоборот создали пропасть на пути в IT. 🎁 Демонстрация: анимация CSS-маски 🐭 Смотреть на YouTube 🐹 Смотреть в VK

Статья «Восхитительный 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/