Skip to content

baseline.md

Latest commit

 

History

History
96 lines (74 loc) · 4.59 KB

baseline.md

File metadata and controls

96 lines (74 loc) · 4.59 KB
Raw

Baseline

Когда вы пишете о новой возможности веб платформы, можно показать, как она работает в основных браузерах. Так читатель поймёт, готова ли фича для использования в проектах.

Мы используем для этого Baseline.

Вот как отображается информация о Baseline в Доке:

Пример отображения информации о Baseline

Как подключить Baseline к статье

Чтобы добавить Baseline к статье, надо указать baseline-конфиг в заголовке. Например:

baseline:
  <!-- имя группы, обязательное поле -->
  - group: <baseline-group>
    features:
      <!-- список названий фич -->
      - <baseline-feature1>
      - <baseline-feature2>

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

Все фичи, которые поддерживает Baseline, можно найти в YML-файлах проекта web-features. Документация на английском

Как найти нужную конфигурацию

Проект обладает удобным поиском web-features-explorer, с помощью которого легко найти нужный конфиг.

Для примера, найдём конфигурацию для доки о CSS свойстве display. Новейшие значения этого свойства: flex и grid. Их и будем использовать:

  1. С помощью поиска находим страницу свойства.
  2. Переходим по ссылке «Web-features entry: dist» внизу страницы.
  3. Копируем имя файла конфигурации (без расширения) и вставляем в заголовок статьи как значение поля group.
  4. Копируем значения свойств в списке compat_features и вставляем в заголовок статьи как значение поля features.
baseline:
  - group: flexbox
    features:
      - css.properties.display.flex
      - css.properties.display.inline-flex
  1. Добавляем также нужные свойства из конфига файла grid:
baseline:
  - group: grid
    features:
      - css.properties.display.grid
      - css.properties.display.inline-grid

Итоговая конфигурация:

baseline:
  - group: flexbox
    features:
      - css.properties.display.flex
      - css.properties.display.inline-flex
  - group: grid
    features:
      - css.properties.display.grid
      - css.properties.display.inline-grid

Готово!

Как проверить конфигурацию

Убедиться в том, что конфигурация Baseline указана верно, поможет локальный запуск сайта. О том, как запустить Доку локально, читайте в инструкции. Если в конфигурации нет ошибок, baseline-плашка будет отображаться в конце статьи.

Дополнительный способ проверки — поиск с помощью npm-пакета web-features:

  1. Установите пакет:
npm install web-features
  1. Перейдите в каталог node_modules/web-features
  2. Выполните поиск по полю group в файле data.json
  3. Если группа указана верно, она будет соответствовать объекту c полями:
{
  "compat_features": ..,
  "description": ..,
  "group": ..,
  "name": ..,
  "spec": ..,
  "status": ..
}