Jaka jest różnica między wartościami początkowymi i nieustawionymi?

Prosty przykład:

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;
}

Jaka jest różnica między initiali unset? Obsługuje tylko przeglądarki

CanIUse: wartość nieustawiona CSS

Początek dewelopera Mozilla Web CSS

Według twojego linku :

unset to wartość CSS, która jest tym samym, co „dziedziczenie”, jeśli właściwość jest dziedziczona, lub „początkowa”, jeśli właściwość nie jest dziedziczona

Oto przykład:

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>

Scenariusz, w którym różnica ma znaczenie, polega na tym, że próbujesz zastąpić niektóre arkusze CSS w arkuszu stylów, ale wolisz, aby wartość była dziedziczona, a nie przywracana do domyślnej przeglądarki.

Na przykład:

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>

Chciałbym zacytować oficjalną dokumentację CSS | MDN do wykorzystania w przyszłości, patrząc na różnice między nimi:

INICJAŁ

Początkowe słowo kluczowe CSS stosuje początkową wartość właściwości do elementu. Jest to dozwolone dla każdej właściwości CSS i powoduje, że element, dla którego jest określony, używa początkowej wartości właściwości.

Dlatego zgodnie z twoim przykładem:

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>

Zauważ, że początkowy właściwość zachowuje początkowy na colorwłasność elementu.

NIEOPRAWNY

Nieskonfigurowane słowo kluczowe CSS to kombinacja początkowych i dziedziczonych słów kluczowych. Podobnie jak te dwa inne słowa kluczowe dotyczące całego CSS, można je zastosować do dowolnej właściwości CSS, w tym skrótu CSS all. To słowo kluczowe resetuje właściwość do jej odziedziczonej wartości, jeśli dziedziczy ona po swoim rodzicu lub do wartości początkowej, jeśli nie. Innymi słowy, zachowuje się jak słowo kluczowe inherit w pierwszym przypadku i jak początkowe słowo kluczowe w drugim przypadku.

Dlatego zgodnie z twoim przykładem:

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>

Zauważ, że wyłączony nieruchomość po prostu resetuje się colorwłaściwości elementu.

WNIOSEK

Pomysł jest dość prosty, ale w praktyce radziłbym zachować ostrożność podczas radzenia sobie z kompatybilnością między przeglądarkami dla obu właściwości CSS ... tak jest na dzień dzisiejszy.