Что нового в сети

Rachel Andrew

Опубликовано: 20 мая 2025 г.

На конференции Google I/O 2025 в рамках презентации «Что нового в веб-разработке» были представлены все анонсы Baseline, а также некоторые из функций, которые стали частью Baseline в этом году. Это был потрясающий год для веб-разработки, и в этой статье мы собрали все упомянутые новости, а также ссылки для получения дополнительной информации о Baseline.

Панель управления веб-платформы и веб-функции.

В 2024 году мы объявили о первоначальном запуске панели мониторинга веб-платформы , которая использует набор данных web-features и позволяет изучить все функции, входящие в состав Baseline.

Данные о веб-функциях теперь полны, все функции платформы отображены. По мере добавления новых функций в базовую версию каждый месяц данные обновляются, и вся эта информация отображается на панели управления.

Инструменты, которые помогут вам определить свой собственный базовый целевой уровень.

Хотя вы можете основывать свою политику поддержки браузеров на постоянно меняющихся базовых показателях (например, как у британского агентства Clearleft ), вы также можете установить фиксированный целевой показатель на основе базового года. Теперь вы можете использовать собственные данные о пользователях, а также данные о функциях веб-сайта, чтобы определить оптимальный для вас целевой показатель .

В прошлом году на конференции I/O мы объявили о том, что компания RUMvision интегрирует Baseline в свой продукт, и теперь эта интеграция запущена.

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

Вы также можете использовать данные Google Analytics, чтобы наглядно увидеть, какой процент ваших пользователей поддерживает каждый из базовых показателей, с помощью нового инструмента проверки базовых показателей Google Analytics .

Это лишь два из постоянно пополняющегося набора инструментов, которые помогут вам сопоставить ваши реальные пользовательские данные с базовым уровнем.

Группа Web DX Community недавно выпустила расширение для Netlify , которое демонстрирует поддержку различных базовых лет и широко доступно на ваших сайтах, чтобы помочь вам определить, на что ориентироваться в ваших инструментах сборки. Вскоре появятся интеграции с продуктом Cloudflare Observatory RUM и Contentsquare.

Интегрируйте данные со своими собственными инструментами.

Данные о веб-функциях находятся в открытом доступе и доступны для ваших собственных интеграций. Мы стараемся упростить этот процесс.

Используйте API панели управления веб-платформы или получайте данные о веб-функциях непосредственно из пакета npm .

Теперь вы можете сопоставлять версии браузеров с целевым значением Baseline, используя модуль baseline-browser-mapping от сообщества W3C WebDX. Этот модуль можно использовать либо в серверной среде JavaScript, либо путем загрузки файлов JSON или CSV, которые ежедневно обновляются из репозитория.

Эти данные включают сопоставления не только для основного набора браузеров Baseline, но и для таких браузеров, как Samsung Internet, Opera, UC Browser и Android Webview.

Узнайте, поддерживаются ли эти функции вашей целевой системой Baseline.

Базовая информация теперь доступна на большинстве страниц MDN и Can I Use, а также на панели управления веб-платформой и в статьях на web.dev и CSS Tricks. Однако для получения всей этой информации вам потребуется обратиться в службу поддержки. Было бы гораздо полезнее, если бы базовая информация отображалась в вашей IDE по мере написания кода, а также во всех других используемых вами инструментах.

Мы рады сообщить вам, что многие ключевые инструменты теперь имеют встроенную поддержку базовых функций или легко интегрируются с ними.

browserslist-config-baseline

Многие инструменты, такие как Babel и PostCSS, используют browserslist для определения того, какие браузеры следует поддерживать.

Совместно с группой разработчиков WebDX и членами сообщества команда Chrome помогла выпустить новый инструмент под названием browserslist-config-baseline . Он позволяет настраивать целевые объекты browserslist в базовых терминах, таких как «широко доступны» или «базовые годы».

Благодаря этому любой инструмент, принимающий в качестве целевого объекта browserslist, теперь может быть представлен в терминах Baseline.

Подробнее см. в разделе «Использование базовых настроек с browserslist» .

Базовый уровень в линтерах — ESLint и Stylelint

Использование Baseline с линтерами стало возможным благодаря нескольким новым инструментам в этой области, начиная с ESLint для CSS .

В Baseline ESLint есть правило use-baseline . Вы можете установить его на предпочитаемую вами целевую версию Baseline, и он будет предупреждать вас при использовании любых функций, которые новее вашей целевой версии. Вы можете выбрать способ устранения этих предупреждений: либо заменив эту функцию примитивами, либо подавив предупреждение линтера, что является вполне допустимым решением, если вы уверены, что безопасно используете передовую функцию, например, если это прогрессивное улучшение.

По умолчанию ESLint не выдает предупреждений об использовании новых функций внутри блоков @supports , поскольку неподдерживаемые браузеры все равно их не будут обрабатывать.

Для проверки HTML-кода также существует плагин от сообщества под названием html-eslint.

Stylelint официально поддерживает плагин под названием stylelint-plugin-use-baseline . Это правило работает точно так же, как правило ESLint для CSS, но выполняется в Stylelint.

Многие линтеры также имеют плагины для IDE, поэтому вы можете получать мгновенную обратную связь о состоянии базовой версии во время кодирования с помощью волнистых подчеркиваний.

Базовый уровень в VS Code и JetBrains WebStorm

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

Но понять, действительно ли эта функция безопасна в использовании, довольно сложно — нужно мысленно оценить, отсутствуют ли в этом списке какие-либо основные браузеры и насколько новая версия этого браузера.

