It’s useful when DevTools tells you that a declaration is invalid. For example,
colr: red; isn’t valid because
colr isn’t a valid property. Likewise
color: rd; isn’t valid because
rd isn’t a valid value. For the most part, a browser’s DevTools shows the declaration as
crossed out with a warning () icon. It would be nice if they went a step further to tell you which thing was wrong (or both) and suggest likely fixes, but hey, I don’t wanna look a gift horse in the mouth.
Firefox is starting to go a step further in telling you when certain declarations aren’t valid, not because of a syntax error, but because they don’t meet other qualifications. For example, I tossed a
grid-column-gap: 1rem on a random
<p> and I was told this in a little popup:
grid-column-gaphas no effect on this element since it’s not a flex container, a grid container, or a multi-column container.
Try adding either
columns:2. Learn more
Well that’s awful handy.
Elijah Manor has a blog post and video digging into this a bit.
The post Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools appeared first on CSS-Tricks.