Свой сброс стилей: что браузер рисует без спроса

Со стилями браузера вы уже встречались, когда разбирали смысловые теги и ориентиры: <section> там оказался блоком, потому что так записано в листе стилей браузера. Это набор обычных правил CSS, которые действуют на любой странице раньше ваших. Какими им быть, описывает стандарт HTML в разделе об отрисовке, и современные браузеры в главном ему следуют.

Проверим на странице, в которой нет ни одного <style>: заголовок, список из одного пункта и абзац. Прогноз: окажутся ли все четыре числа нулями — а если нет, то какими?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Заголовок</title>
</head>
<body><h1>Заголовок</h1><ul><li>Пункт</li></ul><p>Абзац</p></body>
</html>

measure("h1", "font-size");
measure("h1", "margin-top");
measure("ul", "padding-left");
measure("p", "margin-top");

Правила браузера спорят с вашими по общим законам, и среди обычных объявлений они самые слабые. Уже первый вопрос, который задаёт судья каскада, отдаёт победу вашему обычному объявлению над обычным объявлением браузера, каким бы слабым ни был ваш селектор. Даже * { margin: 0; } снимает отступы и с заголовка, и с абзаца. Воевать с листом браузера не нужно — его достаточно перекрыть.

Знать этот лист нужно по одной практической причине: половину «своих» проблем верстальщик находит там. Отступ, которого вы не писали, рамка у поля ввода, жирный заголовок, синий подчёркнутый текст ссылки, щель под картинкой — всё это приехало из браузера. Удалить лист нельзя, его можно только перекрыть, и перекрыть тем проще, чем точнее вы знаете, что именно перекрываете.

Остаётся вопрос: откуда 14px? В настройках браузеров по умолчанию стоит шрифт 16px, и на обычной странице заголовок получил бы 32px, а не 28px. Значит, шрифт кто-то поменял ещё до нас.

Страница примера — не голый документ: учебник собирает её сам и может положить туда свои правила. Проверить это позволяет rules(): она перечисляет листы стилей документа — по строке на лист, с номером и селекторами его правил, без значений. Лист браузера в этот список не попадает: он живёт внутри браузера, а не в документе. В разметке примера нет ни одного <style> — в <head> только кодировка и заголовок. Прогноз: сколько листов окажется в документе и что в них будет?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Сброс, который уже стоит</title>
</head>
<body><p>Пусто</p></body>
</html>

rules();

Если в разметке примера есть свой <style>, разбор покажет его следующей строкой — например, лист 2: [hidden] | .row: свой лист встаёт в <head> после сброса. Так всегда можно убедиться, что на странице нет чужих правил, о которых вы не знаете, — приём полезный и за пределами учебника, когда чужой стиль внезапно оказывается сильнее вашего.

Что box-sizing меняет в размерах и чем em отличается от rem, глава разбирает дальше — ширина коробки и единицы em и rem. Для примеров пролога важно одно: сброс песочницы стоит всегда, и все замеры сделаны поверх него.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Сброс, который уже стоит</title>
</head>
<body><main>Главное</main><details><summary>Подробнее</summary>Текст</details></body>
</html>

measure("main, details, summary", "display");

Атрибут hidden прячет элемент — так кажется. На самом деле прячет строка из листа браузера: [hidden] { display: none; }. Значение none убирает элемент со страницы совсем: ни места, ни текста. Но это обычное правило CSS, и в споре с вашими правилами оно подчиняется тому же судье — без всякого уважения к тому, что атрибут поставлен в разметке.

В примере блок с классом row: правило даёт ему display: flex — так раскладывают в ряд пункты меню и кнопки панели. Рядом абзац без своих правил. hidden стоит у обоих. Прогноз: какой display окажется у блока и у абзаца?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Ловушка с hidden</title>
  <style>
  .row { display: flex; }
</style>
</head>
<body>

<div class="row" hidden>Скрытая строка</div>
<p hidden>Скрытый абзац</p>
</body>
</html>

