CSS в 2024 году: 17 функций, меняющих современный веб-дизайн
Краткое резюме информации, представленной в предыдущей статье, которая описывала новые возможности CSS.
В 2024 году в CSS появился набор функций, которые значительно расширяют возможности веб-дизайна, предоставляя разработчикам больше контроля и гибкости.
В рамках инициативы «CSS 2024» от Chrome DevRel представлены 17 важных дополнений к компонентам, взаимодействиям и опыту разработчиков.
Усовершенствования компонентов
- Изменение размера полей: свойство
field-sizingпозволяет элементам формы, таким какtextarea,select, иinput, автоматически изменять свой размер в зависимости от содержимого, устраняя необходимость в обходных решениях на JavaScript. - Анимация до
height: auto: с помощью свойстваinterpolate-sizeразработчики могут плавно переводить элементы в собственные размеры, такие какheight: auto,min-content, иmax-content, что позволяет создавать более динамичные макеты. - Эксклюзивное
<details>: улучшения элемента<details>теперь поддерживают эксклюзивное поведение, позволяя одновременно открывать только одно раскрытие, что особенно полезно для интерфейсов-гармошек. - Стилизация
<details>: теперь разработчики могут применять собственные стили к элементам<details>и<summary>, обеспечивая большую гибкость дизайна. - Позиционирование по якорям: новая функция позиционирования по якорям позволяет точно размещать элементы относительно якорей, что упрощает создание сложных наложений.
Улучшения взаимодействия
- Пользовательские полосы прокрутки: CSS теперь позволяет стилизовать полосы прокрутки, чтобы они соответствовали общей эстетике сайта.
- Переходы между документами: эта функция обеспечивает плавные переходы между различными документами, улучшая взаимодействие с пользователем во время навигации.
- Анимации, управляемые прокруткой: разработчики могут создавать анимации, реагирующие на события прокрутки, что делает веб-страницы более интерактивными и привлекательными.
- События привязки прокрутки: новые события обеспечивают более точный контроль над поведением привязки прокрутки, повышая точность взаимодействия с прокруткой.
Улучшения опыта работы с разработчиками
- Наследование фона: эта функция позволяет элементам наследовать стили фона, обеспечивая единообразие оформления компонентов.
light-dark()Функция: функцияlight-dark()позволяет адаптировать дизайн в зависимости от предпочтений пользователя, повышая доступность.@propertyЭто правило позволяет определять пользовательские свойства с особым синтаксисом и правилами наследования, улучшая управление переменными CSS.- Popover API: Popover API предоставляет стандартизированный способ создания элементов Popover и управления ими, упрощая разработку интерактивных компонентов.
@starting-styleЭто правило определяет начальные стили элемента перед любой анимацией, обеспечивая согласованное поведение анимации.ruby-align: Улучшения в свойствахruby-alignулучшают отображение восточноазиатской типографики, способствуя лучшей интернационализации.paint-orderСвойствоpaint-orderпозволяет разработчикам управлять порядком отрисовки заливки, обводки и маркеров, обеспечивая более точный контроль над рендерингом SVG.- Вложенные объявления CSSOM: поддержка вложенных объявлений в объектной модели CSS (CSSOM) упрощает работу с вложенными стилями с помощью JavaScript.
Эти достижения стали результатом совместной работы разработчиков браузеров, авторов спецификаций и сообщества разработчиков и ознаменовали значительный прорыв в CSS в 2024 году.
Для получения полного обзора и демонстраций этих функций посетите «CSS 2024» .