¿Qué significan las propiedades de estilo cruzado en las herramientas de desarrollo de Google Chrome?
Al inspeccionar un elemento usando las herramientas de desarrollo de Chrome, en la pestaña de elementos, la barra 'Estilos' del lado derecho muestra las propiedades CSS correspondientes. En ocasiones, algunas de estas propiedades están tachadas. ¿Qué significan estas propiedades?
Cuando una propiedad CSS se muestra tachada, significa que se aplicó el estilo tachado, pero luego se anuló por un selector más específico, una regla más local o por una propiedad posterior dentro de la misma regla.
(Casos especiales: un estilo también se mostrará tachado si existe un estilo en una regla coincidente pero está comentado, o si lo deshabilitó manualmente al desmarcarlo en las herramientas para desarrolladores de Chrome. También se mostrará como tachado (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 divlos correos electrónicos, pero se aplicó un color de fondo diferente a divlos correos electrónicos con una determinada identificación, el primer color aparecerá pero estará tachado, ya que el segundo color lo reemplazó (en la propiedad lista para el divcon esa identificación).
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 haber terminado con los estilos normales. Porque la consulta @media se tachará (aunque sea más específica) si va seguida de 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 **
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ás el tamaño del fondo tachado. No estoy seguro de por qué es así, pero sí, no quieres meterte con eso.
Si desea aplicar el estilo incluso después de recibir una indicación de tachado, puede utilizar "!important"para aplicar el estilo. Puede que no sea una solución adecuada, pero resuelve el problema.
