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

Question

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 initial e unset? Solo supporta i browser

CanIUse: CSS unset value

Developer Mozilla Web CSS initial

Answer 1

_{Moving mio commento ad una risposta}

Secondo your link:

unset è un valore CSS che è lo stesso di "Inherit "se una proprietà è ereditata o" iniziale "se una proprietà erty non è ereditaria

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 questione è se si sta cercando di sostituire alcuni CSS nel foglio di stile, ma si sarebbe preferisci che il valore sia ereditato piuttosto che impostato di default sul browser.

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>

Answer 2

vorrei citare il CSS ufficiale | documentazione MDN per riferimento futuro, quando esaminando le differenze tra ogni:

INITIAL

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>

Si noti come il primo proprietà conserva il iniziale la proprietà color dell'elemento.

UNSET

La parola chiave CSS impostata è la combinazione di iniziale ed ereditare le parole chiave. Come queste altre due parole chiave CSS, può essere applicato a qualsiasi proprietà CSS, inclusa la stenografia CSS tutto. Questa parola chiave reimposta 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 semplicemente azzera la color proprietà dell'elemento.

IN CONCLUSIONE

L'idea è abbastanza semplice, ma in pratica Vorrei consigli cautela quando si tratta con la compatibilità cross browser per entrambe le proprietà CSS ... cioè a partire da oggi.