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?
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.
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.
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.
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 div
s, but a different background color was applied to div
s 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).
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 **
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With