CSS Боль

Какую же красоту можно делать с Anchor Positioning

Это просто промежуточный этап работы

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() самостоятельно в мини-игре. Цель — пройти уровень идеально. После этого, как говорил братишка Иллидан, вы будете готовы к сложным приёмам якорного позиционирования.

Скругления в неожиданных местах

Скругления хороши в углах блоков, а в других местах они превращаются в жуткий головняк.

Проблему скруглений решает CSS-функция shape(), причём сразу несколькими способами. Самый грубый — команда arc.

Теперь с arc можно поиграться в новой мини-игре. Цель, как обычно, пройти уровень идеально (можно не с первого раза). В процесее оцените, насколько сложно вырезать стрелочку со скриншота.

P.S.: если в первый раз видите shape(), то начните игру с первого уровня

CSS shape() — фича больших надежд

CSS начал вырастать из коротких штанишек квадратного веба. Швы конкретно затрещали, когда хром зарелизил свойство border-shape, ядро которого — CSS-функция shape().

shape() была не особо популярной, про неё вспоминали, когда нужно было что-то обрезать. Но и тут можно было повыбирать: маски или clip-path, а можно ли использовать какой-нибудь генератор?

Но давайте посмотрим на текущий потенциал фичи:
— сложные формы контейнеров (с нормальной отрисовкой рамок),
— траектории движения для анимаций,
— просто обрезки,
— комбинирование с другими фичами (например с anchor-positioning).

Короче, с фичей пора знакомиться, можно начать с мини-игры по CSS shape(). Цель — пройти уровень идеально.

P.S.: куда поместить навык работы с shape() в системе грейдов?

Я думаю, что на текущем этапе даже базовое владение shape() — это удел синьоров, потому что синьор — это про кругозор и перспективные фичи, а мидл — это про использование надёжного и предсказуемого. А как думаете вы?

CSS Anchor Positioning

Бывают такие фичи, до которых долго доходят руки. Но чуть познакомишься — понимаешь, что фича — бомба. Якорное позиционирование — бомба, прям петарда чёрный корсар из детства.

Заякорённые элементы это как бы абсолютно позиционированные, но с суперспособностями.

Например, их можно привязывать не только к элементу в цепочке родителей, но к элементам вне родителя. И ещё куча других фич.

Короче, не затягивайте с тем, чтобы поиграться с Anchor Positioning, тем более мы сделали красивую мини игру про эту фичу (первую из множества).

Случайные испытания для демонстрации мастерства

Запустили сложный игровой режим Восхождение, в котором можно показать свой скил.

Суть режима:
1. Пройти уровень из 10 случайных испытаний выбранной сложности
2. Использовать во время прохождения минимум лишних ходов
3. По результатам определяется ступень мастерства

Есть 3 уровня сложности, по 3 попытки на каждый.

И если на простом уровне всё проходится левой пяткой, то на сложном реально приходится попотеть. На внутренних тестах лучший результат — 8 ступень из 9.

Теперь вам есть чем поразвлекаться в пятницу =)

P.S.: а анимация то какая прикольная получилась у портала.

https://htmlacademy.ru/skill-trials/conic-ascension

#ТяжелыйПонедельник #видеозаписи

Мы стоим на пороге революции в верстке, связанной с новым подходом — реактивным CSS. В нем привычная логика отображения «переезжает» из JavaScript в стили, и весь внешний вид компонента зависит от CSS-переменных состояния. В докладе, который открываем сегодня, спикер разобрал этот подход на постепенно усложняющихся примерах.

Александр Першин — Реактивный CSS

😉 YouTube | 📺 VK Видео

Опубликовали мой доклад про Реактивный CSS на весеннем HolyJS. Особенно прикольным получился третий пример про связку скролла с цсс-логикой. В нём у календаря-индикатора при прокрутке ячейки закрашиваются разными цветами.

Ну а мне как докладчику понравилась атмосфера в зале, хотя было утро второго дня конференции, самое тяжелое утро =)

Треугольники на CSS

Недавно вышла статья, в которой автор открыл для себя треугольники на конических градиентах. Идея простая: помещаем центр градиента в угол и используем резкий переход цветов.

Способ гибкий и удобный: не нужен дополнительный элемент, можно сделать сразу несколько треугольников и независимо управлять их параметрами с помощью многослойных фонов.

Cхема решения такая:

conic-gradient(
  from 335deg
  at bottom right,
  transparent 0 25deg,
  red 25deg
);

"Наклон" треугольника задаём позицией цвета, помещаем центр градиента в нужный угол контейнера и подбираем подходящий стартовый угол.

Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку.

Флексы или флоаты

Для опытных разработчиков этот вопрос даже не встаёт. Выбор в пользу флоатов очевиден.

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

Свои первые робкие шаги во флексах можно сделать в нашей красивой псевдо-три-дэ игре

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

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

Никогда не понимал, что это значит. Признайтесь, у кого так же?

Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 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
🐹 Смотреть в VK