What do the crossed style properties in Google Chrome devtools mean

Question

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

User · Answer

In addition to the above answer I also want to highlight a case of striked out property which really surprised me.

If you are adding a background image to a div :

<div class = "myBackground">

</div>

You want to scale the image to fit in the dimensions of the div so this would be your normal class definition.

.myBackground {

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

}

but if you interchange the order as :-

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

then in chrome you ll see background-size as striked out. I am not sure why this is , but yeah you dont want to mess with it.

User · Answer

There are two ways to know which rules are overriding   Search the property in the Filter box at the top of the Styles tab  It will show all the rules containing that property  with the property highlighted in yellow    Look in the Computed tab to find the same property type  and then expand that to see the source of the various rules that are trying to apply that property

User · Answer

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

User · Answer

If you want to apply the style even after getting struck-trough indication  you can use   important  to enforce the style  It may not be a right solution but solve the problem

User · Answer

There is some cases when you copy and paste the CSS code in somewhere and it breaks the format so Chrome show the yellow warning  You should try to reformat the CSS code again and it should be fine

User · Answer

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

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

Examples related to css

Examples related to google-chrome

Examples related to google-chrome-devtools