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

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

Оценки на начало проекта: Interop: 33, Investigations: 0, Chrome Canary: 91, Edge Dev: 88, Firefox Nightly: 52, Safari Technology Preview: 55.
Панель управления Interop 2025 (по состоянию на 13 февраля 2025 г.).

CSS и пользовательский интерфейс

Некоторые из функций, включенных в Interop 2025, — это функции, которые вы отметили как важные в опросе «Состояние CSS 2024». Они помогут вам создать более красивый и эффективный пользовательский интерфейс.

Расположение якоря

Browser Support

  • Хром: 125.
  • Край: 125.
  • Firefox: не поддерживается.
  • Сафари: не поддерживается.

Source

Эта функция позволяет привязать позиционированный элемент к якорю. Это особенно полезно при отображении всплывающих окон.

Якорь с позиционированным элементом.

Включение этой функции в Baseline значительно упростит создание пользовательских интерфейсов без необходимости использования сторонних библиотек. Узнайте больше в нашей документации по позиционированию привязки , а также о MDN — CSS Anchor Positioning .

Переходы между видами одного и того же документа

Browser Support

  • Хром: 111.
  • Край: 111.
  • Firefox: не поддерживается.
  • Сафари: 18.

Source

В этом году также включены переходы представлений, в частности переходы представлений одного и того же документа, и свойство CSS view-transition-class .

Узнайте больше о переходах представлений в разделах Переходы представлений одного и того же документа для одностраничных приложений и в документации MDN для переходов представлений .

Свойство backdrop-filter

Browser Support

  • Хром: 76.
  • Край: 79.
  • Фаерфокс: 103.
  • Сафари: 18.

Source

Свойство 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-правило

Browser Support

  • Хром: 118.
  • Край: 118.
  • Firefox: за флагом.
  • Сафари: 17.4.

Source

Правило @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

Browser Support

  • Хром: 114.
  • Край: 114.
  • Фаерфокс: 109.
  • Сафари: не поддерживается.

Source

Без события scrollend нет надежного способа определить, что прокрутка завершена. Лучшее, что вы можете сделать, это использовать setTimeout() , чтобы проверить, остановилась ли прокрутка на какое-то время. Это больше похоже на событие прокрутки, приостановившей прокрутку, а не на событие прокрутки, закончившейся.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

С помощью события scrollend браузер выполняет всю эту сложную оценку за вас.

document.onscrollend = event => {
  // ...
}

Дополнительные примеры см. в Scrollend, новом событии JavaScript , а также в документации MDN для scrollend .

Свойство text-decoration

Browser Support

  • Хром: 1.
  • Край: 12.
  • Фаерфокс: 1.
  • Сафари: 1.

Source

Свойство 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 года.

Browser Support

  • Хром: 48.
  • Край: 12.
  • Фаерфокс: 41.
  • Сафари: 10.1.

Source

Кроме того, включены логические свойства CSS overflow-inline и overflow-block . Это позволяет контролировать, что происходит, когда контент выходит за пределы ячеек, независимо от режима записи.

Browser Support

  • Хром: не поддерживается.
  • Край: не поддерживается.
  • Фаерфокс: 69.
  • Сафари: не поддерживается.

Source

Основные веб-показатели

Web Vitals может помочь вам количественно оценить удобство вашего сайта и определить возможности для его улучшения. Инициатива Web Vitals направлена ​​на упрощение ландшафта и помогает сайтам сосредоточиться на наиболее важных показателях — основных веб-показателях.

Interop 2025 включает метрики Largest Contentful Paint (LCP) и Interaction to Next Paint (INP) за счет реализации API LargestContentfulPaint и API синхронизации событий в браузерах. Метрика «Совокупный сдвиг макета» (CLS) не входит в область применения.

API-интерфейс ЛКП

Browser Support

  • Хром: 77.
  • Край: 79.
  • Фаерфокс: 122.
  • Сафари: не поддерживается.

Source

API синхронизации событий (для INP)

Browser Support

  • Хром: 96.
  • Край: 96.
  • Firefox: не поддерживается.
  • Сафари: не поддерживается.

Source

Веб-сборка (Wasm)

API WebAssembly позволяет загружать код WebAssembly — переносимый двоичный формат инструкций. Он может позволить вам выполнять такие действия, как запуск всего приложения блога , включая все требования к серверу, в браузере!

В этом году работа будет сосредоточена на следующих направлениях:

  • Встроенные строковые функции JavaScript: чтобы встроенные строковые функции WebAssembly отражали подмножество API строк JavaScript, чтобы их можно было вызывать без связующего кода JavaScript.
  • Интеграция буферов изменяемого размера: для интеграции WebAssembly в код JavaScript, использующий буферы изменяемого размера.

Удаление функций

В этом году проект предполагает удаление с платформы. События мутации устарели и заменены гораздо более производительным и широко доступным базовым API Mutation Observer API . Chrome удалил эти события в Chrome 126, и сейчас мы стремимся удалить их из всех браузеров.

Чтобы понять историю и почему эти события удаляются, прочтите «Мутационные события будут удалены из Chrome» .

Узнать больше

Описания полного списка возможностей можно найти в README проекта. Также прочтите сообщения других компаний, работающих над Interop 2025.