Изменение стиля UA вложенного заголовка h1

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

Что изменится

Ранее в спецификации HTML был определён алгоритм начертания, присваивающий элементам <h1> неявный семантический уровень заголовка в зависимости от количества секционных элементов (<section>, <aside>, <nav> и <article>), в которые он был вложен.

При рендеринге браузера section > h1 имеет тот же font-size и margin, что и <h2>. section > section > h1 представлялся как <h3>, и так далее. Рендеринг по умолчанию был реализован в браузерах в их UA стилях, но не на уровне заголовков в Дереве доступности (используемого устройствами чтения с экрана). Веб-сайты начали использовать секционные элементы, но не ожидали получить автоматические уровни заголовков от алгоритма контура.

В целом, это создавало путаницу в том, где разработчики могли использовать элементы <h1>, инструменты по-разному обрабатывали HTML, а алгоритм контура считался проблематичным. Алгоритм контура был удалён из спецификации HTML в 2022 году, но правила таблицы стилей UA всё ещё остаются. Правила в стилях по умолчанию — это то, что разработчики браузеров начали удалять сейчас.

/* где x это :is(article, aside, nav, section) */
x h1 { margin-block: 0.83em; font-size: 1.50em; }
x x h1 { margin-block: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block: 2.33em; font-size: 0.67em; }

Например:

<body>
  <h1>Level 1</h1>
  <section>
    <h1>Level 2</h1>
    <section>
      <h1>Level 3</h1>
      <section>
        <h1>Level 4</h1>
      </section>
    </section>
  </section>
</body>

В старых UA стилях это выглядит так:

Level со 2-го по 4-й постепенно уменьшаются.
Level со 2-го по 4-й постепенно уменьшаются.

Новые UA стили будут выглядеть так:

Level с 1 по 4 имеют одинаковый размер.
Level с 1 по 4 имеют одинаковый размер.

UA стили вашего браузера:

See the Pen

Что ожидать и когда

Наряду с изменениями в стилях браузеров, инструменты аудита страниц, такие как Lighthouse, теперь отмечают случаи использования <h1> без определённого font-size как плохую практику. Вот суть того, чего следует ожидать:

  • <h1> больше не будет адаптировать свой стиль на основе окружающих секционных элементов, таких как <section>, <article>, <nav> и <aside>. Таблица стилей UA будет применять один и тот же стиль к <h1> без неявных стилей, понижающих <h1> до уровня <h2>, <h3> и т. д.
  • Lighthouse выдаст предупреждение, если <h1> используется без определения font-size и вложен в <section>, <article>, <nav> или <aside>. Предупреждение Lighthouse об устаревании, на которое следует обратить внимание, — H1UserAgentFontSizeInSection. Подсказки для решения этой проблемы описаны в следующем разделе.

Изменения браузеры будут внесены в соответствии с установленным графиком:

Firefox

  • С 31 марта 2025 года в Firefox для 50% пользователей бета-версии 138 будут внесены изменения, удаляющие стили UA для h1 в article, aside, nav или section на десктопах. Планируется, что в стабильном выпуске Firefox 138 изменения будут внедрены для 5% пользователей, затем их количество увеличится до 50%, после чего они будут внедрены на всех платформах в Firefox 140. Баг 1885509.
  • Начиная с Firefox 136, разработчики будут наблюдать предупреждение в консоли для h1 в article/aside/nav/section без заданных font-size или margin: Баг 1937568.
  • Чтобы протестировать в Firefox новое поведение, установите layout.css.h1-in-section-ua-styles.enabled на false в about:config.

Chrome

  • Начиная с версии 136, Chrome показывает предупреждения об устаревании для <h1> внутри элементов <section>, <article>, <nav> и <aside>, и когда <h1> использует font-size и margin по умолчанию. Пометка об устаревании в Chromium снизит баллы Lighthouse за "Best Practices": issue 394111284.

Safari

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

Исправление предупреждения Lighthouse

Недавно Lighthouse унаследовал проверку, основанную на предупреждениях DevTools от Chromium, для сайтов, которые не указывают размер шрифта для элементов <h1> в <section>, <article>, <nav> или <aside>. Новое правило называется H1UserAgentFontSizeInSection и появилось с марта после добавления предупреждений об устаревании. Если вы видите предупреждение <h1>, убедитесь, что применяете явные font-size и margin для <h1>. Вот несколько рекомендуемых к использованию стилей:

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

Чтобы не переписывать другие правила стиля, нацеленные на <h1>, можно использовать :where(), имеющий нулевую специфичность:

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

Страница MDN для элементов заголовка теперь содержит примечания по использованию, перечисленные выше.

Итог

Обратите внимание на следующие моменты:

  • Не полагайтесь на стандартные стили браузера для передачи иерархии заголовков. Явно определите иерархию документа, используя <h2> для заголовков второго уровня, <h3> для третьего уровня и т. д.
  • Всегда определяйте font-size и margin для элементов <h1>.
  • Подумайте об обновлении сброса CSS, учитывающего это изменение.
  • Проведите аудит сайта с помощью Lighthouse и DevTools, чтобы проверить, не появляется ли предупреждение об устаревании.
  • Ознакомьтесь с примечаниями по использованию в документации MDN для заголовков разделов HTML.

Комментарии


Предыдущая Статья

Селектор :root и CSS переменные

Следующая Статья

Использование currentColor