Пора уже заниматься подведением итогов года, и сегодня предлагаю посмотреть очень стильно оформленную статью от ChromeDev о ключевых улучшениях в CSS за 2024 год. Если тезисно пройтись по списку, получим следующее:
1. Анимации и переходы:
- Cross-Document View Transitions: анимации между страницами без необходимости превращать сайт в SPA.
- Анимация до
height: auto: плавные анимации для элементов с авто-высотой с помощью interpolate-size и calc-size().2. Интерактивные компоненты:
- Акордеоны на базе `<details>`: эксклюзивные аккордеоны с атрибутом
name, чтобы при открытии одного элемента закрывались другие.- Стилизованные
<details> элементы: возможность кастомизировать <details> и <summary> с помощью display и псевдо-элемента ::details-content.- Anchor Positioning: новый способ позиционирования элементов относительно других без сторонних библиотек через
position-anchor и position-area.3. UI-паттерны:
- Стилизация полос прокрутки: настройка ширины и цвета полос прокрутки через
scrollbar-width и scrollbar-color.- Scroll-driven Animations: анимации, синхронизированные с прокруткой страницы.
- Scroll Snap Events: новые события
scrollsnapchange и scrollsnapchanging для более точного контроля за элементами при скролле.4. Улучшения для разработчиков:
- Унаследование для ::backdrop: ::backdrop теперь наследует стили от родительских элементов, улучшая работу с модальными окнами.
- Функция
light-dark(): позволяет легко адаптировать стили для светлой и темной темы.- Регистрация свойств с
@property: создание кастомных свойств с указанием типа и начального значения для использования в анимациях.- Popover API: создание всплывающих окон с встроенной функциональностью закрытия и фокусировки.
- Эффекты при старте c @starting-style: задавайте начальные стили элементов для анимаций при их появлении.
5. Другие улучшения:
- Поддержка линейного разрыва текста в
<ruby>: улучшенное выравнивание текста с аннотациями Ruby.- Контроль порядка рисования текста с
paint-order: настройка порядка рисования текста и обводки для улучшения визуальных эффектов.Статья - https://chrome.dev/css-wrapped-2024/#paint-order
