Quelle est la différence entre les valeurs initiales et non définies?

Un exemple simple:

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

Quelle est la différence entre initialet unset? Prend uniquement en charge les navigateurs

CanIUse: valeur CSS non définie

Développeur Mozilla Web CSS initial

Selon votre lien :

unset est une valeur CSS identique à "inherit" si une propriété est héritée ou "initiale" si une propriété n'est pas héritée

Voici un exemple:

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>

Un scénario où la différence est importante si vous essayez de remplacer certains CSS dans votre feuille de style, mais que vous préférez que la valeur soit héritée plutôt que de revenir à la valeur par défaut du navigateur.

Par exemple:

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>

Je voudrais citer la documentation officielle CSS | MDN pour référence future lors de l'examen des différences entre chacun:

INITIALE

Le mot-clé CSS initial applique la valeur initiale d'une propriété à un élément. Il est autorisé sur chaque propriété CSS et oblige l'élément pour lequel il est spécifié à utiliser la valeur initiale de la propriété.

Donc selon votre exemple:

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>

Notez comment la propriété initiale conserve la propriété initialecolor de l'élément.

UNSET

Le mot-clé CSS non défini est la combinaison des mots-clés initial et hérité. Comme ces deux autres mots-clés à l'échelle CSS, il peut être appliqué à n'importe quelle propriété CSS, y compris le raccourci CSS all. Ce mot clé réinitialise la propriété à sa valeur héritée si elle hérite de son parent ou à sa valeur initiale dans le cas contraire. En d'autres termes, il se comporte comme le mot clé inherit dans le premier cas et comme le mot clé initial dans le second cas.

Donc selon votre exemple:

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>

Notez comment la propriété unset réinitialise simplement la colorpropriété de l'élément.

EN CONCLUSION

L'idée est assez simple, mais dans la pratique, je conseillerais d'être prudent lorsqu'il s'agit de la compatibilité entre navigateurs pour les deux propriétés CSS ... c'est à partir d'aujourd'hui.