teclado - ¿Qué significa cuando una regla CSS está atenuada en el inspector de elementos de Chrome?
inspeccionar elemento guardar cambios (8)
Cuando se utiliza el paquete web, cualquier regla o propiedad css que se haya cambiado en el código fuente se atenúa cuando la página se vuelve a cargar después de una reconstrucción. Esto es realmente molesto y me obligó a recargar la página cada vez.
Estoy inspeccionando un elemento h2 en una página web utilizando el inspector de elementos de Google Chrome y algunas de las reglas CSS, que parecen estar aplicadas, están en gris. Parece que un tachado indica que una regla fue anulada, pero ¿qué significa cuando un estilo está en gris?
Esto también ocurre si agrega un estilo a través del inspector, pero ese nuevo estilo no se aplica al elemento que ha seleccionado. Por lo general, los estilos que se muestran son solo los del elemento seleccionado, por lo que el gris indica que el estilo que acaba de agregar no selecciona el elemento que tiene el foco en el navegador DOM.
Estoy respondiendo mucho después de que la pregunta ya tiene muchas respuestas correctas porque me encontré con un caso diferente de tener un bloque de código CSS atenuado y no editable en Chome DevTools: El bloque en cuestión contenía caracteres U + 200B ZERO WIDTH SPACE . Una vez que los encontré y los eliminé, pude editar el bloque en Chrome DevTools nuevamente. Presumiblemente, esto también podría suceder con otros personajes que no son ascii, no he tratado de averiguarlo.
Michael Coleman tiene la respuesta correcta. Solo quiero añadir una imagen simple para acompañarla. El enlace que incluyó tiene este sencillo ejemplo: http://commandlinefanatic.com/art033ex4.html
El HTML / DOM se ve así ...
El panel de estilos en Chrome se ve así cuando selecciona el elemento p ...
Como puede ver, el elemento p hereda de sus ancestros (los divs). Entonces, ¿por qué el estilo background-color: blue grisáceo? Porque es parte de un conjunto de reglas que tiene al menos un estilo que es heredable. Ese estilo heredable es text-indent: 1em
background-color:blue no es heredable, pero es parte del conjunto de reglas que contiene text-indent: 1em que es heredable y los desarrolladores de Chrome querían estar completos al mostrar conjuntos de reglas. Sin embargo, para distinguir entre los estilos en el conjunto de reglas que son heredables de los estilos que no lo son, los estilos que no son heredables aparecen en gris.
Para mí, las respuestas actuales no explicaron el problema lo suficiente, así que estoy agregando esta respuesta que, con suerte, podría ser útil para otros.
Texto en gris / atenuado, puede significar ya sea
- es una regla / propiedad predeterminada que aplica el navegador, que incluye propiedades predeterminadas de mano corta.
- Se trata de una herencia que es un poco más complicada.
Herencia
Nota: El panel de "estilo" de las herramientas de desarrollo de Chrome mostrará un conjunto de reglas, porque una o más reglas del conjunto se están aplicando al nodo DOM seleccionado actualmente. Supongo que, en aras de la integridad, las herramientas de desarrollo muestran todas las reglas de ese conjunto, ya sea que se apliquen o no.
En el caso de que una regla se aplique al elemento seleccionado actualmente debido a la herencia (es decir, la regla se aplicó a un antepasado y el elemento seleccionado lo heredó), Chrome volverá a mostrar todo el conjunto de reglas.
Las reglas que se aplican al elemento seleccionado actualmente aparecen en texto normal.
Si existe una regla en ese conjunto pero no se aplica porque es una propiedad no heredable (p. Ej., Color de fondo), aparecerá como texto atenuado / atenuado.
Aquí hay un artículo que brinda una buena explicación - (Nota: el elemento relevante se encuentra en la parte inferior del artículo - figura 21 - desafortunadamente, la sección correspondiente no tiene un encabezado) - http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033
Extracto del artículo.
Este [escenario de herencia] ocasionalmente puede crear un poco de confusión, debido a las propiedades predeterminadas de la mano corta; la figura 21 ilustra las propiedades predeterminadas de la mano corta de la propiedad de fuente junto con las propiedades no heredadas. Solo tenga en cuenta el contexto que está mirando al examinar elementos.
Significa que la regla ha sido reemplazada por otra regla con mayor prioridad. Por ejemplo, hojas de estilo con:
h2 {
color: red;
}
h2 {
color: blue;
}
El inspector mostrará el color:red; la regla color:red; en gris y color:blue; normalmente.
Lea sobre la herencia de CSS para saber qué reglas se heredan / tienen mayor prioridad.
EDITAR:
Mezcla: las reglas en gris son las reglas de desarmado, que usan una hoja de estilo predeterminada especial que se aplica a todos los elementos (las reglas que hacen que el elemento sea reproducible, porque todos los estilos deben tener un valor).
Significa que la regla se ha heredado, pero no es aplicable al elemento seleccionado:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
El panel solo contiene propiedades de las reglas que son directamente aplicables al elemento seleccionado. Para mostrar propiedades heredadas, active la casilla de verificación Mostrar heredado. Dichas propiedades se mostrarán en una fuente atenuada.
Ejemplo en vivo: inspeccionar el elemento que contiene el texto "¡Hola mundo!"
div {
margin: 0;
}
div#foo {
margin-top: 10px;
}
<div id="foo">Hello, world!</div>
