Яка різниця між початковим та невстановленим значеннями?

Простий приклад:

HTML

<p style="color:red!important"> 
    this text is red 
    <em> 
       this text is in the initial color (e.g. black)
    </em>
    this is red again
</p>

CSS

em {
    color:initial;
    color:unset;
}

У чому різниця між initialі unset? Підтримує лише браузери

CanIUse: значення CSS скасовано

Розробник Mozilla Web CSS Initial

Відповідно до вашого посилання :

unset - це значення CSS, що те саме, що і "наслідувати", якщо властивість успадковується, або "початкове", якщо властивість не успадковується

Ось приклад:

pre {
  color: #f00;
}
.initial {
  color: initial;
}
.unset {
  color: unset;
}

<pre>
  <span>This text is red because it is inherited.</span>
  <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span>
  <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span>
</pre>

Сценарій, коли різниця має значення, якщо ви намагаєтесь замінити деякий CSS у вашій таблиці стилів, але ви віддаєте перевагу, щоб значення передавалось у спадок, а не було встановлено назад за замовчуванням браузера.

Наприклад:

pre {
  color: #00f;
}
span {
  color: #f00;
}
.unset {
  color: unset;
}
.initial {
  color: initial;
}

<pre>
  <em>Text in this 'pre' element is blue.</em>
  <span>The span elements are red, but we want to override this.</span>
  <span class="unset">[color: unset]: This span's color is unset (blue, because it is inherited from the pre).</span>
  <span class="initial">[color: initial]: This span's color is initial (black, the browser default).</span>
</pre>

Я хотів би навести офіційну документацію CSS | MDN для подальшого використання для вивчення відмінностей між ними:

ПОЧАТКОВИЙ

Початкове ключове слово CSS застосовує початкове значення властивості до елемента. Це дозволено для кожного властивості CSS і викликає використання елементом, для якого вказано початкове значення властивості.

Отже, згідно з вашим прикладом:

em {
    color:initial;
    /* color:unset; */
}

<p style="color:red!important"> 
    this text is red 
    <em> 
       this text is in the initial color (e.g. black)
    </em>
    this is red again
</p>

Зверніть увагу , як початкове властивість зберігає початкове в colorвластивість елемента.

ВСТАНОВИТИ

Невстановлене ключове слово CSS - це поєднання початкового та спадкового ключових слів. Подібно до цих двох інших ключових слів у CSS, його можна застосувати до будь-якого властивості CSS, включаючи скорочення всіх CSS. Це ключове слово скидає властивість до успадкованого значення, якщо воно успадковується від батьківського, або до початкового значення, якщо ні. Іншими словами, він поводиться як ключове слово спадкування в першому випадку, і як початкове ключове слово у другому випадку.

Отже, згідно з вашим прикладом:

em {
  /* color:initial; */
  color:unset;
}

<p style="color:red!important"> 
  this text is red 
  <em> 
    this text's color has been unset (e.g. red)
  </em>
  this is red again
</p>

Зверніть увагу , як задано властивість просто скидає на colorвластивість елемента.

ВИСНОВОК

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