NB: Esta respuesta no tiene evidencia sólida, se basa en mis observaciones a lo largo del tiempo.
Las propiedades calculadas en gris no son predeterminadas ni heredadas. Esto solo ocurre en propiedades que no se definieron para el elemento, pero que se calcularon a partir de sus elementos secundarios o primarios en función de la representación del diseño en tiempo de ejecución.
Tome esta simple página como ejemplo, displayes predeterminada y font-sizese hereda:
<style>
div { font-size: 13px; }
</style>
<div>
<p>asdf</p>
</div>
En este ejemplo particular, heightse calcula a partir del <p>nodo de texto secundario (tamaño de fuente más alto de línea), widthse calcula a partir del <div>ancho de su padre , que también se calcula a partir de su padre <body>.
EDITAR: Bueno, lo pensé de nuevo, aquí está mi respuesta basada en opiniones . Realmente debería ir y echar un vistazo al código fuente de Chromium más tarde: D
Al expandir esas flechas, podría ver qué regla real se aplica al elemento, entre todas las definidas en su contra (ya sea directamente o heredadas, ya sea por el desarrollador o el navegador):
Aquí puede rastrear cada definición, incluso incluidas las reglas integradas del navegador, y verificar con el mecanismo en cascada (anulación) de CSS.
Por lo tanto, para aquellos elementos que no tienen una definición de CSS (no están directamente definidos, no heredados, no tienen un navegador integrado), no tiene ninguna fuente para rastrear. Y los valores de las propiedades se calculan totalmente en tiempo de ejecución.
Si marca Mostrar todo , se muestran más propiedades en gris. Estos tampoco están definidos en ninguna parte. Pero a diferencia de las capturas de pantalla anteriores, estos no se calculan en tiempo de ejecución , son el valor predeterminado de la especificación CSS.
