Опубликовано: 13 февраля 2025 г.
После огромного успеха Interop 2024 проект возвращается сегодня с новым набором направлений на 2025 год. Хотя мы не смогли включить все предложения, сделанные в этом году, окончательный список охватывает всю веб-платформу — от CSS до функций, связанных с производительностью.
Приоритетные направления на 2025 год
- Расположение якоря
-
backdrop-filter
- Основные веб-показатели
- элемент
<details>
- Макет
- Модули
- API навигации
- События указателя и мыши
- Удалить события мутации
-
@scope
- событие
scrollend
- API доступа к хранилищу
-
text-decoration
-
URLPattern
- Посмотреть API перехода
- Веб-сборка
- Веб-совместимость
- ВебRTC
- Режимы записи
Кроме того, как и в предыдущие годы, есть ряд областей для расследования. Это области, в которых у нас недостаточно информации или тестов, чтобы включить их в качестве приоритетной области, но группа считает, что необходимо проделать некоторую работу, чтобы довести их до стадии, на которой мы сможем их включить.
- Тестирование доступности
- Тестирование API геймпада
- Мобильное тестирование
- Тестирование конфиденциальности
- ВебВТТ
Мы в восторге от всех этих функций и улучшений, которые проект этого года принесет в платформу. И, как и в прошлом году , проект сделает доступным целый набор вещей Baseline Newly. В этом посте представлена дополнительная информация о некоторых функциях из списка, а также ссылки на информацию, позволяющую узнать больше.
Вы можете следить за информацией на информационной панели Interop 2025 по адресу wpt.fyi/interop-2025, и по мере того, как что-то становится доступным в качестве Baseline Newly, оно также будет отображаться в списке Baseline 2025 на сайте webstatus.dev .

