Пошук уроків, статей та іншого контенту
Розглянемо роль CSS Reset і створимо мінімальний набір правил для узгодження стилів між браузерами.
Браузери мають власні стандартні стилі для HTML-елементів. Наприклад:
у body зазвичай є зовнішній відступ;
заголовки мають різні розміри та відступи;
списки мають внутрішній відступ і маркери;
зображення можуть поводитися як рядкові елементи;
ширина елементів із padding та border може обчислюватися неочікувано.
Через це одна й та сама HTML-розмітка може виглядати трохи по-різному в різних браузерах.
CSS Reset — це набір базових CSS-правил, який прибирає або узгоджує стандартні стилі браузера. Після цього розробник сам визначає, як мають виглядати відступи, розміри шрифтів та інші властивості.
CSS Reset не створює дизайн сторінки. Він лише готує передбачувану основу для подальших стилів.
Без скидання стилів браузер може автоматично додавати відступи:
h1 {
margin-block-start: 0.67em;
margin-block-end: 0.67em;
}Точні значення можуть відрізнятися залежно від елемента та браузера. Якщо не враховувати ці стилі, під час верстки можуть виникати такі проблеми:
елементи мають неочікувані відступи;
ширина блоків розраховується складніше;
списки виглядають не так, як задумано;
зображення залишають невеликий проміжок унизу;
текст має різний вигляд у різних частинах сторінки.
Reset допомагає почати стилізацію з однакової базової точки.
Для невеликих навчальних і практичних проєктів не обов’язково використовувати великий набір правил. Достатньо кількох найпотрібніших властивостей.
/* Прибираємо стандартні відступи та використовуємо передбачувану модель розміру */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Робимо зображення адаптивними та прибираємо проміжок під ними */
img {
display: block;
max-width: 100%;
}
/* Елементи форми успадковують шрифт сторінки */
button,
input,
textarea,
select {
font: inherit;
}Розглянемо ці правила окремо.
box-sizing: border-boxЗа замовчуванням браузер використовує значення content-box. У такому режимі ширина елемента не включає padding і border.
Наприклад:
.card {
width: 300px;
padding: 20px;
border: 2px solid black;
}Фактична ширина такого елемента буде:
300px + 20px + 20px + 2px + 2px = 344pxЗі значенням border-box ширина разом із внутрішніми відступами та рамкою залишиться 300px:
*,
*::before,
*::after {
box-sizing: border-box;
}Це робить розрахунок розмірів елементів більш передбачуваним.
margin і paddingПравило:
*,
*::before,
*::after {
margin: 0;
padding: 0;
}прибирає стандартні зовнішні та внутрішні відступи для всіх елементів.
Селектори *::before і *::after потрібні для псевдоелементів, щоб вони також використовували box-sizing: border-box.
Після скидання відступів потрібно додати їх самостійно:
h1 {
margin-bottom: 16px;
}
p {
margin-bottom: 12px;
}Це краще, ніж покладатися на різні стандартні значення браузера.
Зображення зазвичай залишаються в межах батьківського елемента завдяки правилу:
img {
max-width: 100%;
}Якщо ширина зображення більша за ширину контейнера, воно зменшиться, але не стане ширшим за контейнер.
Властивість:
display: block;прибирає особливості рядкової моделі зображень, зокрема невеликий проміжок під ними, який може з’являтися через вирівнювання тексту по базовій лінії.
Кнопки, поля введення та інші елементи форми можуть мати власний шрифт браузера. Щоб вони використовували шрифт сторінки, застосовують:
button,
input,
textarea,
select {
font: inherit;
}Ключове слово inherit означає «успадкувати значення від батьківського елемента».
Створимо сторінку з мінімальним Reset і власними стилями для заголовка, тексту та картки.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Reset</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="page">
<article class="card">
<img
src="https://via.placeholder.com/640x360"
alt="Приклад зображення"
>
<div class="card__content">
<h1>CSS Reset</h1>
<p>
Reset допомагає почати стилізацію сторінки з передбачуваної основи.
</p>
<button type="button">Дізнатися більше</button>
</div>
</article>
</main>
</body>
</html>/* Базовий CSS Reset */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
display: block;
max-width: 100%;
}
button,
input,
textarea,
select {
font: inherit;
}
/* Власні стилі сторінки */
body {
min-width: 320px;
font-family: Arial, sans-serif;
line-height: 1.5;
color: #1f2937;
background-color: #f3f4f6;
}
.page {
max-width: 700px;
margin: 0 auto;
padding: 40px 16px;
}
.card {
overflow: hidden;
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
}
.card__content {
padding: 24px;
}
.card h1 {
margin-bottom: 12px;
font-size: 32px;
line-height: 1.2;
}
.card p {
margin-bottom: 20px;
}
.card button {
padding: 10px 16px;
border: 0;
border-radius: 6px;
color: #ffffff;
background-color: #2563eb;
cursor: pointer;
}У цьому прикладі Reset відповідає лише за базову поведінку:
скидає стандартні відступи;
задає border-box;
робить зображення блочним і адаптивним;
узгоджує шрифт елементів форми.
Вигляд картки, кольори, тіні та спеціальні відступи вже належать до звичайних стилів сторінки.
Після скидання стилів заголовок залишається заголовком, список — списком, а кнопка — кнопкою. CSS змінює лише візуальне представлення.
Наприклад, якщо скинути стилі списку:
ul,
ol {
list-style: none;
}список більше не матиме маркерів, але його семантика для HTML не зміниться.
Тому Reset варто застосовувати обережно. Якщо маркери або стандартні відступи потрібні, їх можна повернути власними правилами:
.features {
padding-left: 20px;
list-style: disc;
}Не кожне CSS-правило має бути частиною Reset. Наприклад, кольори, тіні, конкретні шрифти та відступи компонентів залежать від дизайну проєкту.
Такі правила краще писати окремо:
body {
color: #222222;
background-color: #ffffff;
}
.title {
margin-bottom: 24px;
color: #111111;
}Так код залишається зрозумілим: Reset відповідає за базове узгодження, а стилі компонентів — за зовнішній вигляд.
Після такого правила:
* {
margin: 0;
padding: 0;
}заголовки, абзаци та списки втратять зручні відступи. Це не помилка саме по собі, але після цього потрібно явно задати потрібні відступи.
width: 100% замість max-width: 100% для всіх зображеньПравило:
img {
width: 100%;
}розтягує навіть маленькі зображення на всю ширину контейнера.
Для базового Reset зазвичай безпечніше:
img {
max-width: 100%;
}Тоді велике зображення зменшиться, а маленьке не буде примусово розтягнуте.
Якщо box-sizing застосовується лише до *, псевдоелементи можуть мати іншу модель розрахунку розмірів.
Краще використовувати:
*,
*::before,
*::after {
box-sizing: border-box;
}Якщо прибрати всі стилі кнопки, вона може втратити зрозумілий вигляд. Після Reset потрібно окремо стилізувати кнопку, поле введення та інші елементи форми.
CSS Reset не має робити сторінку красивою. Його завдання — прибрати непередбачувані стандартні стилі. Кольори, відступи та оформлення компонентів додаються після нього.
CSS Reset узгоджує базову поведінку HTML-елементів між браузерами.
Мінімальний Reset зазвичай містить box-sizing: border-box, скидання margin і padding.
Для зображень корисні display: block і max-width: 100%.
Елементи форми можна змусити успадковувати шрифт за допомогою font: inherit.
Після скидання стандартних стилів потрібні власні відступи та оформлення.
Reset не замінює дизайн і не повинен містити стилі конкретних компонентів.