Is there a way to check which CSS styles are used or not used on a web page?

Question

Want to know what CSS styles are currently used on a web page.

Answer 1

Install the CSS Usage add-on for Firebug and run it on this page. It will tell you which styles are used and not used by this page.

Answer 2

Just for completeness and because the proposal was asked in the comments, there is also a CSS CSS audit tool for the same purpose. Some details here:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

Answer 3

Google Chrome has two ways to check for unused CSS .

1. “Audit” tab: > Right-click + “Check item” on the page, find the “Audit” tab and perform an audit, making sure that “Check Web Page” is checked.

List of all unused CSS tags - see image below.

Update: - - - - - - - - - - - - - - OR - - - - - - - - - - - - - - - -

2. Coverage tab: > Right-click + “Check item” on the page, find the three dots in the right corner (circled in the image) and open the Console Box (or press “Esc”), and finally, click on three dots to the left of the drawer (circled) to open the Coverage tool.

Chrome launches a tool to view unused CSS and JS - Chrome 59 Update Allows you to start and stop recording (red square in the image) to provide better coverage for the user on the page.

Shows all used and unused CSS / JS in files - see image below.

Answer 4

I am using CSS Dig . It is made for chrome, but I think it is a great tool!

Answer 5

Take a look at UnCSS . This helps in creating the CSS file used by CSS.