Кроссбраузерность по умолчанию: как работают резервные варианты Baseline в Modern Web Guidance

Tara Agyemang

Дата публикации: 12 ноября 2026 г.

Попросите ИИ-агента создать подсказку или модальное диалоговое окно и внимательно изучите написанный им код. В большинстве случаев агент использует JavaScript, чтобы воссоздать функции, встроенные в браузер. Если вы попросите агента использовать более новые функции CSS или HTML, он часто пропускает проверку поддержки функций и резервные варианты. В результате пользователи неподдерживаемых браузеров видят неработающую страницу.

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

Почему агенты кодирования неправильно понимают поддержку браузеров без руководства

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

• Использование устаревшего кода по умолчанию. Данные для обучения моделей содержат множество устаревших шаблонов, и оценки Modern Web Guidance показывают, что модели по-прежнему рекомендуют многие из них. Агенты часто пишут сложный код JavaScript или добавляют внешние библиотеки, когда можно использовать встроенную функцию HTML или CSS.
• Использование новых функций без подстраховки. Когда вы просите агента использовать новую веб-функцию, он обычно пишет код для поддерживающих ее браузеров и на этом останавливается. Он пропускает обнаружение функций и не использует резервные варианты, что приводит к сбою страницы в браузерах, которые не поддерживают эту функцию.

Данные из набора для оценки Modern Web Guidance показывают, насколько распространена эта проблема. Для функций, которые пока работают не во всех основных браузерах, набор для оценки проверяет обнаружение функций, правила @supports, резервные варианты или условные полифилы. Модели без инструкций проходят эти проверки только в 43 % случаев. С включенным Modern Web Guidance этот показатель увеличивается до 87 %.

Как базовые данные помогают формировать рекомендации

Чтобы определить, когда веб-функции требуется резервный вариант, Modern Web Guidance использует Baseline. Baseline отслеживает поддержку в основных браузерах (Chrome, Edge, Firefox и Safari на компьютерах и мобильных устройствах) и присваивает им один из трех статусов:

• Baseline Widely available (Базовый уровень: широкая доступность). Функция работает во всех основных браузерах не менее 30 месяцев.
• Baseline Newly available (Недавно добавлено в Baseline). Функция работает во всех основных браузерах, начиная с даты, когда поддержка была добавлена в последний из них.
• Ограниченная доступность. Функция пока поддерживается не во всех основных браузерах.

Каждое руководство Modern Web Guidance содержит встроенный статус Baseline и данные о версии браузера из пакета web-features. Когда агент загружает руководство, он получает точный статус поддержки функции, даты выпуска и версии браузера вместе с инструкциями по реализации. Пример:

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

По умолчанию Modern Web Guidance следует двум правилам, основанным на этих данных:

• Базовые широкодоступные функции. Агент использует их напрямую, без дополнительного кода для обнаружения функций или резервного кода. Это правило позволяет поддерживать базу кода в порядке и избегать ненужных обходных путей.
• Новые и ограниченно доступные функции Baseline. Руководства по этим функциям включают проверенную резервную стратегию. Ваш агент использует современную функцию, если она поддерживается, и предоставляет чистый резервный вариант для других браузеров.

Четыре резервных шаблона, которые Modern Web Guidance использует на практике

Не для каждой веб-функции требуется один и тот же тип резервного варианта. Modern Web Guidance сопоставляет каждую функцию с одним из четырех резервных подходов в зависимости от того, как функция ведет себя в неподдерживаемых браузерах:

Прогрессивное улучшение без резервного кода

Некоторые современные функции улучшают типографику, анимацию или скорость загрузки страницы, не меняя ее работу. Если браузер не распознает эти функции, он игнорирует их и отображает остальную часть страницы в обычном режиме.

Например, объявление CSS text-wrap: balance (Baseline Newly available) выравнивает длину строк в заголовках.

.balanced {
  text-wrap: balance;
}

Speculation Rules API (ограниченная доступность) выполняет предзагрузку или предварительную отрисовку страниц, которые пользователь может открыть. Неподдерживаемые браузеры игнорируют блоки <script type="speculationrules"> и нераспознанные объявления CSS.

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Благодаря этому агент может добавлять эти функции напрямую без дополнительного резервного кода.

