Ce qui ne l'a traversé les propriétés de style dans Google Chrome devtools veux dire?

Lors de l'inspection d'un élément à l'aide de google Chrome devtools, dans l'onglet éléments, la droite "Styles" de la barre indique le correspondant de propriétés CSS. À certains moments, certaines de ces propriétés sont biffés. Que faire de ces propriétés?

  • Je m'attendais à cette question. +1 pour cette.
InformationsquelleAutor rohitmishra | 2010-06-15
  1. 298

    Lorsqu'une propriété CSS montre que barré, cela signifie que le barrée style a été appliqué, mais alors remplacé par un autre, plus précis sélecteur, une règle locale, ou par un plus tard, bien au sein de la même règle.

    (Cas particulier: un style sera également affiché comme frappé par si un style existe en une règle de correspondance, mais est commenté, ou si vous l'avez désactivée manuellement, il suffit de décocher dans les outils de développement Chrome. Elle permettra également de montrer que 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é à tous les divs, mais d'une autre couleur d'arrière-plan a été appliqué à divs avec une certaine id de la première couleur va apparaître, mais sera barré, comme la deuxième couleur qui l'a remplacé (dans la liste propriété de la div id).

    • Sur une note de côté, barrée propriétés peuvent être ces "annulé" par la même nom des propriétés plus tard dans la même règle CSS (comme l'exige le CSS.)
    • Comment savoir quelle propriété est primordial barré la propriété.
    • Il n'y a pas un moyen facile de dire qui de propriété (ou propriétés) est remplacer la traversé une. Une option est de chercher dans le "calculé" onglet styles de trouver le même type de bien, et puis si vous l'agrandissez, vous devriez voir la source des diverses règles qui tentent de l'appliquer à la propriété (y compris celui qui est réellement actif). Donc, si vous voyez que "font-size:11px" est barré, regarde dans les propriétés calculées pour "taille de police", et vous devriez voir tous les endroits que la taille de police est appliquée, y compris le fait active. Espérons que cette aide.
    • Il y a maintenant une boîte de Filtre en haut de l'onglet Styles. Si vous vous demandez ce qui a remplacé border-color puis il suffit de taper border-color dans le Filtre. Il indiquera toutes les règles contenant que des biens, à la propriété mis en surbrillance en jaune. Cette fonctionnalité est également disponible dans Firefox.
    • Voulais aussi ajouter: Si un style est frappé, mais il est déjà au dessus, alors vous pourriez avoir un style CSS quelque part avec !important que de l'écraser.
    • Pardonnez mon ignorance - est-ce à dire que vous pouvez simplement supprimer ces lignes à partir du fichier CSS?
    • si un style est barré, cela signifie qu'il n'est pas appliquée pour l'élément spécifique que vous êtes en train de regarder. Donc, si vous avez été à l'enlever, cet élément ne serait pas affectée. Toutefois, cela ne signifie pas nécessairement que le style en question n'est pas d'être appliqué ailleurs. Ce n'est pas vraiment possible de tester si une règle CSS est appliqué n'importe où (puisque les conditions qui permettent de déterminer si elle peut être appliquée sont déterminés au moment de l'exécution).

    InformationsquelleAutor Jacob Mattison
  2. 12

    Sur une note de côté. Si vous utilisez @media requêtes (comme @media screen (max-width:500px)) accorder une attention particulière à l'application de @media query APRÈS vous avez terminé avec la normale styles. Parce que @media query est barré (même si c'est plus précis) si elle est suivie par les 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 **
    • que faire si les media queries sont dans un autre fichier css?
    InformationsquelleAutor sanjihan
  3. 10

    En plus de la réponse ci-dessus je tiens également à mettre en évidence un cas de barré de propriété qui m'a vraiment surpris.

    Si vous ajoutez une image de fond à un div :

    <div class = "myBackground">

</div>

    Vous souhaitez mettre à l'échelle l'image pour l'adapter aux dimensions de la div, donc ce serait normal de votre définition de classe.

    .myBackground {

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

}

    mais si vous échange l'ordre :-

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

    puis dans chrome, vous allez voir fond de taille comme barré out.
    Je ne suis pas sûr pourquoi , mais oui, vous ne voulez pas jouer avec ça.

    InformationsquelleAutor Rishul Matta
  4. 7

    Si vous souhaitez appliquer le style même après avoir frappé avec une indication, vous pouvez utiliser "!important" pour appliquer le style. Il peut ne pas être une bonne solution mais de résoudre le problème.

    • J'ai eu des problèmes toi échelle de GoogleMap pour les mobiles sur les médias. J'ai un réglage de base pour les navigateurs (sans supports), suivie par les différents médias avec de plus petites tailles, ce qui n'a pas fonctionné (le bon style pour mobile a montré dans la GC, mais avec barré). Après j'ai ajouté !important, il fonctionne, mais je ne comprends pas la logique derrière cela...
    InformationsquelleAutor Nanda
  5. -4

    Il y a certains cas, lorsque vous copiez et collez le code CSS en quelque part et il se casse le format de Chrome montrer le jaune d'avertissement. Vous devriez essayer de reformater le code CSS de nouveau et il doit être fine.

    • La question n'a pas demander quoi que ce soit à propos de "jaune mises en garde". Cette réponse à un commentaire au mieux.
    InformationsquelleAutor hien711