Как работает Normalize.css?

Normalize.css: теория и практика

Normalize.css - это маленький CSS файл, который делает браузеры более консистентными при отображении всех элементов. Это не то же самое, что reset.css, и вот почему это важно.

1. Что такое Normalize.css

Это библиотека CSS, которая:

• Делает браузеры отображают элементы более согласованно
• Сохраняет полезные стили браузера (в отличие от reset.css)
• Исправляет ошибки и недоработки браузеров
• Улучшает работу с формами и остальными элементами

<!-- Подключаем Normalize.css перед своими стилями -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">

2. Normalize.css vs Reset.css

Reset.css - удаляет ВСЕ стили:

/* Reset.css подход - убивает всё */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Потом нужно переписать базовые стили */
h1 { font-size: 2em; }
p { margin-bottom: 1em; }

Normalize.css - сохраняет разумные умолчания:

/* Normalize.css подход */
h1 {
  font-size: 2em;
  margin: 0.67em 0; /* Сохраняет разумные отступы */
}

p {
  /* Уже имеет стандартные margin */
}

Мой опыт: Normalize.css экономит время на переписывание базовых стилей.

3. Основные преобразования Normalize.css

HTML5 элементы

/* Делает новые HTML5 элементы видимыми в старых браузерах */
article, aside, details, figcaption, figure, footer, 
header, hgroup, nav, section {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

Установка font-family

/* Нормализует шрифты для всех браузеров */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Удаляет margin по умолчанию */
body {
  margin: 0;
}

Ссылки и текст

/* Удаляет фон при focus в некоторых браузерах */
a {
  background-color: transparent;
}

/* Улучшает видимость при фокусе */
a:focus {
  outline: thin dotted;
}

/* Нормализует выделение текста */
mark {
  background: #ff0;
  color: #000;
}

4. Проблемы с формами, которые решает Normalize.css

/* Устраняет обрамление в Firefox */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/* Chrome и Safari увеличивают высоту input, это исправляет */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/* Удаляет внутренний padding в Chrome */
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Исправляет внешний вид кнопок */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

Практический пример - без Normalize.css:

<!-- Firefox: обычный input с padding -->
<!-- Chrome: input с больше padding -->
<!-- Safari: нужны дополнительные стили -->
<input type="text">

С Normalize.css - везде одинаково!

5. Таблицы

/* Убирает border-spacing (важно для дизайна) */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Выравнивает текст в ячейках */
td, th {
  padding: 0;
  text-align: left;
}

6. Что Normalize.css НЕ делает

/* Это не делает Normalize.css - нужно писать вручную */

/* Нет размера по умолчанию для заголовков */
h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
  font-weight: 400; /* Это нужно переписать */
}

/* Нет стилей для .container или других классов */
.container {
  max-width: 1200px; /* Это твоя работа */
}

/* Нет reset margin/padding для всех элементов */
h1 { margin: 0; } /* Это нужно добавить */

7. Современное использование

В современном фронтенде (2024+) есть несколько подходов:

Вариант 1: Normalize.css + свой CSS reset

/* normalize.css */
@import url("normalize.css");

/* Мой reset */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
}

p {
  margin: 0;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

Вариант 2: Tailwind CSS (включает похожие нормализации)

<!-- Tailwind уже содержит нормализацию браузеров -->
<script src="tailwind.js"></script>

<!-- Не нужен отдельный Normalize.css -->
<div class="p-4 text-base">...</div>

Вариант 3: @layer directives (современный подход)

@layer reset {
  * { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
}

@layer base {
  body { font-family: system-ui; }
  h1 { font-size: 2em; font-weight: bold; }
}

@layer components {
  .btn { @apply px-4 py-2 rounded; }
}

8. Практическое сравнение браузеров БЕЗ Normalize.css

// Chrome: элемент имеет margin: 16px
// Firefox: элемент имеет margin: 16px
// Safari: элемент имеет margin: 16px (обычно)
// IE11: элемент имеет margin: 0.5em (другой!)

// С Normalize.css - везде одинаково

9. Когда использовать Normalize.css

Использую, когда:

• Нужна совместимость со старыми браузерами (IE11 и ниже)
• Работаю без фреймворков вроде Tailwind
• Хочу минимальный CSS с максимальной совместимостью
• Нужна семантическая HTML с предсказуемыми стилями

НЕ использую, когда:

• Использую Tailwind CSS (уже содержит нормализацию)
• Использую Bootstrap (имеет свой Reboot)
• Пишу свой полноценный CSS reset
• Работаю только с современными браузерами (Chrome, Firefox, Safari 15+)

10. Чек-лист для собеседования

Интервьюер может спросить:

// 1. В чём разница между reset и normalize?
// Ответ: Reset убивает всё, Normalize - делает браузеры консистентными

// 2. Зачем нужен box-sizing в Normalize?
// Ответ: Для консистентного расчета размеров input, checkbox

// 3. Какой браузер был самой большой проблемой?
// Ответ: IE11 - там были серьёзные ошибки с формами

// 4. Нужно ли использовать Normalize в 2024?
// Ответ: Зависит - если Tailwind, то встроенное достаточно
//        Если vanilla CSS - да, помогает

Итог

Normalize.css - это инвестиция времени в начале проекта, которая сэкономит часы на отладку кросс-браузерных проблем. Это не магия, а просто собранные вместе известные workarounds для браузерных ошибок.

В современных проектах с Tailwind это уже не актуально, но для vanilla CSS и старых проектов - это must-have.