DevTools Tips

Find inactive CSS styles

Categories: Supported by:

Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can be frustrating.

Indeed, there are many cases where a CSS declaration has no effect on an element. One common example is using width on an inline element. While this example may be known to most, there are so many different CSS properties and possible ways to combine them that it's impossible to know all of the cases where CSS won't have any effect.

Firefox innovated with very cool feature that helps find these "inactive" CSS properties, and Chromium-based browsers now also have something!

In Firefox:

Part of the Rules panel in Firefox, showing a greyed out flex-grow property, with a tooltip saying that the property is inactive because the selected element is not a flex item

In Chrome or Edge:

Part of the Styles panel in Chrome, showing a greyed out align-content property, with a tooltip saying that the property is inactive because the selected flex container is not set to wrap

Note: this is not an audit tool! It won't help you remove useless CSS rules throughout your codebase. Its value is when inspecting specific elements only, to easily detect when a given CSS property isn't doing anything on it.