¿Qué significan las propiedades de estilo cruzado en las herramientas de desarrollo de Google Chrome?


274

Al inspeccionar un elemento utilizando las herramientas de desarrollo de Chrome, en la pestaña de elementos, la barra 'Estilos' del lado derecho muestra las propiedades CSS correspondientes. A veces, algunas de estas propiedades son tachadas. ¿Qué significan estas propiedades?


44
Anticipé esta pregunta. +1 por esto.
Rajesh Paul

Respuestas:


314

Cuando una propiedad CSS se muestra como tachada, significa que se aplicó el estilo tachado, pero que fue anulado por un selector más específico, una regla más local o una propiedad posterior dentro de la misma regla.

(Casos especiales: un estilo también se mostrará como tachado si existe un estilo en una regla coincidente pero está comentado, o si lo ha deshabilitado manualmente al desmarcarlo dentro de las herramientas para desarrolladores de Chrome. También se mostrará como cruzado fuera, pero con un icono de error, si el estilo tiene un error de sintaxis).

Por ejemplo, si se aplicó un color de fondo a todos los divs, pero se aplicó un color de fondo diferente a divs con una identificación determinada, el primer color aparecerá pero se tachará, ya que el segundo color lo ha reemplazado (en la propiedad lista para el divcon esa identificación).


18
En una nota al margen, las propiedades tachadas pueden ser "canceladas" por las propiedades con el mismo nombre más adelante en la misma regla CSS (como se requiere la especificación CSS)
Alexander Pavlov

57
@JacobM: Cómo saber qué propiedad anula la propiedad marcada.
ArunRaj

51
@ArunRaj: no hay una manera fácil de saber qué propiedad (o propiedades) está anulando la tachada. Una opción es buscar en la pestaña de estilos "calculados" para encontrar el mismo tipo de propiedad, y luego, si lo expande, debería ver el origen de las diversas reglas que intentan aplicar esa propiedad (incluida la que está realmente activa) . Entonces, si ve que "font-size: 11px" está tachado, busque en las propiedades calculadas "font-size", y debería ver todos los lugares donde se aplica ese tamaño de fuente, incluido el realmente activo. Espero que esto ayude.
Jacob Mattison

77
Ahora hay un cuadro Filtro en la parte superior de la pestaña Estilos. Si se pregunta qué ha anulado border-color, simplemente escriba border-coloren el Filtro. Mostrará todas las reglas que contienen esa propiedad, con la propiedad resaltada en amarillo. Esta característica también está disponible en Firefox.
joeytwiddle

44
También quería agregar: si un estilo está tachado pero ya está en la parte superior, entonces es posible que tenga un estilo CSS en algún lugar !importantque lo sobrescriba.
Dominic K

12

En otros comentarios. Si está utilizando consultas @media (como @media screen (max-width:500px)), preste especial atención a aplicar la consulta @media DESPUÉS de que haya terminado con los estilos normales. Porque la consulta @media se tachará (aunque sea más específica) si es seguida por css que manipula los mismos elementos. Ejemplo:

@media (max-width:750px){
#buy-box {width: 300px;}
}

#buy-box{
width:500px;
}

** width will be 500px and 300px will be crossed out in Developer Tools. **

#buy-box{
width:500px;
}

@media (max-width:750px){
#buy-box {width: 300px;}
}

** width will be 300px and 500px will be crossed out **

¿Qué pasa si las consultas de medios están en un archivo CSS diferente?
Carlos Hernández Gil

11

Además de la respuesta anterior, también quiero destacar un caso de propiedad tachada que realmente me sorprendió.

Si está agregando una imagen de fondo a un div:

<div class = "myBackground">

</div>

Desea escalar la imagen para que se ajuste a las dimensiones del div, por lo que esta sería su definición de clase normal.

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

pero si intercambias el orden como: -

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

luego, en Chrome, verá el tamaño del fondo como marcado. No estoy seguro de por qué es esto, pero sí, no quieres meterte con eso.


8

Si desea aplicar el estilo incluso después de recibir una indicación de tachado, puede usarlo "!important"para aplicar el estilo. Puede que no sea una solución correcta, pero resuelva el problema.


Tuve problemas para escalar un GoogleMap para móviles a través de los medios. Tengo una configuración básica para navegadores (sin medios) seguida de varios medios con tamaños más pequeños, lo que no funcionó (el estilo correcto para dispositivos móviles se mostró en GC pero con tachado). Después de agregar! Importante, funciona, pero no entiendo la "lógica" detrás de esto ...
FredyWenger

-5

Hay algunos casos en los que copia y pega el código CSS en algún lugar y se rompe el formato para que Chrome muestre la advertencia amarilla. Debería intentar volver a formatear el código CSS nuevamente y debería estar bien.


2
La pregunta no preguntó nada sobre "advertencias amarillas". Esta respuesta debería ser un comentario en el mejor de los casos.
Simon
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.