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

Answer 1

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 :

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.