Qual é a diferença entre os valores iniciais e não definidos?

86

Um exemplo simples:

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 é a diferença entre initiale unset? Suporta apenas navegadores

CanIUse: valor não definido de CSS

Desenvolvedor Mozilla Web CSS inicial

css zloctb
fonte

Respostas:

108

De acordo com seu link :

unset é um valor CSS igual a "herdar" se uma propriedade for herdada ou "inicial" se uma propriedade não for herdada

Aqui está um exemplo:

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>
Expandir snippet

Um cenário em que a diferença importa é se você está tentando substituir algum CSS em sua folha de estilo, mas prefere que o valor seja herdado em vez de voltar ao padrão do navegador.

Por exemplo:

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>
Expandir snippet

Josh Crozier
fonte
7

Gostaria de citar a documentação oficial do CSS | MDN para referência futura ao examinar as diferenças entre cada um:

INICIAL

A palavra-chave CSS inicial aplica o valor inicial de uma propriedade a um elemento. É permitido em todas as propriedades CSS e faz com que o elemento para o qual está especificado use o valor inicial da propriedade.

Portanto, de acordo com seu exemplo: 

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>
Expandir snippet

Observe como a propriedade inicial retém a propriedade inicialcolor do elemento.

NÃO DEFINIDO

A palavra-chave CSS não definida é a combinação das palavras-chave inicial e herdada. Como essas duas outras palavras-chave em todo o CSS, ele pode ser aplicado a qualquer propriedade CSS, incluindo a abreviação de CSS all. Esta palavra-chave redefine a propriedade para seu valor herdado se ela herdar de seu pai ou para seu valor inicial se não for. Em outras palavras, ela se comporta como a palavra-chave herdada no primeiro caso e como a palavra-chave inicial no segundo caso.

Portanto, de acordo com seu exemplo:

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>
Expandir snippet

Observe como a propriedade unset simplesmente redefine a colorpropriedade do elemento.

EM CONCLUSÃO

A ideia é bastante direta, mas na prática eu aconselharia cautela ao lidar com compatibilidade entre navegadores para ambas as propriedades CSS ... isso é até hoje.

ERA
fonte