Очищення (скидання, обнулення) стилів CSS
Привіт:) У цьому пості розповім для чого під час HTML-верстки використовується очищення (обнулення) CSS-стилів.
Відразу почну з прикладу. Нехай є найпростіша HTML-розмітка:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
</nav>
<div>Block 1</div>
<p>Text 1</p>
<span>Text 2</span>
</body>
</html>Якщо у Консолі веб-браузера (наприклад, Firefox або Chrome) проаналізувати елементи <body> або <p>, то виявиться, що для них автоматично були додані відступи margin:
Чому так виходить?
до змісту ↑Для чого потрібне очищення (скидання, обнулення) стилів CSS
Браузери за замовчуванням застосовують до HTML-елементів свої власні стилі. Наприклад:
- шрифт заголовків
<h1>більший за<h2>, вони обидва виділені напівжирним; - шрифт тексту абзаців
<p>менший і не виділений напівжирним шрифтом; - посилання
<a>підкреслені та мають синій колір; - марковані списки
<ul>мають відступ.
У стандарті HTML немає жодних правил, які б визначали таке обов'язкове форматування: браузери просто додають його для того, щоб простий HTML-код при візуалізації був більш читабельним.
Різні браузери обробляють елементи схоже, але все ж неоднаково. Так, наприклад, Chrome і Firefox використовують властивість padding для створення відступу в маркованих списках.
Крім того, є незначні відмінності в розмірах елементів у різних браузерах, що може ввести в обману у процесі верстки. Через ці невідповідності можна зіткнутись із ситуацією, коли, наприклад, Firefox додасть відступ від верхнього краю, а інший браузер цього не зробить. Такі проблеми виникають через відмінність стилів, вбудованих у браузер.
Щоб максимально позбутися невідповідності стилів між браузерами найкраще із самого початку верстки обнулити всі стилі, тобто почати таблицю стилів із "чистого аркуша". Іншими словами, видалити вбудоване у браузер форматування та додати власні правила.
Концепція обнулення (очищення) стилів браузера називається скиданням стилів (CSS Reset). Зокрема є базовий набір стилів, який ви повинні включити на початку, перед власними CSS-правилами. Вони встановлять базові значення для властивостей, які можуть по-різному оброблятися у різних браузерах.
до змісту ↑Як очистити (скинути, обнулити) стилі CSS
Зазвичай веб-розробник, що займається версткою, має власний набір CSS-правил, які використовує у новому проєкті.
Приведу приклад власних CSS-стилів, які використовую у своїй роботі:
/**
* Reset styles by Mykhailo Petrov
*
* https://petrov.net.ua/why-do-you-need-to-clear-reset-css-styles/
*
* v.3.0.0
*
*/
*,
*::before,
*::after {
padding: 0;
margin: 0;
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*:focus {
outline: none;
}
html,
body {
height: 100%;
min-width: 320px;
line-height: 1;
}
body {
color: #000000;
font-size: 1rem;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased; /* Згладжування шрифту для macOS */
-moz-osx-font-smoothing: grayscale; /* Згладжування шрифту для macOS */
}
input,
button,
textarea {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
color: inherit;
}
button {
cursor: pointer;
color: inherit;
background-color: inherit;
}
a {
color: inherit;
text-decoration: none;
}
a:link,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul,
ol,
li {
list-style: none;
}
img {
max-width: 100%;
height: auto;
vertical-align: top; /* щоб не було артефактного відступу знизу */
object-fit: cover;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
line-height: inherit;
}<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
</body>
</html>