CSS Боль
رفتن به کانال در Telegram
Канал @htmlacademy про сложные места CSS без магии и суеверий https://tml.io/cssbol. В каждом выпуске разбираем механику движков, показываем живые демо и даём проверяемые решения — чтобы непонятное становилось повторяемым.
نمایش بیشترروسيا384 520دسته بندی مشخص نشده است
576
مشترکین
-224 ساعت
+37 روز
+230 روز
در حال بارگیری داده...
کانال‌های مشابه
هیچ داده‌ای
مشکلی وجود دارد؟ لطفاً صفحه را تازه کنید یا با مدیر پشتیبانی ما تماس بگیرید.
ابر برچسب‌ها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اکتبر '26اکتبر '26
اکتبر '26
+5
در 1 کانال‌ها
سپتامبر '26
+8
در 1 کانال‌ها
Get PRO
اوت '26
+16
در 1 کانال‌ها
Get PRO
ژوئیه '26
+11
در 1 کانال‌ها
Get PRO
ژوئن '26
+4
در 0 کانال‌ها
Get PRO
مه '26
+11
در 1 کانال‌ها
Get PRO
آوریل '26
+33
در 1 کانال‌ها
Get PRO
مارس '26
+51
در 3 کانال‌ها
Get PRO
فوریه '26
+144
در 2 کانال‌ها
Get PRO
ژانویه '26
+224
در 2 کانال‌ها
Get PRO
دسامبر '25
+282
در 2 کانال‌ها
Get PRO
نوامبر '250
در 1 کانال‌ها
Get PRO
اکتبر '25
+2
در 0 کانال‌ها
| تاریخ | رشد مشترکین | اشارات | کانال‌ها | |
| 07 اکتبر | 0 | |||
| 06 اکتبر | 0 | |||
| 05 اکتبر | +1 | |||
| 04 اکتبر | +2 | |||
| 03 اکتبر | 0 | |||
| 02 اکتبر | +2 | |||
| 01 اکتبر | 0 |
پست‌های کانال
ИИ становится пугающе сообразительным
Я не замечаю, что новые модели становятся всё умнее и приближаются к естественному интеллекту. Но вижу как они становятся сообразительнее, я бы сказал шаристее. И это иногда впечатляет.
Недавно дал астре абсолютно нетипичную для себя задачку. "А сможешь сделать вертикальный ролик?". Мол, сходи поиграй в мини-игру про гриды и сделай ролик. Тот ответил, что вообщше без проблем. И через 7 мин у меня был ролик, который вы видите.
То есть он сам сходил по адресу, поиграл, разобрался как работает игра, посмотрел задачки, выбрал самые интересные с его точки зрения, наскриншотил, сложил в папочку.
Потом написал сам себе сценарий и скриптик, по которому собрал ролик. Да, это не покадровая ИИ-генерация, это алгоритмическая генерация. Но сделанная полностью автономно.
В общем новые модельки меньше тупят и лучше соображают. И это прикольно
→ опубликовано через smmtp://
| 2 |  Какую же красоту можно делать с Anchor Positioning
Это просто промежуточный этап работы | 287 |
| 3 |  anchor() – царица якорей
Функция anchor() живёт внутри большинства сложных демок и крутых приёмов, связанных с якорным позиционированием.
Простейший вид якорей:
1. anchor-name у якоря;
2. position-anchor + position-area у привязанного элемента.
Продвиутый вид:
1. anchor-name у якоря;
2. inset-свойства со значениями, содержащими anchor(), у привязанного элемента.
Например:
.anchor {
anchor-name: --a1;
}
.target {
position: absolute;
left: anchor(--a1 right);
}
То есть элемент можно привязать любой стороной к любому якорю (да-да, элемент можно привязать сразу к нескольким разным якорям). А ещё можно использовать выражения с anchor(). Всё это даёт невероятную гибкость в выборе точек привязки и в позиционировании элементов.
Поисследуйте anchor() самостоятельно в мини-игре. Цель — пройти уровень идеально. После этого, как говорил братишка Иллидан, вы будете готовы к сложным приёмам якорного позиционирования. | 922 |
| 4 |  Скругления в неожиданных местах
Скругления хороши в углах блоков, а в других местах они превращаются в жуткий головняк.
Проблему скруглений решает CSS-функция shape(), причём сразу несколькими способами. Самый грубый — команда arc.
Теперь с arc можно поиграться в новой мини-игре. Цель, как обычно, пройти уровень идеально (можно не с первого раза). В процесее оцените, насколько сложно вырезать стрелочку со скриншота.
P.S.: если в первый раз видите shape(), то начните игру с первого уровня | 1 381 |
| 5 |  CSS shape() — фича больших надежд
CSS начал вырастать из коротких штанишек квадратного веба. Швы конкретно затрещали, когда хром зарелизил свойство border-shape, ядро которого — CSS-функция shape().
shape() была не особо популярной, про неё вспоминали, когда нужно было что-то обрезать. Но и тут можно было повыбирать: маски или clip-path, а можно ли использовать какой-нибудь генератор?
Но давайте посмотрим на текущий потенциал фичи:
— сложные формы контейнеров (с нормальной отрисовкой рамок),
— траектории движения для анимаций,
— просто обрезки,
— комбинирование с другими фичами (например с anchor-positioning).
Короче, с фичей пора знакомиться, можно начать с мини-игры по CSS shape(). Цель — пройти уровень идеально.
P.S.: куда поместить навык работы с shape() в системе грейдов?
Я думаю, что на текущем этапе даже базовое владение shape() — это удел синьоров, потому что синьор — это про кругозор и перспективные фичи, а мидл — это про использование надёжного и предсказуемого. А как думаете вы? | 1 742 |
| 6 |  CSS Anchor Positioning
Бывают такие фичи, до которых долго доходят руки. Но чуть познакомишься — понимаешь, что фича — бомба. Якорное позиционирование — бомба, прям петарда чёрный корсар из детства.
Заякорённые элементы это как бы абсолютно позиционированные, но с суперспособностями.
Например, их можно привязывать не только к элементу в цепочке родителей, но к элементам вне родителя. И ещё куча других фич.
Короче, не затягивайте с тем, чтобы поиграться с Anchor Positioning, тем более мы сделали красивую мини игру про эту фичу (первую из множества). | 1 768 |
| 7 |  Случайные испытания для демонстрации мастерства
Запустили сложный игровой режим Восхождение, в котором можно показать свой скил.
Суть режима:
1. Пройти уровень из 10 случайных испытаний выбранной сложности
2. Использовать во время прохождения минимум лишних ходов
3. По результатам определяется ступень мастерства
Есть 3 уровня сложности, по 3 попытки на каждый.
И если на простом уровне всё проходится левой пяткой, то на сложном реально приходится попотеть. На внутренних тестах лучший результат — 8 ступень из 9.
Теперь вам есть чем поразвлекаться в пятницу =)
P.S.: а анимация то какая прикольная получилась у портала.
https://htmlacademy.ru/skill-trials/conic-ascension | 528 |
| 8 | #ТяжелыйПонедельник #видеозаписи
Мы стоим на пороге революции в верстке, связанной с новым подходом — реактивным CSS. В нем привычная логика отображения «переезжает» из JavaScript в стили, и весь внешний вид компонента зависит от CSS-переменных состояния. В докладе, который открываем сегодня, спикер разобрал этот подход на постепенно усложняющихся примерах.
Александр Першин — Реактивный CSS
😉 YouTube | 📺 VK Видео | 552 |
| 9 | Опубликовали мой доклад про Реактивный CSS на весеннем HolyJS. Особенно прикольным получился третий пример про связку скролла с цсс-логикой. В нём у календаря-индикатора при прокрутке ячейки закрашиваются разными цветами.
Ну а мне как докладчику понравилась атмосфера в зале, хотя было утро второго дня конференции, самое тяжелое утро =) | 441 |
| 10 |  Треугольники на CSS
Недавно вышла статья, в которой автор открыл для себя треугольники на конических градиентах. Идея простая: помещаем центр градиента в угол и используем резкий переход цветов.
Способ гибкий и удобный: не нужен дополнительный элемент, можно сделать сразу несколько треугольников и независимо управлять их параметрами с помощью многослойных фонов.
Cхема решения такая:
conic-gradient(
from 335deg
at bottom right,
transparent 0 25deg,
red 25deg
);
"Наклон" треугольника задаём позицией цвета, помещаем центр градиента в нужный угол контейнера и подбираем подходящий стартовый угол.
Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку. | 2 357 |
| 11 |  Флексы или флоаты
Для опытных разработчиков этот вопрос даже не встаёт. Выбор в пользу флоатов очевиден.
Но для фронтендеров-неофитов последних двух поколений были придуманы флексы. Этакое простое введение в системы раскладок (в общем-то такая же эрзац-система-раскладки, как и гриды). Главная цель флексов — не отпугнуть новичка на пути к вершине мастерства (флоатам). Так что не удивляйтесь их достаточно слабым возможностям.
Свои первые робкие шаги во флексах можно сделать в нашей красивой псевдо-три-дэ игре | 1 798 |
| 12 |  Мифические измерения гридов
"Флексы одномерные, а гриды двумерные" (ага, а трансформации трёхмерные).
Никогда не понимал, что это значит. Признайтесь, у кого так же?
Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 4 колонке 3 ряда". И он будет там жить, даже если в грид-контейнере он один-одинёшенек.
Двумерная адресация — это хорошо. Но настоящая жемчужина (без иронии) гридов — именованные области и адресация по имени: grid-template-areas + grid-area.
Поиграться с именованными областями можно в новом уровне грид-лего | 1 823 |
| 13 |  Лего-гриды
Гриды бесят. Это самый сложный и муторный механизм раскладки, в котором есть дополнительная (по сравнению с флексами) виртуальная сущность — шаблоны.
Флексы намного проще и намного популярнее. Но, к сожалению, владеть нужно и гридам — слишком уж мощная технология.
И если разбираться с гридами неспеша, с помощью красивых кубиков лего, то они почти не бесят.
Играть в новый уровень про гриды | 1 526 |
| 14 |  +1Продолжение мини-игры по CSS-фильтрам
Меняйте код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем вы круче!
Можно играть даже на мобильном.
👉🏻 Играть здесь | 1 454 |
| 15 |  +1Мини-игра по CSS-фильтрам
Нужно менять код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем лучше.
Можно играть даже на мобильном.
Играть здесь | 1 603 |
| 16 |  Реактивный 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 |
| 17 | Прощай, квадратный веб
Chrome радует скоростью релиза новых фич. Совсем недавно, в начале февраля, мы обсуждали новости про экспериментальную фичу — свойство border-shape. А спустя два месяца, 7 апреля 2026, фича уже в релизе в Chrome 147.
Напомню, чем так мил border-shape. Свойство позволяет задавать произвольную форму блока с помощью функции shape(), которая уже используется в clip-path, и с которой многие уже знакомы.
Но главное, что эту форму понимают все остальные декоративные свойства — рамки, тени, аутлайны. Эту форму видит и внутренний контент. Так что выход border-shape можно смело называть революцией.
И ещё один приятный момент. Сама функция shape() находится в интеропе 2026. А значит, что и border-shape во всех браузерах может появиться быстро.
В общем, всех поздравляю с обновкой! А я пошёл думать над интерактивным курсом по border-shape. | 1 709 |
| 18 | Больше знаешь — крепче спишь (девиз ордена Хранителей)
Новая истина для айтишников. Причём именно в такой формулировке.
Бизнес с удовольствием заменил бы всех разработчиков на оркестры агентов, но мешает одно «но» — автобусное число.
Кто-то должен знать, как устроена система, как устроены эти оркестры, и нести за это ответственность. Короче, каждой системе нужен Хранитель, а лучше — несколько. Хранителей не уволят, хранителей будут беречь: они ценны, а выращивать новых очень дорого.
Когда орден Хранителей для каждого продукта будет создан и угроза автобусному числу исчезнет, бизнес начнёт избавляться от рядовых разработчиков, которые занимаются рутиной. Задачи уволенных будут передаваться в оркестры.
Кого же выберут в Хранители? Тех, кто лучше, полнее и глубже знает свой продукт, свою систему, свой оркестр.
Так что больше знаешь — крепче спишь.
Резервный канал в MAX | 1 458 |
| 19 |  Круговой прогресс-бар на CSS — после первого выпуска казалось, что тема закрыта. Два градиента, пара переменных, готово.
А потом пришёл запрос: «Сделай концы шкалы круглыми». Одно «маленькое» требование — и в реализации появилась тригонометрия, формулы позиционирования по окружности, синхронизация четырёх градиентов.
Как из двух градиентов вырос прогресс-бар с CSS-тригонометрией — в новом выпуске.
Попробуйте демонстрацию — покрутите параметры и посмотрите, как всё работает вживую.
🐭 Смотреть на YouTube | 1 401 |
| 20 | Когнитивная пропасть и нейросети
Многие уверены: нейросети облегчили вход в айти. Но в жизни всё ровно наоборот. ИИ не облегчил вход в айти, а серьёзно его усложнил. На пути новичка появилась настоящая когнитивная пропасть.
Без упоминания «поверхностных вайбкодеров» рассказ не выйдет. Это ребята, которые не разбираются в разработке, но умело пользуются нейросетями и даже ваяют какие-то IT-продукты. Казалось бы, отличный пример легчайшего входа в айти через владение ИИ. Но малину портят два но:
1. Низкий (почти отсутствующий) порог входа в вайбкодинг
Если ИИ осваивается за пару недель, то сколько вайбкодеров наплодится за полгода? Сотни тысяч, миллионы? Низкий порог входа всегда приводит к гигантской конкуренции и отрицательной рентабельности в каждой сфере.
Короче, на вайбкодинге очень скоро будет не заработать.
2. Пропасть в эффективности между разработчиками и вайбкодерами
Сильный разработчик, который отлично владеет ИИ, заменяет сотни поверхностных вайбкодеров. Он выдаёт результат быстрее, качественнее, дешевле. А ещё он решает задачи, которые вайбкодеру не поддались, потому что разработчик видит решение задачи до того, как начинает писать промт.
А теперь задайте себе вопрос. Кто нужен серьёзному бизнесу, в котором можно построить профессиональную карьеру? Поверхностные вайбкодеры или сильные разработчики, хорошо владеющие ИИ.
Теперь для входа в айти (и для последующего роста) критически важны:
– глубокие технические навыки (шире и глубже, чем требовались раньше);
– навыки проектирования систем, декомпозиции и постановки задач (которые вообще-то у разработчиков развиваются годами по мере набора опыта);
– умение работать с нейросетями.
Требования для входа в айти из-за ИИ не упали, а выросли в разы.
Это и есть когнитивная пропасть.
Для подготовки кадров это означает, что надо давать глубокую базу и после неё обучать владению ИИ. Мы в Академии уже перестроили под это свои программы. Посмотрите, как это устроено, на примере «Нейрофронтендера».
📲 Резервный канал в MAX | 1 549 |
