В Google I/OI поделился новостями о том, как развивалась Baseline с момента нашего анонса на I/O в прошлом году. Я также анонсировал панель управления веб-платформы, интеграцию с RUM Archive и предстоящую интеграцию с RUMvision. В этом посте все ресурсы из выступления собраны в одном месте.
Панель мониторинга веб-платформы — это новый потрясающий способ просмотра всей веб-платформы, а также пути взаимодействия отдельных функций и их включения в состав Baseline. Подробнее об этом читайте в разделе «Анонс информационной панели веб-платформы» .
Интеграция Baseline с инструментами, которые вы используете каждый день, всегда была частью концепции этого проекта. Мы хотим, чтобы вам не приходилось тратить много времени на размышления о совместимости браузеров. Узнайте больше об интеграции RUM Archive и следите за новостями о новых поставщиках инструментов в ближайшее время.
Новое в базовой версии
На I/OI рассказали о 12 функциях веб-платформы, которые недавно стали частью Baseline Newly Available. Эти функции теперь доступны в Chrome, Edge, Firefox и Safari и варьируются от небольших дополнений, которые могут упростить разработку, до некоторых наиболее востребованных разработчиками функций, включая контейнерные запросы и :has() .
Запросы размера контейнера
Запросы контейнера размера позволяют изменять дизайн в зависимости от ширины или встроенного размера контейнера, а не только нацеливаться на размер области просмотра с помощью медиа-запросов. Это позволяет использовать больше компонентов многократного использования, которые могут изменяться в зависимости от доступного пространства при размещении в макете. Они были на вершине списка самых востребованных функций почти с тех пор, как существовала концепция адаптивного дизайна.
- Новое в продаже в феврале 2023 года.
- Широко доступно в августе 2025 года.
Узнайте больше о контейнерных запросах на MDN в разделе Контейнерные запросы в стабильных браузерах и узнайте, какую пользу от них получают другие команды разработчиков, из тематических исследований контейнерных запросов .
:has() селектор
Селектор :has() дает нам то, что было еще одним популярным запросом разработчиков на протяжении многих лет — родительский селектор, способ выбрать элемент на основе того, что находится внутри него. Хотя :has() может быть гораздо большим, чем просто это.
Как и в случае с контейнерными запросами, это невероятно полезно при создании повторно используемых компонентов, поскольку вы можете создать единственный компонент, который может адаптироваться к тому, что он содержит.
- Новое в продаже в декабре 2023 года.
- Широко доступно в июне 2026 года.
Узнайте больше о :has() на MDN , о :has() селекторе семейства и в тематических исследованиях :has() .
Подсетка макета сетки CSS
Subgrid позволяет вложенной сетке наследовать дорожки от своего родителя. Это позволяет лучше выравнивать элементы во вложенных сетках.
- Новое в продаже в декабре 2023 года.
- Широко доступно в июне 2026 года.
Узнайте больше о подсетке на MDN и в подсетке CSS , которая ссылается на большое количество других ресурсов.
CSS-вложение
В последние годы CSS черпал вдохновение из функций, которые разработчики использовали в препроцессорах, таких как Sass. Например, пользовательские свойства CSS, часто называемые переменными CSS, представляют собой широко доступную функцию, которая позволяет устанавливать такие переменные, как цвета, в одном месте и использовать их во всем CSS, что раньше было доступно только при использовании препроцессора.
Еще одна особенность препроцессоров — вложенность. Вложенность помогает избежать повторения селекторов и повышает читаемость CSS, поскольку связанные элементы легче группировать вместе.
- Новое в продаже в августе 2023 г.
- Широко доступно в феврале 2026 г.
Узнайте больше о вложении CSS на MDN и в разделе «Вложение CSS» .
HTML-элемент <search>
Поиск — это то, что появляется на многих сайтах и в приложениях, однако до недавнего времени не было элемента для разметки функций, используемых для поиска или фильтрации на странице. Для этой цели был разработан элемент <search> . Он существует как элемент, внутри которого можно разместить форму поиска или другие элементы, используемые для фильтрации результатов.
- Новое в продаже в октябре 2023 г.
- Широко доступно в апреле 2026 г.
Узнайте больше об элементе <search> в MDN .
Адаптивное видео
Эта функция относится к возможности использовать элемент <source> внутри элемента <video> для подачи видео соответствующего размера на разные устройства точно так же, как вы можете обслуживать изображения различного размера.
- Новое в продаже в ноябре 2023 г.
- Широко доступно в мае 2026 г.
Узнайте больше о MDN в разделе «Источник мультимедиа или изображения» и в разделе «Как использовать адаптивное видео» .
inert атрибут
Когда элемент инертен, с ним невозможно взаимодействовать. Например, при открытии диалогового окна элементы, находящиеся на странице за диалоговым окном, н��льзя щелкнуть или перейти на вкладку. Атрибут inert дает вам возможность контролировать инертность любой части вашего пользовательского интерфейса.
Если к элементу применен атрибут inert , события щелчка не будут запускаться при щелчке по элементу, элемент не может получить фокус, элемент и его содержимое скрыты от вспомогательных технологий, поскольку они исключены из дерева доступности.
- Новое в продаже в апреле 2023 г.
- Широко доступно в октябре 2025 г.
Узнайте больше об inert на MDN , а также в разделе Атрибут inert .
Функция color-mix()
Функция color-mix() позволяет смешивать один цвет с другим в любых доступных цветовых пространствах, включая все новые цветовые модели — LCH, Lab, OKLCH и OKLab, — которые недавно стали частью Baseline Newly Available.
- Новое в продаже в апреле 2023 г.
- Широко доступно в октябре 2025 г.
Узнайте больше о color-mix() на MDN и в CSS color-mix() . У нас также есть огромное руководство по цветам CSS высокого разрешения, охватывающее все новые цветовые модели, доступные в CSS. Кроме того, попробуйте градиент.style , чтобы поиграть с этими новыми цветами и создать красивые градиенты.
:user-valid и :user-invalid
Псевдоклассы :valid и :invalid широко доступны в браузерах и указывают, является ли элемент формы в данный момент действительным в соответствии с любыми правилами ограничений, наложенными на него, или недействителен. Таким образом, если у вас есть поле с типом электронной почты и оно содержит имя, псевдокласс :invalid выделит его, и вы сможете добавить цвет или значок, чтобы продемонстрировать, что его необходимо исправить.
Проблема с псевдоклассами :valid и :invalid заключается в том, что они применяются до того, как пользователь взаимодействовал с формой. Таким образом, если требуется элемент формы, а пользователь еще не заполнил его, будет отображаться недопустимый стиль. Обычно вы хотите, чтобы недопустимый стиль отображался только в том случае, если пользователь ввел что-то неправильно или пропустил поле и оставил его пустым.
Чтобы улучшить взаимодействие с пользователем в этой ситуации, используйте псевдоклассы :user-valid и :user-invalid . Они ведут себя практически одинаково, за исключением того, что они совпадают только после того, как пользователь взаимодействовал с полем. Таким образом, в примере с обязательным полем пользователю необходимо перейти в поле или щелкнуть его, а затем уйти, не заполнив его, чтобы поле отобразило недопустимое состояние.
- Новое в продаже в октябре 2023 г.
- Широко доступно в апреле 2026 г.
Узнайте больше о :user-valid и :user-invalid на MDN.
Потоки сжатия
Многим веб-приложениям необходимо предоставлять пользователю возможность загрузки в сжатом формате, например в виде zip-файла. Раньше для этого требовалось, чтобы приложение включало библиотеку сжатия — код, который увеличивал размер приложения для всех пользователей. API Compression Streams предоставляет встроенный способ сжатия потока данных.
- Новое в продаже в мае 2023 г.
- Широко доступно в ноябре 2025 г.
Узнайте больше об API Compression Streams в MDN и о том, что Compression Streams теперь поддерживается во всех браузерах .
Декларативный теневой DOM
Декларативный теневой DOM — это новый способ создания теневого дерева из HTML, тогда как раньше вы могли создать теневое дерево только из JavaScript с помощью attachShadow() . Возможность сделать это из HTML особенно полезна в средах, где JavaScript может не работать, например в почтовом клиенте. Это также важно для веб-компонентов, отображаемых на стороне сервера.
- Новое в продаже в феврале 2024 г.
- Широко доступно в августе 2026 г.
Узнайте больше о декларативном теневом DOM .
API-интерфейс Поповера
Всплывающие окна используются для решения множества различных задач в наших веб-приложениях. Например, меню, настраиваемые всплывающие уведомления и средства выбора контента. Теперь есть встроенный способ создания декоративных всплывающих окон с помощью API Popover.
- Новое в продаже в апреле 2024 г.
- Широко доступно в октябре 2026 г.
Узнайте больше об API Popover на MDN , API Popover в Baseline и в тематических ��сследованиях Popover .
Эти 12 функций — это лишь некоторые из функций, которые стали частью Baseline Newly Available, и вы можете узнать больше на этом сайте. Откройте для себя все функции, вошедшие в Baseline 2023, и растущую коллекцию функций, входящих в Baseline 2024 .