Пошук уроків, статей та іншого контенту
Порівняємо Normalize.css із власним Reset та навчимося підключати бібліотеку до проєкту.
Браузери мають власні стандартні стилі для HTML-елементів. Наприклад:
у заголовків є зовнішні відступи;
списки мають внутрішній відступ і маркери;
кнопки та поля введення можуть мати різний вигляд;
у різних браузерах деякі елементи можуть відображатися трохи по-різному;
значення box-sizing за замовчуванням може поводитися не так, як очікує розробник.
Тому одна й та сама HTML-сторінка без CSS може виглядати трохи по-різному в різних браузерах.
Нормалізація стилів — це підготовка стандартних стилів браузера до передбачуваної роботи.
Для цього використовують:
готову бібліотеку Normalize.css;
власний CSS Reset;
комбінацію нормалізації та власних базових стилів.
Normalize.css — це CSS-файл, який робить стандартні стилі браузерів більш узгодженими.
Він не видаляє всі стилі елементів. Навпаки, Normalize.css намагається:
зберегти корисні стандартні стилі;
виправити відмінності між браузерами;
зробити поведінку HTML-елементів передбачуванішою;
виправити відомі проблеми зі стилями форм, заголовків, таблиць та інших елементів.
Наприклад, Normalize.css не перетворює заголовок на звичайний текст. h1 і далі залишається заголовком із візуальною відмінністю від основного тексту.
CSS Reset зазвичай скидає стандартні стилі браузера:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}Після цього розробник сам задає всі потрібні стилі.
Переваги Reset:
повний контроль над початковими стилями;
легко створити власну дизайн-систему;
усі відступи можна визначати самостійно.
Недоліки:
можна випадково втратити корисні стандартні стилі;
потрібно вручну стилізувати більше елементів;
агресивний Reset може створити додаткову роботу.
Normalize.css не обнуляє все без винятку. Він вибірково вирівнює стилі.
Умовне порівняння:
/* Reset: усе скидаємо */
h1 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
/* Normalize.css: заголовок зберігає семантичний вигляд */
h1 {
font-size: 2em;
margin: 0.67em 0;
}Normalize.css більше підходить, якщо потрібно:
зберегти звичний вигляд HTML-елементів;
зменшити відмінності між браузерами;
швидко почати роботу над сторінкою;
не писати великий Reset вручну.
Normalize.css — це звичайний CSS-файл. Його можна зберігати у власному проєкті та підключати як інші стилі.
Приклад структури проєкту:
project/
├── index.html
└── css/
├── normalize.css
└── style.cssФайл normalize.css потрібно додати до папки css. Це може бути офіційний файл бібліотеки, збережений у проєкті.
У HTML спочатку підключаємо Normalize.css, а потім власні стилі:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Normalize.css</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="page">
<h1>Моя сторінка</h1>
<p>
Normalize.css допомагає зробити стандартні стилі браузера
більш передбачуваними.
</p>
<ul class="features">
<li>Однаковіші стилі в браузерах</li>
<li>Збереження корисних стандартних стилів</li>
<li>Менше ручних виправлень</li>
</ul>
<button type="button">Докладніше</button>
</main>
</body>
</html>Власні стилі зберігаємо у файлі style.css:
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
color: #202124;
background-color: #f4f6f8;
font-family: Arial, sans-serif;
line-height: 1.5;
}
.page {
width: min(100% - 32px, 640px);
margin: 40px auto;
padding: 32px;
background-color: #ffffff;
border-radius: 12px;
}
h1 {
margin-top: 0;
color: #1a73e8;
}
.features {
padding-left: 24px;
}
button {
padding: 10px 16px;
border: 0;
border-radius: 6px;
color: #ffffff;
background-color: #1a73e8;
cursor: pointer;
}
button:hover {
background-color: #1557b0;
}Важливо: власний style.css підключається після normalize.css. Тоді його правила зможуть перевизначити базові стилі бібліотеки.
Правильний порядок зазвичай має такий вигляд:
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">Браузер читає CSS зверху вниз. Якщо два правила мають однакову специфічність, перевагу отримає правило, яке розташоване нижче.
Наприклад, Normalize.css може задати зовнішній відступ для h1, а власний файл його змінить:
/* normalize.css */
h1 {
margin-block: 0.67em;
}
/* style.css */
h1 {
margin-block: 0;
}Оскільки правило з style.css підключене пізніше, для сторінки буде використано margin-block: 0.
Normalize.css не створює дизайн сторінки. Він не визначає:
кольори бренду;
структуру макета;
відступи конкретних блоків;
розміри контейнерів;
стилі карток, меню чи секцій.
Його завдання — створити більш передбачувану основу. Після цього розробник додає власні стилі.
Наприклад, Normalize.css може узгодити базове відображення кнопки, але стиль кнопки проєкту все одно потрібно написати самостійно:
.button {
display: inline-block;
padding: 12px 20px;
border: 0;
border-radius: 8px;
color: white;
background-color: #2563eb;
font: inherit;
cursor: pointer;
}У невеликому проєкті можна не використовувати готову бібліотеку, а написати короткий базовий файл самостійно:
/* Вибір іншої моделі розрахунку розмірів */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Прибираємо зайві відступи сторінки */
body {
margin: 0;
}
/* Зображення не виходять за межі батьківського елемента */
img {
display: block;
max-width: 100%;
}
/* Елементи форм використовують шрифт сторінки */
button,
input,
textarea,
select {
font: inherit;
}Це не повна заміна Normalize.css, а невеликий набір базових правил.
Власна нормалізація доречна, коли:
проєкт має дуже просту структуру;
команда добре розуміє, які правила їй потрібні;
не потрібно вирівнювати велику кількість браузерних особливостей;
важливо мінімізувати кількість CSS-коду.
ви хочете зберегти стандартну семантичну ієрархію HTML;
потрібна готова перевірена база;
проєкт використовує багато стандартних HTML-елементів;
ви не хочете вручну виправляти відмінності браузерів.
дизайн повністю контролює вигляд кожного елемента;
ви свідомо хочете почати з нульових відступів;
у проєкті вже є власна базова CSS-система;
команда має чіткі правила для початкових стилів.
Не потрібно одночасно підключати Normalize.css і великий Reset без потреби. Reset може скасувати частину роботи Normalize.css, тому результат стане менш передбачуваним.
Практичний варіант може виглядати так:
Підключити Normalize.css.
Додати невеликий власний базовий блок.
Створити стилі компонентів і сторінок.
/* Власні базові правила після Normalize.css */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
button,
input,
textarea,
select {
font: inherit;
}Таке поєднання дає змогу скористатися готовою нормалізацією і водночас додати правила, потрібні саме цьому проєкту.
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">У такому випадку частина власних правил може бути перевизначена Normalize.css.
Правильний порядок:
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">Normalize.css лише узгоджує базові стилі. Кольори, макет, відступи та компоненти потрібно створювати самостійно.
Якщо Reset обнуляє всі стилі після Normalize.css, корисні стандартні правила бібліотеки можуть бути втрачені.
Правило:
ul,
ol {
list-style: none;
padding: 0;
}може бути потрібним для навігації, але небажаним для звичайного текстового списку. Краще застосовувати його до конкретного компонента:
.navigation-list {
padding: 0;
list-style: none;
}Не варто хаотично обнуляти одні елементи, залишати інші зі стандартними стилями та додавати правила з різних Reset-файлів. Виберіть зрозумілий підхід і дотримуйтеся його в усьому проєкті.
Normalize.css вирівнює стандартні стилі браузерів.
На відміну від Reset, він не обнуляє всі стилі та зберігає корисні властивості HTML-елементів.
Normalize.css підключають перед власним CSS-файлом.
Власні стилі завжди пишуть після Normalize.css.
Normalize.css не створює дизайн, а лише готує передбачувану базу.
Для невеликих проєктів можна написати коротку власну нормалізацію.
Не слід без потреби поєднувати Normalize.css з агресивним Reset.