Скидання та нормалізація стилів у CSS

Розбираємося, чому браузери додають стандартні стилі HTML-елементам і навіщо розробники використовують скидання та нормалізацію CSS-стилів.

Стандартні стилі браузера

Браузер автоматично додає деяким HTML-елементам стандартні стилі. Наприклад, заголовки та абзаци зазвичай мають зовнішні відступи, списки — внутрішній відступ і маркери, а кнопки та поля форми можуть мати власне стандартне оформлення.

<h1>Заголовок</h1>

<p>Абзац тексту</p> <ul> <li>Перший пункт</li> <li>Другий пункт</li> </ul>

Якщо не задавати власні CSS-стилі, браузер використає свої стандартні правила. Частина цих правил відрізняється між браузерами або їхніми версіями.

Чому стандартні відступи можуть заважати

Під час верстки нам часто потрібно самостійно контролювати відступи та інші стилі елементів. Наприклад, ми можемо захотіти, щоб заголовок або абзац не мав стандартного margin.

h1,

p {
margin: 0;
}

Проблема різних браузерів

Стандартні стилі браузерів не завжди однакові. Наприклад, різні браузери можуть мати різні значення відступів, розмірів або оформлення окремих HTML-елементів.

Через це сторінка може виглядати трохи по-різному в різних браузерах навіть тоді, коли ми не задавали жодних власних стилів для певного елемента.

Скидання стилів

Скидання стилів — це підхід, за якого стандартні стилі браузера для певних HTML-елементів прибирають або встановлюють у передбачувані значення. Після цього розробник сам задає потрібне оформлення.

* {

margin: 0;
padding: 0;
}

ul,
ol {
list-style: none;
}

❗ Важливо:

Повне скидання стилів не завжди є необхідним. У сучасних проєктах зазвичай використовують невеликий, продуманий CSS reset або нормалізацію лише тих стилів, які справді потрібні.

Нормалізація стилів

Нормалізація — це інший підхід. Замість того щоб повністю прибирати стандартні стилі, намагаються зробити поведінку HTML-елементів більш однаковою в різних браузерах, зберігаючи корисні стандартні стилі.

Таким чином, скидання та нормалізація вирішують схожу проблему, але роблять це по-різному. Reset переважно прибирає стандартні стилі, а Normalize намагається узгодити їх між браузерами.

Що будемо розглядати далі

У наступних уроках розглянемо конкретні способи скидання та нормалізації стилів, а також сучасний підхід до підготовки базових CSS-стилів для нового проєкту.

📌 Завдання:

№1. Чому браузери додають стандартні стилі HTML-елементам?
№2. Наведіть приклади елементів, які можуть мати стандартні відступи.
№3. Чому одна й та сама сторінка може трохи відрізнятися в різних браузерах?
№4. Що таке скидання стилів?
№5. Чим нормалізація стилів відрізняється від скидання?

💡 Показати підказку

Згадайте стандартні стилі браузера, відступи h1 та p, маркери списків, а також різницю між повним прибиранням стилів і їх узгодженням.

✅ Показати відповідь

№1. Браузер має власні стандартні стилі для HTML-елементів, щоб сторінка мала базове оформлення навіть без CSS.

№2. Наприклад, h1, h2, p, ul та ol можуть мати стандартні відступи.

№3. Різні браузери можуть мати відмінності у стандартних стилях та їхніх значеннях.

№4. Скидання стилів — це прибирання або встановлення у передбачувані значення стандартних стилів браузера.

№5. Reset переважно прибирає стандартні стилі, а Normalize намагається зробити їх більш однаковими між браузерами, зберігаючи корисні стандартні правила.