CSS Боль

CSS Anchor Positioning: An In-Depth Visual Guide Добавил часть про анимации в большой гайд по анкорам и перевёл его на английский. Поделитесь статьёй со своими знакомыми фронтендерами-иностранцами. А можете и сами почитать и позалипать на анимацию. https://htmlacademy.org/blog/anchor-positioning-in-pictures → опубликовано через smmtp://

Большой визуальный гайд по CSS Anchor Positioning От базовой привязки элементов до прикладных приёмов: создания прочных соединителей и цепочек якорей. Собрали материалы нескольких месяцев работы в большую статью в формате "CSS-фича в картинках". Получилось больше 50 иллюстраций! Теперь про Anchor Positioning можно и почитать, и поиграть. https://habr.com/ru/articles/1092540/ → опубликовано через smmtp://

Суперприёмы Anchor Positioning В детстве мы играли в файтинги на денди (а мажоры на сегамегадрайве). И там были суперприёмы. В анкор позишнинге они тоже есть! Суперприём #1 – прочная связь двух элементов Один угол заякорённого элемента привязываем к первому якорю, противоположный угол — ко второму якорю. Готово. Связь будет сохраняться при перемещении связанных элементов. Визуально оформить связь можно фоном или рамками. Код:

.svyaz {
  /* один угол связали с --a1 */
  top: anchor(--a1 center);
  left: anchor(--a1 center);

  /* второй с --a2 */ 
  bottom: anchor(--a2 center);
  right: anchor(--a2 center);
}

Суперприём #2 – цепочки якорей Один заякорённый элемент можно делать якорем для второго, а тот для третьего и так далее. Простор для творчества — гигансткий. Этот приём напоминает мне школьную игру про "... дорисуй вагон другой". Пощупать эти приёмы можно в очередном уровне игры про Anchor Positioning. Перед этим лучше пройти все предыдущие уровни. → опубликовано через smmtp://

ИИ становится пугающе сообразительным Я не замечаю, что новые модели становятся всё умнее и приближаются к естественному интеллекту. Но вижу как они становятся сообразительнее, я бы сказал шаристее. И это иногда впечатляет. Недавно дал астре абсолютно нетипичную для себя задачку. "А сможешь сделать вертикальный ролик?". Мол, сходи поиграй в мини-игру про гриды и сделай ролик. Тот ответил, что вообщше без проблем. И через 7 мин у меня был ролик, который вы видите. То есть он сам сходил по адресу, поиграл, разобрался как работает игра, посмотрел задачки, выбрал самые интересные с его точки зрения, наскриншотил, сложил в папочку. Потом написал сам себе сценарий и скриптик, по которому собрал ролик. Да, это не покадровая ИИ-генерация, это алгоритмическая генерация. Но сделанная полностью автономно. В общем новые модельки меньше тупят и лучше соображают. И это прикольно → опубликовано через smmtp://

Какую же красоту можно делать с 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