В чем разница между начальными и неустановленными значениями?

Простой пример:

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

Ответ 1

По вашей ссылке:

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>

Ответ 2

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

INITIAL

Исходное ключевое слово 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>