


Блог IT-шника
Блог IT-шника
Привіт:) У цьому пості детально розгляну для чого потрібні та покажу приклади використання у веб-розробці CSS ключових слів initial
, inherit
, unset
та revert
.
Ці значення CSS-властивостей використовуються не так часто як інші. Крім того, вони мають свої нюанси, через що не завжди зрозумілі.
В загальному ці ключові слова потрібні щоб "скидати" інші стилі CSS. Далі розгляну кожне з них, покажу для чого потрібні, чим відрізняються та у яких випадках використовуються.
Для початку потрібно розуміти звідки беруться стилі у браузерах.
Кожна CSS-властивість має початкове (initial) значення. Воно не пов'язане з типом HTML-елемента, до якого застосовується.
Приклад початкового значення MDN:
normal
Після застосування початкових стилів усіх властивостей CSS браузер завантажує власні стилі. Вони не мають нічого спільного з базовими початковими значеннями CSS-властивостей.
Елементи HTML не мають початкових значень для стилів! Базові стилі будь-якого HTML-елемента (наприклад, <h1>
чи <h3>
) задаються стилями браузера, а не початковими значеннями CSS-властивостей.
Ключове слово inherit
повідомляє браузеру, що значення властивості потрібно знайти у найближчого батьківського елемента та успадкувати його для поточного елемента. Якщо у найближчого батьківського елемента також встановлене значення inherit
, то браузер продовжить підніматися DOM-деревом, доки не знайде якесь значення. Якщо значення немає, то браузер застосує власні стилі. Але якщо і браузерні стилі відсутні, тоді буде застосоване базове значення initial
.
<div class="box">
<div>
<div>
<div>
<div class="change">
<div>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
.box {
border: solid 10px rgba(12,72,0,0.5);
background-color: rgba(0,0,0,0.5);
width: 200px;
height: 200px;
margin: 30px;
}
div {
width: inherit;
height: inherit;
margin: inherit;
background-color: inherit;
border: inherit;
}
span {
width: inherit;
height: inherit;
margin: inherit;
background-color: inherit;
border: inherit;
display: inherit;
border-color: red;
}
до змісту ↑
Для розуміння значення initial
потрібно пам'ятати важливий факт: у кожної властивості CSS є значення за замовчуванням, яке не має нічого спільного зі значеннями, що встановлюються браузером. Браузерні стилі — це стилі, які застосовуються браузером до конкретних HTML-елементів. Часто невірно вважають, що вони автоматично приходять разом із HTML. Це не так.
Ключове слово initial
говорить браузеру використовувати значення за замовчуванням для заданої CSS-властивості. Наприклад, для властивості color
значення initial
завжди буде black
.
Така поведінка може досить заплутувати веб-розробника, бо, як згадувалося раніше, значення за замовчуванням для CSS-властивості не завжди збігається зі значенням, яке браузер задає конкретному елементу. Наприклад, initial
-значення для властивості display
дорівнює inline
для всіх елементів. Тому, якщо для елемента <div>
буде встановлена властивість display
зі значенням initial
, то властивість буде обчислена як inline
, а не block
, як у стилях браузера.
Приклад.
div.box {
display: initial; /* прийме значення inline, а не block */
background-color: red;
}
div {
background: red;
color: #fff;
font-size: 20px;
padding: 10px;
margin-bottom: 40px;
}
.box {
display: initial;
}
<div>
div default style is display: block;
</div>
<div class="box">
The initial value of the display property is display: inline;
</div>
Ключове слово unset
унікальне тим, що воно працює по-різному в залежності від типу властивості. У CSS є два типи властивостей.
Значення unset
працює так само, як й inherit
для успадкованих типів властивостей. Наприклад, для властивості color
воно працюватиме аналогічно, як і значення inherit
, тобто шукатиме батьківський елемент з визначенням цієї властивості. Якщо такого не буде знайдено, то використовуватиме значення браузера. Якщо ж і браузерні стилі відсутні, то застосується initial
.
Для неуспадкованих властивостей unset
працюватиме так само, як initial
, тобто застосовуватиметься значення CSS за замовчуванням. Наприклад, для border-color
працюватиме як initial
.
.some-class{
color: unset; /* буде рівним inherit */
display: unset; /* буде рівним initial */
}
до змісту ↑
Якщо unset
поводиться як inherit
і initial
, то навіщо може знадобитися? Якщо ми скидаємо лише одну властивість, то unset
не потрібне. Замість нього ми можемо просто використовувати inherit
або initial
. Але зараз у нас є властивість all
, яка дає нам нову можливість — скинути успадковані та неуспадковані властивості одночасно.
Тому вам не потрібно скидати властивості окремо. Застосування ключового слова unset
до властивості all
призведе до скидання всіх успадкованих властивостей до значення inherit
і всіх неуспадкованих властивостей — до значення initial
.
Це єдина причина нового ключового слова unset
! В іншому випадку ми могли б натомість використовувати inherit
і initial
.
Замість скидання властивостей окремо, наприклад:
/* Погано */
.common-content {
font-size: inherit;
font-weight: inherit;
border-width: initial;
background-color: initial;
}
Ми можемо використовувати нову властивість all
зі значенням unset
, яка вплине на всі існуючі властивості:
/* Добре */
.common-content {
all: unset;
}
Наступний приклад демонструє як властивості поводяться, коли використовується властивість all
зі значенням unset
. Деякі поводяться так, ніби до них застосоване значення inherit
, а деякі так, ніби до них застосоване initial
.
/**
Значення unset для border буде поводитися як initial, бо його властивість не успадковується.
Значення unset для font-size не матиме наслідування, бо ця властивість успадковується
*/
div {
background: red;
color: #fff;
font-size: 20px;
padding: 10px;
margin-bottom: 40px;
}
.box {
border: solid 3px #000;
font-size: 30px;
}
.box .box {
all: unset;
}
до змісту ↑
Але якщо потрібно скинути значення властивості до початково заданих браузером значень, а не до значень за замовчуванням? Наприклад, повернути значення властивості display
елементові <div>
до значення block
(це стилі браузера), а не до значення inline
(це базові стилі CSS).
Для цього ми скоро отримаємо нове CSS-значення: revert
. Воно досить схоже на unset
. Єдина відмінність в тому, що воно віддає перевагу стилям браузера, аніж базовим значенням властивостей CSS.
Наприклад:
div {
display: revert; /* = block */
}
h1 {
font-weight: revert; /* = bold */
font-size: revert; /* = 2em */
}
Таким чином, якщо потрібно скинути всі стилі HTML-елемента до базових стилів браузера, можна це зробити так:
/* Добре */
.common-content * {
all: revert;
}
Джерело: https://elad.medium.com/understanding-the-initial-inherit-and-unset-css-keywords-2d70b7121695