Для решения этой проблемы мы заключили партнерское соглашение с самой популярной IDE, используемой миллионами веб-разработчиков, VS Code, чтобы интегрировать данные Baseline непосредственно в эти всплывающие подсказки.

Теперь при наведении курсора на функцию отобразится информация о том, считается ли эта функция базовой и как долго она будет использоваться, или же некоторые основные браузеры еще не полностью ее реализовали.

Поддерживаются свойства CSS, элементы HTML и атрибуты HTML. Подробнее см. в статье «Visual Studio Code теперь поддерживает Baseline» .

Благодаря этой интеграции, любые IDE на базе VS Code также смогут использовать эти всплывающие подсказки.

Кроме того, мы рады сообщить, что компания JetBrains внедряет всплывающие подсказки (hovercards) в свою среду разработки WebStorm для JavaScript и TypeScript.

Интернет развивается быстрее, чем когда-либо.

Мы надеемся, что Baseline поможет вам воспользоваться преимуществами того, что совместимость веб-технологий развивается быстрее, чем когда-либо.

С помощью панели управления веб-платформой вы можете увидеть все функции, ставшие базовыми и доступными за последние двенадцать месяцев — начиная с Google I/O 2024.

Также есть ряд новых функций, которые, как вы можете быть уверены, скоро станут доступны, поскольку они включены в проект Interop 2025. Вы можете прочитать обо всех включенных функциях в Interop2025: еще один год улучшений веб-платформы .

режимы письма боком

Мы уже видели, как одна функция стала доступной в базовой версии — значения sideways-rl и sideways-lr для свойства CSS writing-mode . Если вы используете вертикальный режим письма исключительно в целях компоновки, скорее всего, лучше использовать значения sideways.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Позиционирование якоря

Функция позиционирования по якорю (anchor positioning) появилась в Chrome версии 125. Она позволяет привязать положение элемента к якорю, например, при открытии всплывающей подсказки с помощью кнопки.

Теперь он включен в Interop 2025, поэтому мы должны увидеть его в составе Baseline в этом году.

Основные веб-функции: LCP и INP

LCP API

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

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

В Interop 2025 реализованы метрики Largest Contentful Paint (LCP) и Interaction to Next Paint (INP) за счет внедрения API LargestContentfulPaint и API Event Timing во всех браузерах.

Улучшения элемента <details>

Сам элемент <details> уже широко доступен в базовой версии. Он был включен в Interop 2025, поскольку содержит ряд функций, которые делают виджеты раскрытия информации с элементом <details> более полезными.

Элемент <details> содержит элемент <summary> , который является видимой частью страницы, когда элемент <details> свернут. За пределами элемента <summary> находится содержимое элемента <details> , которое скрыто до тех пор, пока пользователь не щелкнет по элементу summary.

В рамках конференции Interop 2025 одной из задач обеспечения совместимости является скрытие контента с помощью content-visibility вместо display , что означает, что если контент не развернут, он вообще не будет отображаться.

Также в рамках проекта Interop 2025 используется псевдоэлемент ::marker . Псевдоэлемент ::marker позволяет стилизовать треугольник раскрытия элемента <summary> .

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Затем еще один псевдоэлемент — ::details-content .

::details-content представляет собой содержимое — часть элемента details, которая разворачивается и сворачивается, а также позволяет настраивать её внешний вид.

[open]::details-content {
  border: 5px dashed hotpink;
}

Также появились некоторые приятные улучшения, такие как автоматическое разворачивание элемента <details> при поиске по содержимому страницы и добавление в Baseline нового значения атрибута HTML hidden , которое скрывает элемент until-found пор, пока он не будет найден с помощью поиска по содержимому страницы в браузере или пока на него не будет осуществлен прямой переход по фрагменту URL-адреса.

CSS @scope

Правило CSS @scope позволяет ограничить область действия селекторов. Указав корневой элемент с помощью @scope , любые правила стилей, вложенные в это правило, будут применяться только к этому дереву DOM.

Например, если вы хотите воздействовать только на элементы <img> внутри элемента с классом .card , то .card станет корневым элементом области видимости.

@scope (.card) {
    img {
        border-color: green;
    }
}

Подробнее об этом можно узнать в статье «Ограничьте область действия ваших селекторов с помощью правила CSS @scope at-rule» .

scrollend

Ещё одна функция, которая упрощает и улучшает интерфейсы прокрутки, — это scrollend . Без события scrollend нет надёжного способа определить, что прокрутка завершена.

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

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

document.onscrollend = event => {…}

Больше примеров смотрите в Scrollend, новом событии JavaScript .

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

И наконец, что не менее важно, переходы между представлениями являются частью Interop 2025. Работа включает в себя переходы между представлениями в рамках одного документа, то есть для одностраничных приложений, а также классы переходов между представлениями.

Следите за обновлениями на панели мониторинга Interop 2025, чтобы увидеть, как развивается проект по мере продвижения года.

Функции, включенные в Interop 2025, — не единственные нововведения, которые войдут в состав Baseline в этом году, но их включение в проекты дает нам довольно четкое представление о том, что они являются приоритетными и скоро появятся.

Мы только начинаем

Для Baseline это был захватывающий год, и мы значительно продвинулись с момента наших прошлогодних анонсов. Сейчас мы находимся на этапе завершения заполнения данных о функциях веб-приложений. Это открыло шлюзы и позволило создавать инструменты для разработчиков. Мы действительно только начинаем, и если у вас есть продукт или инструмент с открытым исходным кодом, которому было бы полезно включить эти данные, мы будем рады узнать о нем.

Следите за обновлениями на web.dev , мы продолжим публиковать объявления о новых инструментах, а также обучающие материалы, которые помогут вам в полной мере использовать все возможности веб-технологий.