Firefox DevTools can explain why some CSS styles have no effect

Published on Mar 20, 2021 in CSS and CSS for JS Devs course

Last updated on Dec 5, 2022

It's frustrating when a CSS declaration is technically valid (not crossed out in the browser's DevTools) but has no effect for some reason. Firefox DevTools can often tell you why and also how to potentially fix those issues! (Update: Chrome 108+ can too.)

Starting from Firefox 70 (released in October 2019), its DevTools contain "inactive CSS rules indicators" that explain why some styles have no effect:

Firefox DevTools' inactive CSS rule indicator. Here it's saying that "width has no effect on this element since it has a display of inline. Try adding display:inline-block or display:block."

I use Firefox as my daily browser, but usually switch to Chrome when doing web development because Firefox DevTools often feel buggy. Good to know that Firefox DevTools can be very helpful in these frustrating CSS situations.

I learned this trick from Josh W Comeau's CSS for JavaScript Developers course (Module 0).

Later I also found Elijah Manor's video explaining the feature.

Update on Oct 13, 2022: Jecelyn Yeen just tweeted that Chrome Canary has now a similar feature.

Update on Dec 5, 2022: The feature is now part of stable Chrome: What's New In DevTools (Chrome 108).