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

274

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?

rohitmishra
la source
4
J'ai anticipé cette question. +1 pour cela.
Rajesh Paul

Réponses:

314

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).

Jacob Mattison
la source
18
Sur une note latérale, les propriétés barrées peuvent être celles "annulées" par les propriétés portant le même nom plus tard dans la même règle CSS (comme l'exigent les spécifications CSS)
Alexander Pavlov
57
@JacobM: comment savoir quelle propriété remplace la propriété supprimée.
ArunRaj
51
@ArunRaj - Il n'y a pas de moyen facile de savoir quelle propriété (ou propriétés) est prioritaire sur la propriété barrée. Une option consiste à regarder dans l'onglet des styles "calculés" pour trouver le même type de propriété, puis si vous développez cela, vous devriez voir la source des différentes règles qui tentent d'appliquer cette propriété (y compris celle qui est réellement active) . Donc, si vous voyez que "font-size: 11px" est barré, regardez dans les propriétés calculées pour "font-size", et vous devriez voir tous les endroits où la police est appliquée, y compris celle réellement active. J'espère que cela t'aides.
Jacob Mattison
7
Il y a maintenant une zone Filtre en haut de l'onglet Styles. Si vous vous demandez ce qui a remplacé, border-colortapez simplement border-colordans le filtre. Il affichera toutes les règles contenant cette propriété, la propriété étant surlignée en jaune. Cette fonctionnalité est également disponible dans Firefox.
joeytwiddle
4
Je voulais également ajouter: si un style est supprimé mais qu'il est déjà en haut, vous pouvez avoir un style CSS quelque part avec !importantqui l'écrase.
Dominic K
12

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 **
sanjihan
la source
que faire si les requêtes multimédias se trouvent dans un fichier css différent?
Carlos Hernández Gil
11

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.

Rishul Matta
la source
8

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.

Nanda
la source
J'ai eu des problèmes pour mettre à l'échelle un GoogleMap pour mobile sur un support. J'ai un paramètre de base pour les navigateurs (sans support) suivi de divers supports avec des tailles plus petites, ce qui n'a pas fonctionné (le montant correct pour mobile est affiché dans GC mais avec barré). Après avoir ajouté! Important, ça marche, mais je ne comprends pas la "logique" derrière ça ...
FredyWenger
-5

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.

hien711
la source
2
La question ne demandait rien au sujet des "avertissements jaunes". Cette réponse devrait au mieux faire un commentaire.
Simon