Interop 2025: еще один год улучшений веб-платформы

Rachel Andrew

Опубликовано: 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.

• Яблоко
• Бокуп
• Игалия
• Майкрософт
• Мозилла