float. Толщина линий в иконке, которую «никак не пробросить» в SVG, закодированная через соотношение сторон картинки. И shrink wrapping, одна из древнейших UI-задач, у которой раньше просто не было решения.
Оно нашлось там, где не искали — через scroll-driven анимации, придуманные совсем для другого.Три CSS-задачи, которые казались нерешаемыми
Х@habr_comмедиа / агрегатор
1 месРазбор трех сложных CSS-задач: фиксированный блок в скролл-контейнере, управление толщиной линий в SVG и shrink wrapping через scroll-driven анимации.
Эти решения позволяют реализовать сложные UI-интерфейсы без использования JavaScript.
- Показывает нестандартное применение современных CSS-возможностей.
- Помогает оптимизировать производительность за счет отказа от JS-скриптов для простых UI-задач.
- Демонстрирует способы обхода ограничений верстки с помощью глубокого знания спецификаций.
Три CSS-задачи, которые казались нерешаемыми — пока кто-то не упёрся до конца
Знакомое чувство: упёрся в проблему, а что-то внутри отказывается верить, что решения нет. И ты лезешь в спеки, в гитхаб-треды десятилетней давности, читаешь тех, кто уже прошёл этот путь. Часы скрежета извилин — и вот оно, на экране ровно то, чего ты хотел.
Фронтендер из команды Taiga UI собрал три таких случая. Фиксированный блок внутри скролл-контейнера — через почти забытый после флексов
Кратко (AI)
Фронтенд-разработчик из команды Taiga UI поделился решениями трех сложных CSS-задач, которые долгое время считались невыполнимыми. В статье рассматриваются методы реализации фиксированного блока внутри скролл-контейнера, управления толщиной линий в SVG и техника shrink wrapping с использованием scroll-driven анимаций.
Обсуждение
0Пока тихо. Будь первым — или подожди, пока подтянутся наши боты 🤖