Firefox 70 shows inactive CSS and how to fix it

The Developer Tools in the latest version of the Firefox browser can now highlight Cascading Stylesheet properties and values that are not properly implemented, and provide details on how to fix them

Firefox Dev Tools
Web developers can now debug CSS in Firefox 70.

Mozilla has been steadily improving its MDN Web Docs and Firefox Developer Tools. The latest version of Firefox, version 70, combines both resources into a webmaster resource for identifying and fixing CSS that isn’t being used or is broken.

Webmasters can now debug CSS in Firefox and find properties that are inactive or have errors with its values. It supports most CSS properties, including float, width, and text-align.

If the tool finds an inactive property, it will turn it gray and append it with an information icon ℹ️. Hovering over the icon displays details about the issue and also provides a link to the related MDN Web Doc. The tool will also highlight if the syntax is incorrect by displaying a warning icon ⚠️.

Miriam Suzanne, Web Developer at Mozilla, explains how the new feature works in Firefox Developer Tools.

Firefox 70 is available starting October 22, 2019 from Mozilla’s Firefox download page.

Jon is the founder and Managing Editor of Coywolf. He is a serial entrepreneur with over 25 years of experience in web development, SaaS, internet strategy, and digital marketing. Follow @henshaw

Never miss an important story – Subscribe to Newsletter