В чем разница между начальным и неустановленным значениями?

Ответы:

108

По вашей ссылке :

unset это значение CSS, такое же, как «наследовать», если свойство унаследовано, или «начальное», если свойство не унаследовано.

Вот пример:

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>
Развернуть фрагмент

Сценарий, в котором разница имеет значение, если вы пытаетесь переопределить некоторый CSS в своей таблице стилей, но вы бы предпочли, чтобы значение было унаследовано, а не возвращалось к значениям по умолчанию браузера.

Например:

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>
Развернуть фрагмент

Джош Крозье
источник
7

Я хотел бы процитировать официальную документацию CSS | MDN для справок в будущем при изучении различий между ними:

НАЧАЛЬНЫЙ

Ключевое слово initial CSS применяет начальное значение свойства к элементу. Это разрешено для каждого свойства CSS и заставляет элемент, для которого он указан, использовать начальное значение свойства.

Поэтому согласно вашему примеру: 

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>
Развернуть фрагмент

Обратите внимание , как первоначальное свойство сохраняет первоначальное в colorсвойство элемента.

ОТКРЫТЬ

Ключевое слово CSS unset - это комбинация начального и наследуемого ключевых слов. Подобно этим двум другим ключевым словам CSS, его можно применить к любому свойству CSS, включая сокращенное обозначение CSS all. Это ключевое слово сбрасывает свойство до его унаследованного значения, если оно наследуется от своего родителя, или до его начального значения, если нет. Другими словами, он ведет себя как ключевое слово inherit в первом случае и как ключевое слово initial во втором случае.

Поэтому согласно вашему примеру:

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>
Развернуть фрагмент

Обратите внимание , как задано свойство просто сбрасывает на colorсвойство элемента.

В ЗАКЛЮЧЕНИИ

Идея довольно проста, но на практике я бы посоветовал проявлять осторожность при работе с кросс-браузерной совместимостью для обоих свойств CSS ... то есть на сегодняшний день.

ВОЗРАСТ
источник