Что такое "начальное" значение в CSS?

Я думал, что значение initial будет восстанавливать первоначально созданные стили (применительно к browser internal user-agent).

Пример:

div.inline {
  display: inline;
}

div.initial {
  display: initial;
}

Я ожидал, что правило div.inline будет отображать <div class="inline"> в встроенном режиме, а правило div.initial будет отображать <div class="initial">, используя исходное отображаемое значение div block.

Но когда я исследую это, <div class="initial"> отображает строку. Я ошибаюсь? Может ли кто-нибудь более подробно остановиться на этом?

Ответ 1

Значение initial (не атрибут) обозначает начальное значение свойства, как определено в спецификациях CSS: "Начальное ключевое слово представляет указанное значение, которое обозначается как начальное значение свойства." Таким образом, его значение зависит от свойства, но не от чего-либо другого, например. а не в браузере или на элементе, к которому применяется свойство. Таким образом, это не означает, что браузер по умолчанию.

Например, для свойства display initial всегда означает inline, потому что это назначенное начальное значение свойства. В примере примера по умолчанию браузер имеет значение block, так как элемент div.

Таким образом, значение initial имеет ограниченную полезность. Его главный эффект, похоже, состоит в том, чтобы запутать людей из-за недоразумений. Возможный случай использования для свойства color, так как его начальное значение зависит от браузера (в основном черного цвета, как мы знаем, но не обязательно). Для него initial означает браузер по умолчанию, так как это означает, что свойство было определено. Аналогичный вариант использования для font-family: путем объявления font-family: initial, вы получаете шрифт браузера по умолчанию (который может зависеть от настроек браузера).

Полезность дополнительно ограничена отсутствием поддержки IE (даже IE 10).

Ответ 2

Источник

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

/* give headers a green border */
 h2 { border: medium solid green }

 /* but make those in the sidebar use the value of the "color" property */
 #sidebar h2 { border-color: initial; }
<p style="color:red"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p>