Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

While inspecting an element using Chrome's devtools, in the elements tab, the right-hand side 'Styles' bar shows the corresponding CSS properties. At times, some of these properties are struck-through. What do these properties mean?

like image 330
rohitmishra Avatar asked Jun 15 '10 16:06

rohitmishra


People also ask

What does a strikethrough in a CSS element mean in your browser's Developer Tools?

CSS strikethrough is a CSS property that makes text look as though it has been struck through, like this. In web development and writing, this is frequently used to denote that text has been erased or is no longer relevant. But it can also be used for different things.

How do you read DevTools performance?

To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.

What does Flex mean in DevTools?

In the Elements tool, the new Flexbox (flex) icon helps you identify Flexbox containers in your code. Click the Flexbox (flex) icon to turn on or off the overlay effect that outlines a Flexbox container. You can customize the color of the overlay in the Layout pane, which is located next to Styles and Computed.


2 Answers

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

like image 170
Jacob Mattison Avatar answered Oct 15 '22 17:10

Jacob Mattison


On a side note. If you are using @media queries (such as @media screen (max-width:500px)) pay particular attention to applying @media query AFTER you are done with normal styles. Because @media query will be crossed out (even though it is more specific) if followed by css that manipulates the same elements. Example:

@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 ** 
like image 37
sanjihan Avatar answered Oct 15 '22 17:10

sanjihan