Qual è la differenza tra i valori iniziali e non impostati?

Un semplice esempio:

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

Qual'è la differenza tra initiale unset? Supporta solo i browser

CanIUse: valore non impostato CSS

Sviluppatore Mozilla Web CSS iniziale

Secondo il tuo link :

unset è un valore CSS che è uguale a "inherit" se una proprietà viene ereditata o "iniziale" se una proprietà non viene ereditata

Ecco un esempio:

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>

Uno scenario in cui la differenza è importante se stai cercando di sovrascrivere alcuni CSS nel tuo foglio di stile, ma preferiresti che il valore sia ereditato piuttosto che reimpostato sul browser predefinito.

Per esempio:

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>

Vorrei citare la documentazione ufficiale CSS | MDN per riferimento futuro quando esaminerò le differenze tra ciascuno:

INIZIALE

La parola chiave CSS iniziale applica il valore iniziale di una proprietà a un elemento. È consentito su ogni proprietà CSS e fa in modo che l'elemento per il quale è specificato utilizzi il valore iniziale della proprietà.

Quindi secondo il tuo esempio:

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>

Notare come la proprietà iniziale mantiene l' iniziale la colorproprietà dell'elemento.

NON SETTATO

La parola chiave CSS non impostata è la combinazione delle parole chiave iniziali ed ereditate. Come queste altre due parole chiave a livello di CSS, può essere applicata a qualsiasi proprietà CSS, inclusa l'abbreviazione CSS all. Questa parola chiave ripristina la proprietà al suo valore ereditato se eredita dal suo genitore o al suo valore iniziale in caso contrario. In altre parole, si comporta come la parola chiave inherit nel primo caso e come la parola chiave iniziale nel secondo caso.

Quindi secondo il tuo esempio:

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>

Nota come la proprietà unset reimposta semplicemente la colorproprietà dell'elemento.

IN CONCLUSIONE

L'idea è abbastanza semplice, ma in pratica consiglierei cautela quando si tratta di compatibilità cross browser per entrambe le proprietà CSS ... questo è da oggi.