Que signifient les propriétés de style croisé dans les devtools de Google Chrome?

Lors de l'inspection d'un élément à l'aide des devtools de Chrome, dans l'onglet Éléments, la barre de droite «Styles» affiche les propriétés CSS correspondantes. Parfois, certaines de ces propriétés sont rayées. Que signifient ces propriétés?

Lorsqu'une propriété CSS apparaît comme barrée, cela signifie que le style barré a été appliqué, mais remplacé par un sélecteur plus spécifique, une règle plus locale ou par une propriété ultérieure au sein de la même règle.

(Cas particuliers: un style sera également affiché comme barré si un style existe dans une règle de correspondance mais est commenté, ou si vous l'avez désactivé manuellement en le décochant dans les outils de développement Chrome. Il s'affichera également comme barré , mais avec une icône d'erreur, si le style a une erreur de syntaxe.)

Par exemple, si une couleur d'arrière-plan a été appliquée à tous les divs, mais qu'une couleur d'arrière-plan différente a été appliquée aux divs avec un certain identifiant, la première couleur apparaîtra mais sera barrée, car la deuxième couleur l'a remplacée (dans la propriété liste pour divavec cet identifiant).

Sur une note latérale. Si vous utilisez des requêtes @media (telles que @media screen (max-width:500px)) prêtez une attention particulière à l'application de la requête @media APRÈS avoir terminé avec les styles normaux. Parce que la requête @media sera barrée (même si elle est plus spécifique) si elle est suivie par CSS qui manipule les mêmes éléments. Exemple:

@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 **

En plus de la réponse ci-dessus, je tiens également à souligner un cas de propriété rayée qui m'a vraiment surpris.

Si vous ajoutez une image d'arrière-plan à un div:

<div class = "myBackground">

</div>

Vous voulez redimensionner l'image pour qu'elle tienne dans les dimensions de la div, ce serait donc votre définition de classe normale.

.myBackground {

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

}

mais si vous échangez la commande comme: -

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

puis en chrome, vous verrez la taille de l' arrière-plan barrée. Je ne sais pas pourquoi c'est, mais oui, vous ne voulez pas jouer avec.

Si vous souhaitez appliquer le style même après avoir obtenu l'indication de creux, vous pouvez utiliser "!important"pour appliquer le style. Ce n'est peut-être pas une bonne solution mais résolvez le problème.

Il y a des cas où vous copiez et collez le code CSS quelque part et cela casse le format afin que Chrome affiche l'avertissement jaune. Vous devriez essayer de reformater à nouveau le code CSS et ça devrait aller.