measure(".row, p", "display");

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

Лечится одной строкой. Тот же первый вопрос судьи отделяет важные объявления от обычных, поэтому display: none !important выиграет у любого обычного display, как бы сильно ни был написан селектор и где бы ни стояло правило. Обычно !important — признак поражения, но здесь редкий случай, когда он уместен: вы чините поведение атрибута, а не спорите со стилями. Прогноз: какой display будет у блока теперь?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Ловушка с hidden</title>
  <style>
  [hidden] { display: none !important; }
  .row { display: flex; }
</style>
</head>
<body>

<div class="row" hidden>Скрытая строка</div>
</body>
</html>

measure(".row", "display");

Элемент с hidden всё равно виден? Первым делом ищите у него display в своих стилях: скорее всего, какой-то класс перекрыл правило браузера.

В части II тот же атрибут встретится со стороны JavaScript: у элемента есть свойство hidden, и оно равно true, пока атрибут стоит, — атрибуты и свойства.

Вторая ловушка уже встречалась в разборе наследования: кнопка не взяла размер шрифта у родителя. Причина та же — лист браузера. Кнопкам <button>, полям ввода <input>, спискам выбора <select> и многострочным полям <textarea> он назначает свой шрифт, а объявление для самого элемента, даже браузерное, сильнее наследства.

Два одинаковых блока с размером шрифта 18px, в каждом текст и кнопка. Во втором кнопке сказано font: inherit. Прогноз: в каком блоке размер шрифта у текста и кнопки совпадёт?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Кнопка со своим шрифтом</title>
  <style>
  .plain, .fixed { font-size: 18px; }
  .fixed button { font: inherit; }
</style>
</head>
<body>

<div class="plain"><span>Текст</span> <button>Кнопка</button></div>
<div class="fixed"><span>Текст</span> <button>Кнопка</button></div>
</body>
</html>

same(".plain > *", "font-size");
same(".fixed > *", "font-size");

В сбросе это правило пишут сразу для всех четырёх: button, input, select и textarea. Тогда текст в полях выглядит так же, как текст страницы вокруг, и меняется вместе с ним — в том числе когда человек увеличил шрифт в настройках браузера, а форма осталась прежней и перестала читаться.

Сброс ставят в самое начало стилей в расчёте на то, что всё написанное ниже его перекроет. Но порядок в коде — последний вопрос судьи, и до него дело доходит, только если специфичность равна. Если селектор сброса сильнее, он выиграет у правил компонентов, где бы они ни стояли. В примере два сброса отступа для списков с классом, и после каждого — правило компонента. Первый сброс написан как есть, второй завёрнут в :where(). Посчитайте специфичность и предскажите оба отступа.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Сброс, который уступает</title>
  <style>
  ul[class] { padding-left: 0; }
  .menu { padding-left: 24px; }
  :where(ol[class]) { padding-left: 0; }
  .steps { padding-left: 24px; }
</style>
</head>
<body>

<ul class="menu"><li>Меню</li></ul>
<ol class="steps"><li>Шаг</li></ol>
</body>
</html>

measure("ul, ol", "padding-left");

Соберём сброс целиком. Строк «на всякий случай» в нём нет: каждая отвечает на замер, который мы уже сделали, или записывает осознанное решение.

Отступов заголовков и абзацев в таблице нет. Это не ошибка браузера, а разумное умолчание для текста, и обнулять их всем элементам подряд — решение проекта, а не обязательная часть сброса. Если отступы задаёт дизайн, их пишут классам, и классы без труда перекрывают лист браузера. Сброс, который обнуляет всё подряд, тем и плох: после него каждый отступ приходится возвращать заново.

Откуда пришло значение, видно и на живой странице: в инструментах разработчика Chrome блок Styles подписывает правила браузера отдельно, в английском интерфейсе — словами «user agent stylesheet». Сама панель разобрана в части II — инспектор элементов.