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

Rachel Andrew

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

browserslist-config-baseline

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

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

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

Дополнительную информацию можно найти в статье Использование базовой линии с браузерами .

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

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

В 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 внедряет всплывающие карточки в свою среду разработки WebStorm JavaScript и TypeScript.

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

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

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

Кроме того, ряд функций, которые, как вы можете быть уверены, станут доступны в Baseline Newly совсем скоро, поскольку они включены в проект Interop 2025. Подробнее обо всех функциях, включённых в него, можно узнать в статье «Interop2025: ещё один год улучшений веб-платформы» .

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

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

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

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

Позиционирование якоря реализовано в Chrome 125. Оно позволяет привязать положение элемента к якорю, например, при открытии подсказки с помощью кнопки.

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

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

API LCP

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

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

Interop 2025 включает метрики «Отрисовка самого большого содержимого» (LCP) и «Взаимодействие со следующей отрисовкой» (INP) за счет реализации API LargestContentfulPaint и API синхронизации событий в разных браузерах.

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

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

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

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

Псевдоэлемент ::marker также является частью разработки Interop 2025. Псевдоэлемент ::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> при наличии совпадений в результатах поиска на странице и until-found значения атрибута HTML hidden к базовому значению. Это недавно стало доступно. Это скрывает элемент до тех пор, пока он не будет найден с помощью функции поиска на странице браузера или пока к нему не будет выполнен прямой переход по фрагменту 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, поскольку мы продолжим публиковать объявления о новых инструментах, а также обучающие материалы, которые помогут вам воспользоваться всеми преимуществами, которые может предложить Интернет.