Изменение стиля 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 как плохую практику. Вот суть того, чего следует ожидать:

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

Firefox

Chrome

Safari

Исправление предупреждения 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 для элементов заголовка теперь содержит примечания по использованию, перечисленные выше.

Итог

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

Комментарии


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

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

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

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