Для чого потрібні ключові слова initial, inherit, unset та revert у CSS

Привіт:) У цьому пості детально розгляну для чого потрібні та покажу приклади використання у веб-розробці CSS ключових слів initial, inherit, unset та revert.

Ці значення CSS-властивостей використовуються не так часто як інші. Крім того, вони мають свої нюанси, через що не завжди зрозумілі.

В загальному ці ключові слова потрібні щоб "скидати" інші стилі CSS. Далі розгляну кожне з них, покажу для чого потрібні, чим відрізняються та у яких випадках використовуються.

Базові стилі для веб

Для початку потрібно розуміти звідки беруться стилі у браузерах.

Початкове значення для кожної властивості CSS

Кожна CSS-властивість має початкове (initial) значення. Воно не пов'язане з типом HTML-елемента, до якого застосовується.

Приклад початкового значення MDN:

до змісту ↑

Стилі браузера User-Agent

Після застосування початкових стилів усіх властивостей CSS браузер завантажує власні стилі. Вони не мають нічого спільного з базовими початковими значеннями CSS-властивостей.

Елементи HTML не мають початкових значень для стилів! Базові стилі будь-якого HTML-елемента (наприклад, <h1> чи <h3>) задаються стилями браузера, а не початковими значеннями CSS-властивостей.

до змісту ↑

Значення inherit

Ключове слово 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

Для розуміння значення 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 default style is display: block;
The initial value of the display property is display: inline;
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

Ключове слово unset унікальне тим, що воно працює по-різному в залежності від типу властивості. У CSS є два типи властивостей.

  1. Успадковані властивості. Це властивості, які впливають на своїх нащадків. Усі властивості, які впливають на текст, мають таку природну поведінку. Наприклад, якщо ми визначаємо розмір шрифту для HTML-елемента, він буде застосовуватися до всіх HTML-елементів, доки ви не встановите інший розмір шрифту у внутрішньому стилі HTML-елемента.
  1. Неуспадковані властивості. До них відносяться всі інші 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;  
}
до змісту ↑

Значення revert

Але якщо потрібно скинути значення властивості до початково заданих браузером значень, а не до значень за замовчуванням? Наприклад, повернути значення властивості 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

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *