What is the difference between the initial and unset values?

Question

A simple example:

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

What is the difference between initial and unset? Only supports browsers

CanIUse: CSS unset value

Developer Mozilla Web CSS initial

Answer 1

According to your link:

unset is a CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited

Here is an example:

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>

A scenario where the difference matter is if you are trying to override some CSS in your stylesheet, but you would prefer the value is inherited rather than set back to the browser default.

For instance:

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>