Опубликовано: 3 июня 2026 г.
Добро пожаловать в ежемесячный дайджест Baseline. В мае 2026 года ряд новых функций CSS, свойств событий и дополнений к API стали доступны в рамках Baseline Newly, а модули CSS, свойства взаимодействия с пользователем и псевдоклассы стали доступны в рамках Baseline Widely, наряду с важными обновлениями от сообщества разработчиков.
Опрос о состоянии системы CSS к 2026 году
Ежегодная проверка состояния веб-сообщества уже здесь: опрос «Состояние CSS 2026» открыт. В этом году организаторы целенаправленно усовершенствовали опрос, сосредоточившись на функциях, наиболее важных для разработчиков в эпоху программирования с использованием ИИ. Производители браузеров внимательно следят за результатами, чтобы определить приоритеты в своих инженерных планах и решить проблемы, с которыми сталкиваются разработчики. Обязательно поделитесь своим мнением и опытом работы с развивающимся ландшафтом CSS до закрытия опроса 1 июля.
Базовые новые доступные функции
Функции, описанные в этом разделе, поддерживаются в базовом наборе браузеров с мая 2026 года и теперь доступны в базовой версии.
Запросы в контейнерном стиле
Запросы к контейнерам больше не ограничиваются размером. С помощью запросов к стилям теперь можно применять стили к элементам на основе пользовательских свойств родительского контейнера. Это позволяет создавать высокомодульные компоненты, которые могут адаптировать свою тему или стиль в зависимости от контекстного размещения, не полагаясь на сложные структуры классов.
Подробнее см. на справочной странице MDN по @container .
:open псевдокласс
Ранее для стилизации элементов, имеющих открытое и закрытое состояния, таких как <dialog> и <details> , требовалась проверка атрибутов или управление классами. Псевдокласс :open упрощает этот процесс, сопоставляя эти элементы только тогда, когда они находятся в открытом состоянии, что позволяет создавать более чистый и декларативный CSS.
Подробнее об этом можно прочитать на странице MDN, посвященной псевдоклассу :open .
ToggleEvent.source
При работе с API всплывающих окон крайне важно реагировать на изменения состояния. Свойство source интерфейса ToggleEvent возвращает элемент управления, который инициировал действие переключения всплывающего окна. Это позволяет определить источник события и координировать сложные взаимодействия в пользовательском интерфейсе.
Более подробную информацию можно найти в документации MDN для ToggleEvent.source .
свойство image-rendering
Свойство CSS ` image-rendering позволяет управлять алгоритмом масштабирования, используемым при изменении размера изображений. Это особенно полезно для пиксельной графики, изображений с низким разрешением или QR-кодов, где важно избегать размытой интерполяции и сохранять четкость и пикселизацию при масштабировании.
Узнайте, как его использовать, на странице MDN, посвященной рендерингу изображений .
text-decoration-skip-ink: all
Подчеркивание, проходящее через нижние выносные элементы, иногда может выглядеть перегруженным. В то время как text-decoration-skip-ink: auto пропускает чернила только при пересечении, установка этого параметра в all заставляет подчеркивание пропускать все глифы независимо от пересечения, предоставляя больший контроль над эстетикой типографики.
Подробности см. в руководстве MDN по параметру text-decoration-skip-ink .
SharedWorker
API SharedWorker предоставляет специализированный фоновый процесс, доступный из различных контекстов просмотра, таких как разные окна, вкладки или iframe на одном и том же сервере. Это очень удобно для обмена состоянием, управления соединениями или координации фоновых задач между вкладками.
Ознакомьтесь с документацией MDN по SharedWorker .
Базовые широкодоступные функции
Следующие функции стали широко доступны в базовой версии, а это значит, что теперь они в значительной степени совместимы и могут быть использованы в ваших проектах.
единица длины lh
Относительная единица измерения lh соответствует вычисленной межстрочной высоте элемента, на котором она используется. Это упрощает изменение размеров элементов, таких как значки или фоновые выделения, чтобы они идеально соответствовали высоте строки текста.
Более подробную информацию о единицах измерения длины можно найти в справочнике MDN .
единица длины rlh
Подобно lh , единица rlh обозначает межстрочный интервал, но конкретно для корневого элемента ( <html> ). Это позволяет установить единый вертикальный ритм по всей странице, независимо от локального размера шрифта или настроек межстрочного интервала.
Более подробную информацию об единицах измерения длины можно найти в справочнике MDN .
Navigator.userActivation
Многие веб-API (например, воспроизведение видео, всплывающие окна или доступ к буферу обмена) требуют взаимодействия с пользователем перед их активацией. Свойство Navigator.userActivation возвращает объект, содержащий информацию о текущем и прошлом состоянии активации пользователя в окне, что позволяет скриптам проверять, был ли выполнен какой-либо жест пользователем.
Узнайте, как это использовать, на странице MDN, посвященной Navigator.userActivation .
clip-path
Свойство CSS clip-path позволяет создать область обрезки, определяющую, какая часть элемента должна быть видимой. Используя простые фигуры (например, круги, эллипсы или многоугольники) или SVG-пути, вы можете создавать привлекательные макеты и переходы, не скрывая переполнение.
Подробности реализации см. на странице MDN, посвященной функции clip-path .
:user-invalid pseudo-class
В отличие от :invalid , который применяет стили сразу после загрузки страницы (что часто приводит к ухудшению пользовательского опыта), псевдокласс :user-invalid соответствует недействительным элементам формы только после того, как пользователь взаимодействует с ними. Это означает, что вы можете показывать обратную связь проверки формы после того, как пользователь покинет поле.
Узнайте, как это работает, в документации MDN для :user-invalid .
На этом всё.
Сообщите нам, если мы что-то упустили в отношении Baseline, и мы обязательно учтем это в будущей версии! Если у вас есть какие-либо вопросы или вы хотите оставить отзыв о Baseline, вы можете создать заявку в нашем трекере проблем .