Определение функций CSS с помощью правила @supports

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

Например, запросы к закрепленному контейнеру (container-type: anchored, ограниченное количество) в позиционированной подсказке позволяют переворачивать стрелку подсказки, когда она переворачивается у края области просмотра. В браузерах, которые не поддерживают запросы к закрепленным контейнерам, стрелка не может определить переворот и может указывать в неправильном направлении. Modern Web Guidance рекомендует агенту обернуть стили стрелок в правило @supports (container-type: anchored), чтобы стрелка по умолчанию появлялась только в браузерах, которые также поддерживают правило переворота @container anchored().

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

Легкий пользовательский код JavaScript

Если интерактивная функция HTML поддерживается не во всех основных браузерах, не обязательно использовать стороннюю библиотеку. Для автономных взаимодействий Modern Web Guidance предоставляет короткий резервный код JavaScript без зависимостей, который выполняется после проверки функций.

Например, атрибут closedby="any" элемента <dialog> (ограниченная доступность) позволяет пользователям закрывать модальное диалоговое окно, нажимая на фон. Для браузеров, которые не поддерживают атрибут closedby, в руководстве есть небольшой прослушиватель кликов, который сначала проверяет объект HTMLDialogElement.prototype:

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

Полифилы, загружаемые по условию

Для более крупных функций платформы, таких как позиционирование привязки CSS (ограниченная доступность) или API Temporal (ограниченная доступность), писать резервный код вручную нецелесообразно. В то же время, если вы будете добавлять полифил для каждого пользователя, это увеличит время скачивания в браузерах, которые уже поддерживают эту функцию.

В таких случаях Modern Web Guidance рекомендует агенту сначала проверить поддержку и динамически загрузить проверенный полифил с помощью выражения import() из сборщика или CDN. Браузеры, поддерживающие эти функции, не скачивают дополнительный код, а более старые браузеры получают полифил по запросу.

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

Настройте целевую поддержку браузеров для проекта

По умолчанию Modern Web Guidance считает, что функции Baseline Widely available можно использовать без резервных вариантов. Для функций Baseline Newly available и Limited availability требуются резервные варианты.

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

Вы можете определить собственные правила поддержки браузеров в файле AGENTS.md или CLAUDE.md проекта:

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

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

Протестируйте как современный, так и резервный путь

Написание кроссбраузерного кода – это только половина дела. Также необходимо протестировать как современный путь выполнения, так и резервный в реальных браузерах.

Если вы тестируете только в одном браузере, вы проверяете только одну ветвь своего кода. Например, Chrome и Firefox выполняют нативный атрибут closedby="any" в элементе <dialog>, а Safari – резервный код JavaScript для клика за пределами элемента. Если вы проверяете диалоговое окно только в Chrome, резервный прослушиватель не будет запущен во время тестирования.

Чтобы проверить оба пути выполнения, подключите агент программирования к нескольким браузерным движкам одновременно:

• Инструменты разработчика Chrome для агентов. Подключите агент к Chrome, чтобы проверять макет, журналы консоли и поведение во время выполнения.
• Сервер MCP для инструментов разработчика в Firefox. Подключите агент к активному экземпляру Firefox через WebDriver BiDi.
• MCP-сервер Safari. Подключите агента к Safari с помощью встроенной команды safaridriver --mcp.

Если подключить все три инструмента, агент сможет открывать вашу страницу в Chrome, Firefox и Safari в рамках одного рабочего процесса. Затем он может убедиться, что и нативная функция, и резервный вариант работают должным образом.

Начало работы с Modern Web Guidance

Чтобы добавить Modern Web Guidance в проект, запустите интерактивный установщик из каталога проекта:

npx modern-web-guidance@latest install

Если у вас установлена более ранняя версия, выполните команду обновления, чтобы перейти на версию 1.0:

npx modern-web-guidance@latest update

Вы также можете установить Modern Web Guidance через магазины плагинов для Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code и Grok.

Дополнительную информацию можно найти в следующих ресурсах:

• Документация по Modern Web Guidance
• Хранилище GitHub
• Панель оценки
• Документация по Baseline на сайте web.dev