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-gap
has no effect on this element since it’s not a flex container, a grid container, or a multi-column container.Try adding either
display:grid
,display:flex
, orcolumns:2
. Learn more
Well that’s awful handy.
Elijah Manor has a blog post and video digging into this a bit.