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» .