css - other - inspeccionar elemento chrome teclado

¿Qué significan las propiedades de estilo cruzado en los devtools de Google Chrome?

Question

Mientras inspecciona un elemento utilizando los dispositivos de control de Chrome, en la pestaña de elementos, la barra de ''Estilos'' de la derecha muestra las propiedades CSS correspondientes. A veces, algunas de estas propiedades son tachadas. ¿Qué significan estas propiedades?

Answer 1

Además de la respuesta anterior, también quiero destacar un caso de propiedades tachadas 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 pedido como:

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

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

Answer 2

Cuando una propiedad CSS se muestra como tachado, significa que el estilo tachado se aplicó, pero luego se anuló mediante 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 desactivado 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 div s, pero se aplicó un color de fondo diferente a los div s con una determinada identificación, el primer color aparecerá pero se tachará, ya que el segundo color lo reemplazó (en la lista de propiedades para el div con ese id).

Answer 3

En otros comentarios. Si está utilizando las consultas @media (como la @media screen (max-width:500px )), preste especial atención a la aplicación de la consulta @media DESPUÉS de que haya terminado con los estilos normales. Debido a que la consulta @media será tachada (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 **

Answer 4

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

Answer 5

Si desea aplicar el estilo incluso después de obtener la indicación de acometida, puede usar "!important" para imponer el estilo. Puede que no sea una solución correcta pero resuelva el problema.