139

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

HELP
  • 14,237
  • 22
  • 66
  • 100
  • 3
    Use a browser that has a CSS inspector. Safari and Chrome (aka Webkit) provide this as part of the developer tools. In Firefox this is provided by the Firebug plugin. Internet Explorer has nothing similar that I'm aware of. The inspector will allow you to select an element, right-click, and choose "Inspect Element" -- then it will show you which selectors and which individual rules are applied to the element you selected. – Lee Dec 05 '10 at 20:40
  • @Lee ie8 developer toolbar behaves the same way like firebug in css selectors , you can select and see the styles applied on right handside. – kobe Dec 05 '10 at 21:06
  • possible duplicate of [Extracting only the css used in a specific page](http://stackoverflow.com/questions/4867005/extracting-only-the-css-used-in-a-specific-page) – cweiske Sep 22 '15 at 06:48

7 Answers7

108

Updated July 2022 - it appears Google has removed option #1 below (Audit tab has been removed, and Lighthouse and Recorder have been added)

Google Chrome has a two ways to check for unused CSS.

1. Audit Tab: > Right Click + Inspect Element on the page, find the "Audit" tab, and run the audit, making sure "Web Page Performance" is checked.

Lists all unused CSS tags - see image below.

Screen Shot of Chrome's Audit Tool

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

2. Coverage Tab: > Right Click + Inspect Element on the page, find the three dots on the far right (circled in image) and open Console Drawer (or hit Esc), finally click the three dots left side in the drawer (circled in image) to open Coverage tool.

Chrome launched a tool to see unused CSS and JS - Chrome 59 Update Allows you to start and stop a recording (red square in image) to allow better coverage of a user experience on the page.

Shows all used and unused CSS/JS in the files

  • see image below.

Example of Coverage tool in Chrome

Cordell
  • 1,901
  • 1
  • 13
  • 12
  • 4
    Would be awesome to see which ones are used as well.... but this is great, thanks. – Serj Sagan Mar 11 '17 at 06:18
  • As far as I can tell, if you want to know what is used your best bet is to install a plugin for Chrome - sorry – Cordell May 22 '17 at 16:44
  • The new Chrome 59 update allows you to see the used/unused CSS and JS – Cordell Jul 17 '17 at 22:36
  • What library does Chrome use to do this? – Alexey Shevelyov Dec 03 '19 at 17:30
  • Im unsure which library Chrome is using, I'd refer you to their page: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage – Cordell Dec 05 '19 at 18:56
  • coverage tool is only useful for single page websites, but not for multi page websites, hence its useless, because when i browser multiple pages these statistics change. – UMAR-MOBITSOLUTIONS Jan 08 '20 at 17:54
  • 2
    @UMAR `multi-page website coverage == (single-page coverage) * n` _where n = each page in a website_. Categorizing the tool / this answer as "useless" does not benefit anyone. – Shai Cohen Jan 17 '20 at 19:48
  • 1
    The "Audit" tab has been replaced by "Lighthouse". Lighthouse does not seem to offer a way to assess the CSS usage. Thus only option 2 remains ("Coverage" tab). Wanted to update the answer but "queue is full". – René K Jul 07 '22 at 18:17
  • The "CSS Overview" tool tells about elements with useless properties, but not unused classes. The "coverage" tool doesn't show my React SCSS at all. I guess I'll keep looking. – Noumenon Dec 04 '22 at 20:30
59

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

BryanH
  • 5,826
  • 3
  • 34
  • 47
kobe
  • 15,671
  • 15
  • 64
  • 91
  • @Harry , once you install this plugin it will be in the tab as a part of firebug where you have net and all//// let me know if you need anything else – kobe Dec 05 '10 at 21:09
  • 38
    Is there any thing like this to Chrome? – Pedro Luz May 17 '12 at 14:00
  • 5
    This doesn't appear to be working anymore, and is no longer supported, unfortunately. – nostromo Aug 26 '13 at 05:02
  • 1
    Beware that Firebug is no longer maintained. I think this add-on doesn't work with Firefox built-in DevTools. – Andrew May 05 '17 at 16:21
  • You can use audit option in chrome while inspecting.This ill only show css not used on that particular page. – Sarath Hari Jun 09 '17 at 11:33
40

Just for completeness and because it was asked in the comments - there's also the CSS audit tool in Chrome now for the same purpose. Some details here:

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

Jan Petzold
  • 1,561
  • 1
  • 15
  • 24
  • 3
    I'm not sure it the "CSS audit tool" to which this answer is referring is the same as the *Audits* tab in the Chrome Developer Tools, but that will tell you which CSS rules are unused (e.g. "Some.css: 42% is not used by the current page."). – Kenny Evitt Jan 10 '14 at 17:45
14

Take a look at UnCSS. It helps in creating a CSS file of used CSS.

Robert Brisita
  • 5,461
  • 3
  • 36
  • 35
9

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

cs.matyi
  • 1,204
  • 1
  • 11
  • 21
  • 1
    I just tried this - it does everything by calling home to cssdig.com, so it's unable to see or analyze anything hosted locally. – Brilliand Dec 04 '19 at 00:59
2

Without any third-party tools and any app, you can find unused CSS and javascript by using chrome dev tools in the coverage tab. read the post below from google developers. chrome coverage tab

Mahdi Safari
  • 298
  • 3
  • 12
0

Try using this tool,which is just a simple js script https://github.com/shashwatsahai/CSSExtractor/ This tool helps in getting the CSS from a specific page listing all sources for active styles and save it to a JSON with source as key and rules as value. It loads all the CSS from the href links and tells all the styles applied from them You can modify the code to save all css into a .css file. Thereby combining all your css.

Shashwat Sahai
  • 11
  • 1
  • 2
  • Shashwat, can you please update the documentation, so it is more clear how to use it? – Mario Nezmah Feb 04 '21 at 12:27
  • Added the documentation, everything should be clear from doc, pls check $0 in https://developers.google.com/web/tools/chrome-devtools/console/utilities#0-4, any other doubt pls mail me at ssahai97@gmail.com – Shashwat Sahai Mar 01 '21 at 19:23