Что означает, когда в Chrome Dev Tools отображается вычисленное свойство greyed out

Обратите внимание, что не панель "Стили" (я знаю, что в этом контексте не было выделено серым цветом), а следующая панель поверх панели "Вычислимые свойства".

Что это значит, когда вычисленное свойство отображается серым?

Пример:

Ответ 1

NB: Этот ответ не имеет достоверных доказательств, он основан на моих наблюдениях в течение времени.

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

Возьмите эту простую страницу в качестве примера, display по умолчанию и font-size наследуется:

<style>
  div { font-size: 13px; }
</style>
<div>
  <p>asdf</p>
</div>

В этом конкретном примере height вычисляется из <p> children - text node (размер шрифта плюс высота строки), width вычисляется из его родительской - <div> width, которая также вычисляется из его родительский <body>.

EDIT: Ну, я снова подумал, вот мой отзыв на основе. Я должен по-настоящему взглянуть на исходный код Chromium позже: D

Развернув эти стрелки, вы можете увидеть, какое фактическое правило применяется к элементу, среди всех определенных против него (прямо или унаследованных либо разработчиком, либо браузером):

Здесь вы можете проследить до каждого определения, включая встроенные правила браузера, и проверить с помощью каскадного (переопределяющего) механизма CSS.

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

Если вы отметите Показать все, отображаются более серые свойства. Они нигде не определены. Но в отличие от предыдущих скриншотов, они не рассчитаны на время выполнения - это значение спецификации CSS по умолчанию.