¿Qué significa que una regla CSS esté atenuada en el inspector de elementos de Chrome?

248

Estoy inspeccionando un h2elemento en una página web usando el inspector de elementos de Google Chrome y algunas de las reglas CSS, que parecen estar aplicadas, están atenuadas. Parece que un tachado indica que una regla fue anulada, pero ¿qué significa cuando un estilo está atenuado?

Rob Sobers
fuente

Respuestas:

95

Para mí, las respuestas actuales no explicaron el problema completamente, por lo que estoy agregando esta respuesta que espero sea útil para otros.

En gris / atenuado fuera de texto, puede significar o bien

  1. es una regla / propiedad predeterminada que aplica el navegador, que incluye propiedades predeterminadas de abreviatura.
  2. Implica 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 exhaustividad, las herramientas de desarrollo muestran todas las reglas de ese conjunto, se apliquen o no.

En el caso de que se aplique una regla al elemento seleccionado actualmente debido a la herencia (es decir, la regla se aplicó a un antepasado y el elemento seleccionado la 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 (por ejemplo, color de fondo), aparecerá como texto atenuado / atenuado.

Aquí hay un artículo que da una buena explicación - (Nota: el elemento relevante está en la parte inferior del artículo - figura 21 - desafortunadamente la sección relevante no tiene un título) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

Extracto del articulo

Este [escenario de herencia] ocasionalmente puede crear un poco de confusión, debido a las propiedades predeterminadas de mano corta; la figura 21 ilustra las propiedades predeterminadas de mano corta de la propiedad de fuente junto con las propiedades no heredadas. Solo tenga en cuenta el contexto que está viendo al examinar elementos.

Michael Coleman
fuente
10
La afirmación "reglas que se heredan, pero no se aplican , aparecerán como texto atenuado / atenuado" no es cierta. Si no se aplica, tendrán un tachado. He actualizado mi respuesta con una captura de pantalla y un ejemplo en vivo.
Rob Sobers
10
¡¡¡Esta es la respuesta correcta!!! La oración clave es ... "Si existe una regla en ese conjunto pero no se aplica porque es una propiedad no heredable (por ejemplo, color de fondo), aparecerá como texto atenuado / atenuado".
Niko Bellic
Esta es definitivamente la respuesta correcta. Si aparece una propiedad en gris dentro de una sección que dice "Heredado de [selector]", entonces es una propiedad no heredable que no se aplica al elemento actual. Cualquier propiedad tachada ha sido anulada por un estilo más específico.
onlynone
1
Si las reglas están atenuadas cuando no son heredables, ¿por qué mi elemento div tiene atenuadas las reglas de 'ancho'? ¿El ancho no es heredable? Estoy preguntando esto en serio, por cierto.
Moosefetcher
1
... Entonces, si ve que Chrome está atenuando las reglas CSS que se están aplicando mucho, donde puede desmarcarlas (o cambiar sus valores) y ver un cambio correspondiente en la página, puede ser que la regla afecte al elemento pero no se aplica a ese elemento en particular, sino a un padre.
Ben Wheeler, el
82

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 contiene solo propiedades de reglas que son directamente aplicables al elemento seleccionado. Para mostrar además propiedades heredadas, active la casilla de verificación Mostrar heredado. Dichas propiedades se mostrarán en una fuente atenuada.

las reglas en gris se heredan de los antepasados

Ejemplo en vivo: inspeccione el elemento que contiene el texto "¡Hola, mundo!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}
<div id="foo">Hello, world!</div>

Rob Sobers
fuente
13
@Rob Para ser precisos, cuando un estilo se muestra en gris, significa que se ha heredado de algún otro elemento abarcador, pero no es aplicable al elemento seleccionado . De la documentación: "El panel contiene solo propiedades de reglas que son directamente aplicables al elemento seleccionado. Para mostrar adicionalmente las propiedades heredadas, active la casilla de verificación Mostrar heredado. Dichas propiedades se mostrarán en una fuente atenuada".
drkvogel
2
@RobSobers Desafortunadamente, no creo que su ejemplo demuestre herencia. ¿De dónde es el padre ancestro del que hereda el div? Si te desplazas hacia abajo en el panel Styels en Chrome, verás las secciones tituladas "Heredado de ..." ¿Qué significan las reglas atenuadas? ¿Puedes incorporar eso en un ejemplo?
Niko Bellic
8
No entiendo por qué esta respuesta es a. marcado como la mejor respuesta y b. tiene tantos votos a favor. Está claramente mal. Los márgenes no son propiedades heredables ( stackoverflow.com/a/5612360/24267 ) La respuesta de Michael Coleman es la correcta. Oh, no quieres decir heredado de un elemento ancestro, quieres decir ... No estoy seguro de lo que quieres decir exactamente. En cualquier caso, esta respuesta no es correcta en 2015, con Chrome 46.
mhenry1384
3
Claramente, los votos son para un poco de magia de MS Paint con las flechas y ese efecto de sombra de burbuja. Votado como incorrecto.
David
2
@ mhenry1384 "a" es fácilmente explicable: porque está escrito por la persona que hizo la pregunta.
Andrew Grimm el
27

Michael Coleman tiene la respuesta correcta. Solo quiero agregar una imagen simple para acompañarla. El enlace que incluyó tiene este simple ejemplo: http://commandlinefanatic.com/art033ex4.html

El HTML / DOM se ve así ...

HTML

El panel de estilos en Chrome se ve así cuando selecciona el elemento p ...

Panel de estilos

Como puede ver, el elemento p hereda de sus antepasados ​​(los divs). Entonces, ¿por qué el estilo está background-color: blueatenuado? Porque es parte de un conjunto de reglas que tiene al menos un estilo que es heredable. Ese estilo heredable estext-indent: 1em

background-color:blueno es heredable, pero es parte del conjunto de reglas que contiene lo text-indent: 1emque es indescifrable 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 inherentes están atenuados.

Niko Bellic
fuente
1
Esta es la mejor respuesta, ya que ofrece una demostración simple. Abra esa URL en una nueva pestaña y use las Herramientas para desarrolladores de Chrome para seleccionar los distintos divsy p. Verás que background-colorno está atenuado div#two. Pero background-colorestá atenuado por div#threey p.
wisbucky
gran explicación
Dirk Boer
10

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.

AaronLS
fuente
Este fue mi problema. ¡Gracias!
Chuck Le Butt
5

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á la regla en color:red;gris y color:blue;normalmente.

Lea sobre la herencia CSS para saber qué reglas se heredan / tienen mayor prioridad.

EDITAR:

Mezcla: las reglas en gris son las reglas sin definir, que utilizan una hoja de estilo predeterminada especial que se aplica a todos los elementos (las reglas que hacen que el elemento sea representable, porque todos los estilos deben tener un valor).

tcooc
fuente
Acabo de probar esto y creo que es incorrecto. En el caso de que se anule una regla, habrá un tachado (como lo indica mi pregunta). Ver: yfrog.com/f/j3fooep
Rob Sobers
@Rob: tuvo una confusión ya que devtools no se iniciaba. Lo puse en funcionamiento y edité mi respuesta con mi respuesta probada .
tcooc
No estoy del todo seguro de que eso sea correcto tampoco; las reglas desvanecidas son las que he establecido en mi propia hoja de estilos (por ejemplo, font-size: 20px;)
Rob Sobers
1

Cuando se usa webpack, cualquier regla o propiedad css que se haya cambiado en el código fuente aparece atenuada cuando la página se recarga después de una reconstrucción. Esto es realmente molesto y me obligó a volver a cargar la página cada vez.

usuario2528531
fuente
0

ingrese la descripción de la imagen aquí

La nueva versión del desarrollador de Chrome muestra de dónde se hereda.

jmojico
fuente
0

Respondo mucho después de que la pregunta ya tenga muchas respuestas correctas porque encontré un caso diferente de tener un bloque de código CSS atenuado e ineditable 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 podría suceder también con otros personajes no ascii, no he tratado de resolverlo.

davidreedernst
fuente