CSS Боль
Kanalga Telegram’da o‘tish
Канал @htmlacademy про сложные места CSS без магии и суеверий https://tml.io/cssbol. В каждом выпуске разбираем механику движков, показываем живые демо и даём проверяемые решения — чтобы непонятное становилось повторяемым.
Ko'proq ko'rsatishRossiya397 171Toif belgilanmagan
575
Obunachilar
+124 soatlar
Ma'lumot yo'q7 kunlar
+330 kunlar
Ma'lumot yuklanmoqda...
O'xshash kanallar
Ma'lumot yo'q
Muammo bormi? Iltimos, sahifani yangilang yoki bizning qo'llab-quvvatlash boshqaruvchimizga murojaat qiling>.
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Avgust '26
Avgust '26
+13
1 kanalda
Iyul '26
+11
1 kanalda
Get PRO
Iyun '26
+4
0 kanalda
Get PRO
May '26
+11
1 kanalda
Get PRO
Aprel '26
+33
1 kanalda
Get PRO
Mart '26
+51
3 kanalda
Get PRO
Fevral '26
+144
2 kanalda
Get PRO
Yanvar '26
+224
2 kanalda
Get PRO
Dekabr '25
+282
2 kanalda
Get PRO
Noyabr '250
1 kanalda
Get PRO
Oktabr '25
+2
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 26 Avgust | +1 | |||
| 25 Avgust | +1 | |||
| 24 Avgust | 0 | |||
| 23 Avgust | 0 | |||
| 22 Avgust | 0 | |||
| 21 Avgust | 0 | |||
| 20 Avgust | 0 | |||
| 19 Avgust | +1 | |||
| 18 Avgust | 0 | |||
| 17 Avgust | 0 | |||
| 16 Avgust | 0 | |||
| 15 Avgust | +1 | |||
| 14 Avgust | +3 | |||
| 13 Avgust | 0 | |||
| 12 Avgust | +1 | |||
| 11 Avgust | 0 | |||
| 10 Avgust | +1 | |||
| 09 Avgust | 0 | |||
| 08 Avgust | 0 | |||
| 07 Avgust | +1 | |||
| 06 Avgust | 0 | |||
| 05 Avgust | +1 | |||
| 04 Avgust | 0 | |||
| 03 Avgust | 0 | |||
| 02 Avgust | 0 | |||
| 01 Avgust | +2 |
Kanal postlari
Repost from HolyJS — канал конференции
#ТяжелыйПонедельник #видеозаписи
Мы стоим на пороге революции в верстке, связанной с новым подходом — реактивным CSS. В нем привычная логика отображения «переезжает» из JavaScript в стили, и весь внешний вид компонента зависит от CSS-переменных состояния. В докладе, который открываем сегодня, спикер разобрал этот подход на постепенно усложняющихся примерах.
Александр Першин — Реактивный CSS
😉 YouTube | 📺 VK Видео
| 2 | Опубликовали мой доклад про Реактивный CSS на весеннем HolyJS. Особенно прикольным получился третий пример про связку скролла с цсс-логикой. В нём у календаря-индикатора при прокрутке ячейки закрашиваются разными цветами.
Ну а мне как докладчику понравилась атмосфера в зале, хотя было утро второго дня конференции, самое тяжелое утро =) | 158 |
| 3 |  Треугольники на CSS
Недавно вышла статья, в которой автор открыл для себя треугольники на конических градиентах. Идея простая: помещаем центр градиента в угол и используем резкий переход цветов.
Способ гибкий и удобный: не нужен дополнительный элемент, можно сделать сразу несколько треугольников и независимо управлять их параметрами с помощью многослойных фонов.
Cхема решения такая:
conic-gradient(
from 335deg
at bottom right,
transparent 0 25deg,
red 25deg
);
"Наклон" треугольника задаём позицией цвета, помещаем центр градиента в нужный угол контейнера и подбираем подходящий стартовый угол.
Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку. | 1 399 |
| 4 |  Флексы или флоаты
Для опытных разработчиков этот вопрос даже не встаёт. Выбор в пользу флоатов очевиден.
Но для фронтендеров-неофитов последних двух поколений были придуманы флексы. Этакое простое введение в системы раскладок (в общем-то такая же эрзац-система-раскладки, как и гриды). Главная цель флексов — не отпугнуть новичка на пути к вершине мастерства (флоатам). Так что не удивляйтесь их достаточно слабым возможностям.
Свои первые робкие шаги во флексах можно сделать в нашей красивой псевдо-три-дэ игре | 1 727 |
| 5 |  Мифические измерения гридов
"Флексы одномерные, а гриды двумерные" (ага, а трансформации трёхмерные).
Никогда не понимал, что это значит. Признайтесь, у кого так же?
Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 4 колонке 3 ряда". И он будет там жить, даже если в грид-контейнере он один-одинёшенек.
Двумерная адресация — это хорошо. Но настоящая жемчужина (без иронии) гридов — именованные области и адресация по имени: grid-template-areas + grid-area.
Поиграться с именованными областями можно в новом уровне грид-лего | 1 823 |
| 6 |  Лего-гриды
Гриды бесят. Это самый сложный и муторный механизм раскладки, в котором есть дополнительная (по сравнению с флексами) виртуальная сущность — шаблоны.
Флексы намного проще и намного популярнее. Но, к сожалению, владеть нужно и гридам — слишком уж мощная технология.
И если разбираться с гридами неспеша, с помощью красивых кубиков лего, то они почти не бесят.
Играть в новый уровень про гриды | 1 526 |
| 7 |  +1Продолжение мини-игры по CSS-фильтрам
Меняйте код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем вы круче!
Можно играть даже на мобильном.
👉🏻 Играть здесь | 1 454 |
| 8 |  +1Мини-игра по CSS-фильтрам
Нужно менять код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем лучше.
Можно играть даже на мобильном.
Играть здесь | 1 603 |
| 9 |  Реактивный 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 | 1 254 |
| 10 | Прощай, квадратный веб
Chrome радует скоростью релиза новых фич. Совсем недавно, в начале февраля, мы обсуждали новости про экспериментальную фичу — свойство border-shape. А спустя два месяца, 7 апреля 2026, фича уже в релизе в Chrome 147.
Напомню, чем так мил border-shape. Свойство позволяет задавать произвольную форму блока с помощью функции shape(), которая уже используется в clip-path, и с которой многие уже знакомы.
Но главное, что эту форму понимают все остальные декоративные свойства — рамки, тени, аутлайны. Эту форму видит и внутренний контент. Так что выход border-shape можно смело называть революцией.
И ещё один приятный момент. Сама функция shape() находится в интеропе 2026. А значит, что и border-shape во всех браузерах может появиться быстро.
В общем, всех поздравляю с обновкой! А я пошёл думать над интерактивным курсом по border-shape. | 1 709 |
| 11 | Больше знаешь — крепче спишь (девиз ордена Хранителей)
Новая истина для айтишников. Причём именно в такой формулировке.
Бизнес с удовольствием заменил бы всех разработчиков на оркестры агентов, но мешает одно «но» — автобусное число.
Кто-то должен знать, как устроена система, как устроены эти оркестры, и нести за это ответственность. Короче, каждой системе нужен Хранитель, а лучше — несколько. Хранителей не уволят, хранителей будут беречь: они ценны, а выращивать новых очень дорого.
Когда орден Хранителей для каждого продукта будет создан и угроза автобусному числу исчезнет, бизнес начнёт избавляться от рядовых разработчиков, которые занимаются рутиной. Задачи уволенных будут передаваться в оркестры.
Кого же выберут в Хранители? Тех, кто лучше, полнее и глубже знает свой продукт, свою систему, свой оркестр.
Так что больше знаешь — крепче спишь.
Резервный канал в MAX | 1 458 |
| 12 |  Круговой прогресс-бар на CSS — после первого выпуска казалось, что тема закрыта. Два градиента, пара переменных, готово.
А потом пришёл запрос: «Сделай концы шкалы круглыми». Одно «маленькое» требование — и в реализации появилась тригонометрия, формулы позиционирования по окружности, синхронизация четырёх градиентов.
Как из двух градиентов вырос прогресс-бар с CSS-тригонометрией — в новом выпуске.
Попробуйте демонстрацию — покрутите параметры и посмотрите, как всё работает вживую.
🐭 Смотреть на YouTube | 1 401 |
| 13 | Когнитивная пропасть и нейросети
Многие уверены: нейросети облегчили вход в айти. Но в жизни всё ровно наоборот. ИИ не облегчил вход в айти, а серьёзно его усложнил. На пути новичка появилась настоящая когнитивная пропасть.
Без упоминания «поверхностных вайбкодеров» рассказ не выйдет. Это ребята, которые не разбираются в разработке, но умело пользуются нейросетями и даже ваяют какие-то IT-продукты. Казалось бы, отличный пример легчайшего входа в айти через владение ИИ. Но малину портят два но:
1. Низкий (почти отсутствующий) порог входа в вайбкодинг
Если ИИ осваивается за пару недель, то сколько вайбкодеров наплодится за полгода? Сотни тысяч, миллионы? Низкий порог входа всегда приводит к гигантской конкуренции и отрицательной рентабельности в каждой сфере.
Короче, на вайбкодинге очень скоро будет не заработать.
2. Пропасть в эффективности между разработчиками и вайбкодерами
Сильный разработчик, который отлично владеет ИИ, заменяет сотни поверхностных вайбкодеров. Он выдаёт результат быстрее, качественнее, дешевле. А ещё он решает задачи, которые вайбкодеру не поддались, потому что разработчик видит решение задачи до того, как начинает писать промт.
А теперь задайте себе вопрос. Кто нужен серьёзному бизнесу, в котором можно построить профессиональную карьеру? Поверхностные вайбкодеры или сильные разработчики, хорошо владеющие ИИ.
Теперь для входа в айти (и для последующего роста) критически важны:
– глубокие технические навыки (шире и глубже, чем требовались раньше);
– навыки проектирования систем, декомпозиции и постановки задач (которые вообще-то у разработчиков развиваются годами по мере набора опыта);
– умение работать с нейросетями.
Требования для входа в айти из-за ИИ не упали, а выросли в разы.
Это и есть когнитивная пропасть.
Для подготовки кадров это означает, что надо давать глубокую базу и после неё обучать владению ИИ. Мы в Академии уже перестроили под это свои программы. Посмотрите, как это устроено, на примере «Нейрофронтендера».
📲 Резервный канал в MAX | 1 549 |
| 14 | От резюме к доказательному найму
Рынок найма сломан двумя кризисами: экономическим и кризисом доверия. Они наложились друг на друга и бьют даже по сильным специалистам.
Новый дефолт рынка — нулевое доверие к кандидатам. И это надолго.
Резко выросла ценность цифрового профессионального следа — пруфов, которые подтверждают опыт и уровень навыков. Рынок движется к доказательному найму.
У большинства разработчиков таких доказательств нет. А нарабатывать их долго и дорого.
Поэтому появляются форматы, которые дают достоверное подтверждение уровня, сопоставимое по силе с докладом на технической конференции.
Один из таких форматов — чемпионат по вёрстке для мидлов от @htmlacademy. Он изначально строился как доказательный формат и включает:
– сложное задание с высоким потолком скила;
– двухнедельный формат, в котором можно показать свой максимум;
– ручную проверку работ;
– сильных проверяющих — синьоров из бигтеха и крупных продуктовых компаний;
– публикацию результатов в публичном рейтинге качества фронтенд-разработки.
Старт — 30 марта. Если у вас есть коммерческий опыт в разработке, это способ получить публичный пруф своего уровня.
Записаться на чемпионат | 3 846 |
| 15 |  Накрутчики опыта в IT, у вас проблемы. HeadHunter зарелизил систему, после которой фейковые резюме исчезнут из выдачи. Совсем.
Рекрутеры получили инструменты, чтобы отделить реальный опыт от накрученного прямо в списке с откликами. Врал годами? Станешь невидимкой. Честные наконец попадут в поле зрения.
А ещё рекрутёрам дали лёгкий способ банить накрутчиков навсегда. HR-сообщество вычистит платформу за считаные месяцы. Эйчары ждали этого годами.
Как это работает, кто пострадает первым и почему не все платформы могут себе это позволить. Разбираем в новом выпуске CSS Боли.
🐭 Смотреть на YouTube
🐹 Смотреть в VK | 2 319 |
| 16 | Цифровой профессиональный след
Яркая новинка HR-сезона 2026 — понятие цифрового профессионального следа. Я начал встречать его упоминания в феврале в HR-каналах и в вакансиях. В чём суть явления?
Эйчары не доверяют опыту, описанному в резюме, или записям в трудовой книжке. Но им надо разбирать отклики от кандидатов, надо на что-то полагаться. Поэтому им нужна хоть какая-то опора.
Цифровой профессиональный след и есть эта опора. По сути, это набор внешних, объективных, достоверных подтверждений (пруфов) либо опыта, либо уровня скилов кандидата. Важно, чтобы кандидат не мог повлиять на этот пруф.
Идеальный пример ЦПС — это доклад на конференции. Описание доклада висит на сайте конференции, и кандидат не может его изменить. По докладу можно понять уровень докладчика, сколько у него лет опыта, где он работал.
Вроде бы идея с цифровым следом здравая. Но есть проблема — хороших источников цифрового следа мало. Что ещё можно исползовать как цифровой след? Накидайте вариантов.
И ещё одна проблема. Теперь каждому разработчику с самого начала карьеры надо вести дневничок и собирать портфолио наград и грамот, как в школе? Вы готовы к этому, дети? Да, капитан! | 3 023 |
| 17 |  Мы сделали пошаговую демку к новому выпуску — попробуйте сами собрать 3D-эффект летающих мышек на CSS-масках. Каждый шаг из ролика можно пройти в браузере и посмотреть код.
В выпуске — анимация mask-position и mask-size, множественные маски в противофазе, mask-composite для пересечений. Нейросеть генерирует @keyframes за минуту — и это честный пример того, как ИИ ускоряет разработчика. Но ускоряет именно разработчика, а не заменяет его.
Во второй части — почему нейросети не облегчили вход в разработку, а наоборот создали пропасть на пути в IT.
🎁 Демонстрация: анимация CSS-маски
🐭 Смотреть на YouTube
🐹 Смотреть в VK | 1 918 |
| 18 |  Статья «Восхитительный 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 | 2 575 |
| 19 |  CSS Masking уже почти Widely Available, а многие до сих пор её игнорируют.
➿➿➿➿➿➿➿➿➿➿
В новом выпуске «CSS Боли» разбираем CSS-маски для тех, кто с ними не знаком, с помощью интерактивных визуализаций.
— Что такое маскирование и как оно работает.
— Главная «киллер-фича» масок.
— Принцип работы масок.
— 4 свойства, которые закрывают 95% задач.
— Классный пример маски в реальном интерфейсе.
🎁 Попробуйте в демке самостоятельно и смотрите разбор целиком. Если работаете с UI — это надо знать.
🐭 Смотреть на YouTube
🐹 Смотреть в VK | 1 806 |
| 20 |  Накрутчики обрушили доверие к резюме — компании больше не верят ни трудовой, ни GitHub. Как доказать реальный опыт?
➿➿➿➿➿➿➿➿➿➿➿➿
Самый простой способ — дринкапы: бесплатные встречи разработчиков, где формируются связи и рекомендации. Начать можно уже на этой неделе. А ещё три способа посерьёзнее — в видео. Один из них — вечная ачивка, за другой вам ещё и заплатят.
В новом выпуске «CSS Боли» — почему кризис доверия останется навсегда и как подготовиться уже сейчас.
🐭 Смотреть на YouTube
🐹 Смотреть в VK | 2 137 |
