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