What Do the Crossed Style Properties in Google Chrome Devtools Mean

What do the crossed style properties in Google Chrome devtools mean?

When a CSS property shows as struck-through, it means that the crossed-out style was applied, but then overridden by a more specific selector, a more local rule, or by a later property within the same rule.

(Special cases: a style will also be shown as struck-through if a style exists in an matching rule but is commented out, or if you've manually disabled it by unchecking it within the Chrome developer tools. It will also show as crossed out, but with an error icon, if the style has a syntax error.)

For example, if a background color was applied to all divs, but a different background color was applied to divs with a certain id, the first color will show up but will be crossed out, as the second color has replaced it (in the property list for the div with that id).

What is the the difference in Chrome DevTools between checked and crossed out CSS styling?

Everything that's checked is active; all things are checked by default when you open the inspector and you can uncheck individual property-value pairs to temporarily disable them, either until you refresh or check the box again.

Everything that's crossed out is something that's currently being overwritten by another property-value pair somewhere else, either in the same selector or in another selector somewhere. It is being overwritten because a value is either the same but written second (like a shorthand property used after a specific one), or it could be overwritten because there is a more specific selector somewhere with the exact same property somewhere.

Multiple style blocks with crossed out declarations in Chrome Developer Tools

It's showing you all the declarations that apply to a given. The crossed off declarations indicate that they've been overridden (usually by one higher up on the list). If they are all exactly the same, that meens you have multiple identical style declarations in your code. You'll need to edit the css files directly to remove them.

What does it mean when a CSS rule is grayed out in Chrome's element inspector?

For me the current answers didn't explain the issue fully enough, so I am adding this answer which hopefully might be useful to others.

Greyed/dimmed out text, can mean either

1. it's a default rule/property the browser applies, which includes defaulted short-hand properties.
2. It involves inheritance which is a bit more complicated.

Inheritance

Note: Chrome dev tools "style" panel will display a rule set, because one or more rules from the set are being applied to the currently selected DOM node.
I guess, for the sake of completeness, dev tools shows all the rules from that set, whether they are applied or not.

In the case where a rule is applied to the currently selected element due to inheritance (i.e. the rule was applied to an ancestor, and the selected element inherited it), chrome will again display the entire ruleset.

The rules which are applied to the currently selected element appear in normal text.

If a rule exists in that set but is not applied because it's a non-inheritable property (e.g. background color), it will appear as greyed/dimmed text.

here is an article that give a good explanation - (Note: the relevant item is at the bottom of the article - figure 21 - unfortunately the relevant section doesn't have a heading) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033

Excerpt from the article

This [inheritance scenario] can occasionally create a bit of confusion, because defaulted
short-hand properties; figure 21 illustrates the defaulted short-hand
properties of the font property along with the non-inherited
properties. Just be aware of the context that you're looking at when
examining elements.

Chrome Developer Tools: How to find out what is overriding a CSS rule?

Use the Computed Style panel of the element inspector. Expand the property of interest to see the list of applicable rules, and which one won.

Certain elements of a page changes its style when opening chrome devtools

I found the culprit. It has nothing to do with my CSS, it's a bug in chrome developer tools. I need to reset the devtool then it worked fine now.

What do the different shades of colors mean on an asset in the Chrome Devtools Timeline?

Figured this out.

Those shades correspond to whether the time is caused by the files "self" or the files "children":

I may be butchering this explanation, but "Self” refers to the length of time it takes for that specific file to load/execute, “children” references any additional files that get initiated by the parent, and the time they spend loading.

So it makes sense, in my original screenshot from the tweet, the “project-project” file is the file in our codebase that async loads other JS modules, so it makes sense that it would have a huge dark yellow section, since it is the one that initiates the requests for all those files.

---

Related Topics