Tenga en cuenta que no el panel Estilos (sé lo que significa en gris en ese contexto, no aplicado), sino el siguiente panel, el panel Propiedades calculadas.
¿Qué significa cuando una propiedad calculada aparece atenuada?
Ejemplo:
css
google-chrome
google-chrome-devtools
AmbrosioCapilla
fuente
fuente
Respuestas:
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 yfont-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.
fuente
run-time calculatedya que las propiedades grises suelen ser 'altura' y 'ancho', que si lo piensas, son valores que dependen dinámicamente de los elementos secundarios de un elemento (por ejemplo, la cantidad de texto y el tamaño de fuente de el texto que está contenido dentro del elemento, o el ancho del padre cuando el elemento tiene ancho: 100%)widthestilo, por ejemplo.