CSS initial — початкове значення властивості

Значення initial застосовується для установки початкового значення властивості. Може стати в нагоді в декількох випадках, наприклад, відновити значення властивостей, заданих браузером за замовчуванням або задати початкове значення властивості, змінене в результаті успадкування. Ключове слово initial додано в CSS3 і поки погано підтримується браузерами.

h1 кажуть використовувати initial, тому він пропускає елемент тіла і йде на roots.

Cпецифікація допомагає нам зрозуміти різницю між початковим ключовим словом та початковим значенням.

• Початкове ключове слово: якщо каскадне значення властивості є початковим ключовим словом, початкове значення властивості стає його заданим значенням.
• Початкове значення: кожна властивість має початкове значення, визначене в таблиці визначення властивості. Якщо властивість не є успадкованою властивістю, а каскад не призводить до значення, то вказане значення властивості є його початковим значенням.

Отже, якщо тут використовується початкове ключове слово:

.module {
  color: initial;
}

то initial може повернутись як black, якщо black - це за замовчуванням для властивості цього елемента.

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

Таким чином, це те ж саме, що і не визначати властивість взагалі. Тому ви можете подумати, що ключове слово initial здебільшого марне. Це частково вірно, тому що, швидше за все, ви не будете застосовувати його так вже й часто. Але якщо ви зважитеся, це може виявитися досить зручно.

Наприклад, ви можете захотіти використовувати initial для властивості, яке за замовчуванням успадковує значення від батька, подібно, властивості color:

body {  
  color: aquamarine;  
}  
  
.example {  
  color: initial;  
}

правити

Загальний опис

правити

Нотатка

Firefox до версии 19.0 поддерживает нестандартное значение -moz-initial.

автор: Svitlana правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	19	1.2	15	13	—

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	19	1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="frame">
    <span>Успадкований великий шрифт…</span>
    <span class="reset">…а тут — initial.</span>
</div>

.frame {
    font-size: 28px;
}

.reset {
    font-size: initial;
}

<div class="box a">display не чіпали</div>
<div class="box b">display: initial</div>
<div class="box c">display: block</div>

<div class="tinted">
    <p>Абзац успадкував колір блоку.</p>
    <p class="reset">color: initial — чорний зі специфікації, а не «як було в браузері».</p>
</div>

body {
    font-family: system-ui, sans-serif;
    font-size: 16px;
}

.box {
    border: 2px dashed #0172ad;
    background: #eef6fb;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.b { display: initial; }   /* = inline */
.c { display: block; }

.tinted {
    color: #b5179e;
    border: 2px solid #b5179e;
    padding: 4px 14px;
    margin-top: 24px;
}

.tinted .reset {
    color: initial;
}

<p>
  <span>Цей текст червоний.</span>
  <em>Цей текст знаходиться в початковому кольорі (як правило, чорний).</em>
  <span>Цей знову червоний.</span>
</p>

body{
  font-size: 19px;
}
p {
  color: red;
}

em {
  color: initial;
}