Эта страница переведена с помощью Cloud Translation API.

Создание базовых инструментов с помощью пакета веб-функций

Jeremy Wagner

Rick Viscomi

Опубликовано: 12 сентября 2025 г.

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

Панель мониторинга состояния веб-платформы (Web Platform Status Dashboard) является одним из источников данных для этих функций и предоставляет HTTP-API с возможностью запросов . Запросы к этому источнику данных по запросу нецелесообразны для всех инструментов. Для многих случаев использования инструментов пакет npm web-features — более надёжная и практичная версия данных веб-функций, доступная локально. В этом руководстве показано, как использовать пакет web-features для разработки собственных базовых инструментов.

Начните работу с пакетом `web-features`

Сначала установите пакет как зависимость в вашем проекте:

npm install web-features

После установки импортируйте один или несколько именованных экспортов из пакета web-features в свой проект:

import { features, groups, browsers, snapshots } from 'web-features';

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

features : Массив объектов, каждый из которых представляет веб-функцию. Это экспорт, который вы будете использовать чаще всего.
browsers : массив объектов, описывающих браузеры.
groups : массив объектов, определяющий логическую группировку функций. Они полезны, если вы хотите охватить подмножество функций веб-платформы, например, CSS, JavaScript и более узкие группы.
snapshots : содержат версии ECMAScript соответствующих функций JavaScript, таких как ES2023, ES2022 и другие версии ECMAScript.

Экспорт функций предоставляет следующие свойства для построения базового инструментария:

id : уникальный идентификатор объекта. Например, идентификатор CSS Grid — "grid" . Примечание : это не свойство объекта данных, а ключ объекта.
compat_features : Массив индивидуальных ключей BCD, включенных в функцию.
name : понятная человеку строка имени функции, например "Container Queries" .
description : краткое описание функции.
group : Группа, к которой принадлежит объект. Соответствует данным группы, найденным в экспорте groups .
baseline : Базовый статус объекта. Может принимать одно из трёх значений:
1. false : статус функции — Ограниченная доступность.
2. "low ": функция доступна на базовом уровне.
3. "high »: функция доступна на базовом уровне.
4. baseline_high_date : дата, когда функция стала доступна по базовой версии. Примечание : эта информация недоступна, если функция не доступна по базовой версии.
5. baseline_low_date : дата, когда функция стала базовой и новой. Примечание : эта функция недоступна для функций с ограниченной доступностью.

Следующий пример представляет собой полный объект данных для функции подсетки CSS :

"subgrid": {
  "caniuse": "css-subgrid",
  "compat_features": [
    "css.properties.grid-template-columns.subgrid",
    "css.properties.grid-template-rows.subgrid"
  ],
  "description": "The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.",
  "description_html": "The <code>subgrid</code> value for the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties allows a grid item to inherit the grid definition of its parent grid container.",
  "group": "grid",
  "name": "Subgrid",
  "spec": "https://drafts.csswg.org/css-grid-2/#subgrids",
  "status": {
    "baseline": "low",
    "baseline_low_date": "2023-09-15",
    "support": {
      "chrome": "117",
      "chrome_android": "117",
      "edge": "117",
      "firefox": "71",
      "firefox_android": "79",
      "safari": "16",
      "safari_ios": "16"
    }
  }
}

Экспорт groups предоставляет данные о группах объектов со следующей структурой:

id : уникальный идентификатор группы. Например, идентификатор CSS-функций — «css». Примечание: это не свойство объекта groups. Это сам ключ объекта.
name : понятное для человека название группы.
parent : идентификатор родительской группы. Недоступно, если у группы нет родительской группы.

Примеры

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

Найдите базовый статус для определенной функции

import { features } from 'web-features';

function getBaselineStatus (featureId) {
  return features[featureId]?.status.baseline;
}

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

Найдите базовый статус для конкретного ключа BCD.

BCD означает browser-compat-data — проект, поддерживаемый MDN для каталогизации поддержки функций в разных браузерах. Ключ BCD соответствует конкретной функции, например, конкретному значению свойства CSS или поведенческой подфункции, определяемой спецификацией.

Проект web-features группирует связанные ключи BCD в массив compat_features для каждой функции. Иногда требуется базовый статус одного ключа BCD, а не общий базовый статус всей функции. Например, если вы создаёте CSS-линтер и хотите узнать, совместима ли пара «свойство-значение» с основными браузерами, данные на уровне функции слишком грубые. Это происходит, поскольку пакет агрегирует каждую функцию по всем входящим в неё ключам BCD, а некоторые ключи поддерживаются браузерами лучше, чем другие.

Чтобы узнать базовый статус ключа BCD, проверьте свойство status.by_compat_key объекта feature (доступно в web-features 3.6.0 и более поздних версиях):

import { features } from 'web-features';

function getBaselineStatus (featureId, bcdKey) {
  return features[featureId]?.status.by_compat_key[bcdKey];
}

Например, вывод getBaselineStatus('outline', 'css.properties.outline') следующий:

{
  "baseline": "low",
  "baseline_low_date": "2023-03-27",
  "support": {
    "chrome": "94",
    "chrome_android": "94",
    "edge": "94",
    "firefox": "88",
    "firefox_android": "88",
    "safari": "16.4",
    "safari_ios": "16.4"
  }
}

Сортировать объекты по их базовому статусу

В этом примере выполняется итерация по каждому объекту в объекте features и сортировка каждого из них в массив по его базовому статусу.

import { features } from "web-features";

const webFeatures = Object.values(features);

const widelyAvailable = webFeatures.filter(feature => {
  return feature.status.baseline === 'high';
});

const newlyAvailable = webFeatures.filter(feature => {
  return feature.status.baseline === 'low';
});

const limitedAvailability = webFeatures.filter(feature => {
  return feature.status.baseline === false;
});

Этот пример иллюстрирует работу со свойством status.baseline в вашем инструменте. Например, этот подход можно использовать в веб-приложении для отображения списка всех веб-функций по их базовому статусу.

Найти все функции в группе

До сих пор во всех показанных примерах использовался экспорт features , но экспорт groups логически упорядочивает все объекты по группам. Это означает, например, что вы можете найти все объекты, входящие в состав View Transitions:

import { features, groups } from 'web-features';

const groupKeys = Object.keys(groups);
const featuresData = Object.values(features);

const viewTransitionsGroup = groupKeys.find(groupKey => {
  return groupKey === 'view-transitions';
});

const viewTransitionsFeatures = featuresData.filter(feature => {
  return feature.group === viewTransitionsGroup;
});

Пересечение между features и group экспортами позволяет сузить поиск веб-функций по группе, к которой они принадлежат.

Собираем все вместе

Вы можете использовать поисковые запросы для создания полезных инструментов, например, для создания CSS-линтера.

CSS-линтеры оценивают at-правила, псевдоэлементы, свойства и пары «свойство-значение». Для базового линтера проверяйте статус каждого токена по его ключу BCD, а не по родительскому признаку.

Парсер, такой как CSSTree, токенизирует CSS, превращая таблицу стилей в абстрактное синтаксическое дерево (AST). В следующем примере показано правило CSS, использующее универсальный селектор класса и объявление стиля:

.foo {
  word-break: auto-phrase;
}

AST будет выглядеть примерно так:

{
  "type": "StyleSheet",
  "children": [
    {
      "type": "Rule",
      "prelude": {
        "type": "SelectorList",
        "children": [
          {
            "type": "Selector",
            "children": [
              {
                "type": "ClassSelector",
                "name": "foo"
              }
            ]
          }
        ]
      },
      "block": {
        "type": "Block",
        "children": [
          {
            "type": "Declaration",
            "important": false,
            "property": "word-break",
            "value": {
              "type": "Value",
              "children": [
                {
                  "type": "Identifier",
                  "name": "auto-phrase"
                }
              ]
            }
          }
        ]
      }
    }
  ]
}

Если при просмотре AST вы обнаружите объявление свойства, сопоставьте его имя с соответствующим ключом BCD, чтобы проверить его базовый статус. BCD классифицирует свойства CSS в объекте css.properties , поэтому соответствующий ключ BCD — css.properties.word-break .

Затем найдите функцию, связанную с этим ключом BCD, и проверьте ее статус.

// Assuming we only know the BCD key and not the feature ID.
const bcdKey = 'css.properties.word-break';
const [featureId, feature] = Object.entries(features).find(([id, feature]) =>
  feature.compat_features?.includes(bcdKey)
) || [];
const status = feature?.status.by_compat_key[bcdKey];

Базовый статус свойства word-break следующий:

{
  "baseline": "high",
  "baseline_high_date": "2018-03-30",
  "baseline_low_date": "2015-09-30",
  "support": {
    "chrome": "44",
    "chrome_android": "44",
    "edge": "12",
    "firefox": "15",
    "firefox_android": "15",
    "safari": "9",
    "safari_ios": "9"
  }
}

Статус базовой линии "high" означает, что свойство широко доступно, поэтому вашему линтеру не нужно выдавать предупреждение. Далее проверьте значение свойства.

AST показывает, что значение этого свойства — auto-phrase . Чтобы получить соответствующий ключ BCD, добавьте это значение к ключу BCD родительского свойства: css.properties.word-break.auto-phrase .

Примечание: Этот метод работает только со значениями, указанными в спецификации свойства. У общих типов значений, таких как числа или названия цветов, нет собственных ключей BCD. Если web-features не возвращает данные для заданного ключа BCD, проверять нечего, поэтому игнорируйте его.

В этом случае web-features показывают, что статус пары свойство-значение word-break: auto-phrase не является Baseline:

{
  "baseline": false,
  "support": {
    "chrome": "119",
    "chrome_android": "119",
    "edge": "119"
  }
}

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

Примеры из реальной жизни

В предыдущих примерах показаны основные способы использования пакета web-features . Уже существует ряд инструментов, использующих эти данные. Например:

eslint-css использует пакет web-features в своем правиле use-baseline для проверки определенных функций.
Всплывающие карточки в Visual Studio Code используют пакет web-features для отображения базовой информации о функциях CSS и HTML .
MDN использует данные web-features в баннерах на большинстве страниц функций (например, abs() ) для сообщения своего базового статуса.

Существует множество примеров того, как этот источник данных можно использовать для создания базовых инструментов, и мы надеемся, что ваш проект станет одним из них!