CSS и пользовательский интерфейс
Некоторые из функций, включенных в Interop 2025, — это функции, которые вы отметили как важные в опросе «Состояние CSS 2024». Они помогут вам создать более красивый и эффективный пользовательский интерфейс.
Расположение якоря
Эта функция позволяет привязать позиционированный элемент к якорю. Это особенно полезно при отображении всплывающих окон.
Включение этой функции в Baseline значительно упростит создание пользовательских интерфейсов без необходимости использования сторонних библиотек. Узнайте больше в нашей документации по позиционированию привязки , а также о MDN — CSS Anchor Positioning .
Переходы между видами одного и того же документа
В этом году также включены переходы представлений, в частности переходы представлений одного и того же документа, и свойство CSS view-transition-class
.
Узнайте больше о переходах представлений в разделах Переходы представлений одного и того же документа для одностраничных приложений и в документации MDN для переходов представлений .
Свойство backdrop-filter
Свойство backdrop-filter
было Baseline New доступно с сентября 2024 года. Оно позволяет создавать эффекты для вашего контента. Например, для размытия или создания эффектов, которые, как вы ожидаете, будут доступны только в графическом приложении.
Несмотря на то, что они в основном совместимы, из неудачных тестов backdrop-filter
видно, что в этих реализациях есть ошибки и проблемы. Хотя эти проблемы могут быть проблемой не для всех, мы знаем, что многие из вас с ними сталкиваются, было бы здорово, если бы эта функция работала действительно хорошо.
Элемент <details>
Элемент <details>
— это виджет раскрытия, который можно расширить для отображения дополнительного контента. Сам элемент <details>
является широко доступным. Однако недавно был добавлен ряд связанных функций, которые делают <details>
более полезным .
- Псевдоэлементы CSS
::marker
и::details-content
. - Использование
content-visibility
для переключения контента вместоdisplay
. - Автоматическое расширение элемента
<details>
с помощью совпадений при поиске на странице. - Атрибут
hidden="until-found"
, который скрывает элемент до тех пор, пока он не будет найден с помощью поиска на странице браузера или до тех пор, пока к нему не будет выполнен прямой переход по фрагменту URL-адреса.
CSS @scope
at-правило
Правило @scope
позволяет ограничить область действия селекторов поддеревом DOM или даже выбирать между верхней и нижней границей дерева. Например, следующий CSS выбирает только элементы <img>
внутри элемента с классом .card
.
@scope (.card) {
img {
border-color: green;
}
}
В следующем примере используются верхняя и нижняя границы. Элемент <img>
выбирается только в том случае, если он находится между элементом с классом .card
, а также за пределами элемента с классом .card__content
.
@scope (.card) to (.card__content) {
img {
border-color: green;
}
}
Дополнительные примеры использования @scope
можно найти в разделе Ограничение охвата селекторов с помощью at-правила CSS @scope
и в документации @scope
на MDN .
Событие scrollend
Без события scrollend
нет надежного способа определить, что прокрутка завершена. Лучшее, что вы можете сделать, это использовать setTimeout()
, чтобы проверить, остановилась ли прокрутка на какое-то время. Это больше похоже на событие прокрутки, приостановившей прокрутку, а не на событие прокрутки, закончившейся.
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
С помощью события scrollend
браузер выполняет всю эту сложную оценку за вас.
document.onscrollend = event => {
// ...
}
Дополнительные примеры см. в Scrollend, новом событии JavaScript , а также в документации MDN для scrollend
.
Свойство text-decoration
Свойство text-decoration
является сокращением для text-decoration-line
, text-decoration-color
, text-decoration-style
и text-decoration-thickness
. Считается, что Baseline широко доступен, однако в Safari единственное работающее сокращенное свойство без префикса — это text-decoration-line
. Именно этим и будут заниматься в 2025 году.
Режимы записи
Свойство CSS writing-mode
имеет ряд возможных значений, многие из которых предназначены для размещения сценариев, отображаемых вертикально. Однако иногда вам нужно расположить текст вертикально как часть дизайна, а не из соображений языковой поддержки. Значенияsideways sideways-lr
sideways-rl
предназначены для этого, но страдают от плохой совместимости с браузерами. Это должно быть исправлено в течение 2025 года.
Кроме того, включены логические свойства CSS overflow-inline
и overflow-block
. Это позволяет контролировать, что происходит, когда контент выходит за пределы ячеек, независимо от режима записи.
Основные веб-показатели
Web Vitals может помочь вам количественно оценить удобство вашего сайта и определить возможности для его улучшения. Инициатива Web Vitals направлена на упрощение ландшафта и помогает сайтам сосредоточиться на наиболее важных показателях — основных веб-показателях.
Interop 2025 включает метрики Largest Contentful Paint (LCP) и Interaction to Next Paint (INP) за счет реализации API LargestContentfulPaint и API синхронизации событий в браузерах. Метрика «Совокупный сдвиг макета» (CLS) не входит в область применения.
API-интерфейс ЛКП
API синхронизации событий (для INP)
Веб-сборка (Wasm)
API WebAssembly позволяет загружать код WebAssembly — переносимый двоичный формат инструкций. Он может позволить вам выполнять такие действия, как запуск всего приложения блога , включая все требования к серверу, в браузере!
В этом году работа будет сосредоточена на следующих направлениях:
- Встроенные строковые функции JavaScript: чтобы встроенные строковые функции WebAssembly отражали подмножество API строк JavaScript, чтобы их можно было вызывать без связующего кода JavaScript.
- Интеграция буферов изменяемого размера: для интеграции WebAssembly в код JavaScript, использующий буферы изменяемого размера.
Удаление функций
В этом году проект предполагает удаление с платформы. События мутации устарели и заменены гораздо более производительным и широко доступным базовым API Mutation Observer API . Chrome удалил эти события в Chrome 126, и сейчас мы стремимся удалить их из всех браузеров.
Чтобы понять историю и почему эти события удаляются, прочтите «Мутационные события будут удалены из Chrome» .
Узнать больше
Описания полного списка возможностей можно найти в README проекта. Также прочтите сообщения других компаний, работающих над Interop 2025.