Extracting only the css used in a specific page

Question

Say you had a dynamically generated site that has been worked on by too many people, past and present, and you now have a collection of shared stylesheets that contain over 20,000 lines of CSS. It isn't organized at all, there are some class and id-based selectors but also way too many tag-based selectors. And then say you have 100 templates that use these styles, via some controller.

Is there a tool, something that works like Firebug perhaps, that you can point at a url and it would determine all of the applicable CSS selectors for that page and dump them to a file? Basically some way to rip apart the shared stylesheets on a page by page basis.

Possible duplicate of [How can I extract only the used CSS on a given web page and have that combined into a separate style sheet?](http://stackoverflow.com/questions/24665885/how-can-i-extract-only-the-used-css-on-a-given-web-page-and-have-that-combined-i) — Tony Chapman, Feb 02 '17 at 19:38

Cesar Bielich · Answer 1 · 2020-09-08T02:02:09.343

96

Hands down the best tool that actually does exactly what you want by only getting the used CSS on the page and allows you to simply copy it to your clipboard is this Chrome extension CSS Used

Pretty Picture Example

edited Sep 08 '20 at 02:02

answered Sep 22 '16 at 04:34

Cesar Bielich

4,754
9
39
81

1

Great tool... But it seems to ignore media queries. :( – Eric L. Jan 18 '17 at 18:38
20

I've updated the extension to supported media queries. Besides, used keyframes/font-face definations, even some IE hacks are also supported now. – PaintyJoy Apr 29 '17 at 02:35
It doesn't work properly on sites like ecco-verde.com – Flavius Jul 26 '17 at 09:35
1

Support media queries now. – atheaos Oct 20 '17 at 18:03
2

This is great. You can even select an element in the DOM and it will provide the CSS used for that specific container. – webnoob Oct 28 '17 at 20:51
How we can record how I click or hover on some elements so it will add styles for those? – fdrv Apr 16 '20 at 03:46
Great tool! I just wished it handled Google Fonts better. Using it for the first time it seems that it explicitly lists the styling of *each character used on the page*(?): `U+21336, U+21344, U+213c4, U+2146d-2146e, U+215d7, U+21647`... instead of collecting them in a single `@import url('https://fonts.googleapis.com/`... it took a moment to figure out what to delete and what to keep, but other than this I had no issues. Very useful add-on. – Mentalist Feb 04 '21 at 02:14

score 18 · Accepted Answer · edited Jun 29 '19 at 11:16

18

I've used Dust-Me Selectors before, which is a Firefox plugin. It's very easy to use and versatile as it maintains a combined list across a number of pages of which CSS values are used.

The downside is that I wasn't able to automate it to spider an entire site, so I ended up using it just on key pages/templates of my site. It is very useful nonetheless.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Contrary to the comment above Dust-Me Selectors 2.2 is compatible with Firefox 3.6 (I've just installed it).

edited Jun 29 '19 at 11:16

Ishank

2,860
32
43

answered Feb 01 '11 at 20:53

ajcw

23,604
6
30
47

2

Does it have a way to export a copy of a specified css file with all the unused stuff removed? – rraallvv Jul 26 '16 at 00:44
1

@rraallw Yep. This was the only tool that would work and still respect media queries. It has an annoying bug where it litters the output CSS file with the word "undefined," but a quick find 'n replace fixes that. Once the tool runs, hit the "clean" button on the "Unused selectors" tab for each file sheet. It will generate the CSS you can export. – Eric L. Jan 18 '17 at 18:54
6

The add-on page no longer exists. And the first link redirects to the second. – Marian Nov 06 '19 at 09:53

score 10 · Answer 3 · answered Jun 04 '15 at 17:32

10

(Not for firefox but maybe this helps someone)

If you are working on chrome you can use this extension:

CSS remove and combine (https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh)

lets you download a combined css with all used styles
shows unused styles in popup window
includes generated styles

answered Jun 04 '15 at 17:32

Rob

5,353
33
34

1

Great tool but it ignores media queries CSS. After it is combined, my site isn't responsive anymore. – Jonas T Oct 10 '16 at 03:23
1

"CSS remove and combine" seems outdated, not working on Chrome 67 – another Jul 25 '18 at 08:22

drudge · Answer 4 · 2011-02-01T23:38:12.197

10

These look promising:

Unused-CSS.com -- Service that spiders your website and emails you the results
CSS Usage -- Firebug addon

edited Feb 01 '11 at 23:38

answered Feb 01 '11 at 19:54

drudge

35,471
7
34
45

1

I think CSS Usage works the best. Especially if you have HTTPS. – Ben_Coding Jun 11 '13 at 18:40

score 9 · Answer 5 · answered Aug 14 '18 at 09:05

I came across Uncss-Online - Unofficial server, very convenient for testing or one-off usage! I think its the best tool I've come across.

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS. It can be used in this way:

Copy & paste your HTML and CSS into provided boxes
Click button
Wait for magic to happen
Unused CSS is gone, take the rest and use it!

You can check their Github Page for other advanced ways to use this tool

score 4 · Answer 6 · edited Jun 13 '20 at 16:33

Here's my solution using JavaScript :

    var css = [];
    for (var i=0; i<document.styleSheets.length; i++)
    {
        var sheet = document.styleSheets[i];
        var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
        if (rules)
        {
            css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
            for (var j=0; j<rules.length; j++)
            {
                var rule = rules[j];
                if ('cssText' in rule)
                    css.push(rule.cssText);
                else
                    css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
            }
        }
    }
    var cssInline = css.join('\n')+'\n';

In the end, cssInline is a textual list of all the steelsheets of the page and their content.

Example :

    /* Stylesheet : http://example.com/cache/css/javascript.css */
    .javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
    .javascript { color: rgb(172, 172, 172); }
    .javascript .imp { font-weight: bold; color: red; }

    /* Stylesheet : http://example.com/i/main_master.css */
    html { }
    body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
    a { color: rgb(204, 0, 51); text-decoration: none; }
    a:hover { color: rgb(153, 153, 153); text-decoration: none; }
    .icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
    #header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
    #super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
    #monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
    #header a { color: rgb(255, 255, 255); }
    #menu_2 { height: 290px; }

    /* Stylesheet : [inline styles] */
    .hidden { display: none; }

would be great if this could be used to apply the css from an external site to my own page. I don't know how to do that... — johny why, Apr 02 '19 at 22:09

score 3 · Answer 7 · edited May 23 '17 at 11:33

3

SnappySnippet

There is an open source ad-on of chrome named SnappySnippet I found it lot better than other just extends the already available developer tools in chrome. You can even extract only one part of the page will all relevant css. Look at this stackoverflow post

edited May 23 '17 at 11:33

Community

1
1

answered May 07 '14 at 01:24

Mubashar

12,300
11
66
95

1

yes but it changes classnames to some generic ids which is not very helpful – Shishir Arora Jul 04 '16 at 12:05

score 3 · Answer 8 · answered Sep 22 '15 at 06:53

3

uncss: Find Unused CSS - cli tool, uses phantomjs and executes JS on the page, can be used on URLs
grunt-uncss - only works on static files
(critical css - extracts CSS for elements visible in the browser window)

answered Sep 22 '15 at 06:53

cweiske

30,033
14
133
194

Bryce Howitson · Answer 9 · 2020-09-08T15:05:54.540

As of Sept 2020 this question is almost 10 years old. Most of the provided solutions no longer work or the linked projects have disappeared.

However, the question is still extremely relevant as Google now uses page speed as one of its prioritization metrics.

After doing a bunch of research into all the links listed, I found purgecss.com. This seems to be the best option to clean up unused CSS in modern web apps/SPAs using Angular, React, Vue, etc. There's also build integration with PostCSS, Webpack, Grunt, and Gulp.

Also, UnCSS still seems to be maintained. It's as powerful as PurgeCSS but not as integrated into build processes or single-page javascript apps.

thdoan · Answer 10 · 2017-03-08T06:50:54.257

If you're dealing with single pages, you can also use my bookmarklet to quickly grab only the CSS that is actually used by the web page:

Go here (if this link is broken, you can also get it from pastebin).
Drag the big button under "Download Bookmarklet" onto your bookmarks toolbar.

That's it. Now whenever you want to encapsulate a static page (i.e., to make it portable or if you intend to serve it from its own iframe), just click on the bookmark and it will display all the used CSS on the current page in an overlay. Click on the shadow to close the overlay.

One good thing with this solution is that it supports responsive pages since the media queries are also extracted. As a bonus, media queries are sorted by viewport size specificity (e.g., @media (max-width: 767px) will come after @media (max-width: 1023px)).

If there's a need, I can also add an option to minify the generated CSS. Since I've only used this bookmarklet for my own needs, it hasn't been widely tested, so please report any issues in the comments.

NOTE: To make this bookmarklet work with local files in Chrome, add --allow-file-access-from-files to the Chrome shortcut target. Example:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Syed · Answer 11 · 2019-12-05T13:16:16.807

2

Check for PurifyCSS, and this for those who can handle CLI or Gulp/Grunt/Webpack

You can remove the unused style from single page or multiple page or from the entire project, even though the classes are being injected by javascript.

If you can google, there are tons of resources out there from which you can learn about PurifyCSS.

edited Dec 05 '19 at 13:16

answered Nov 24 '17 at 02:07

Syed

15,657
13
120
154

score 1 · Answer 12 · answered Feb 01 '11 at 21:26

This Firefox extension will probably solve your problem, Dust-Me Selectors. There's also a tiny desktop app called CssCleaner or CssHelper but I was unable to find a link to it... (just have it here at my machine downloaded a long time ago for a similar task)

score 1 · Answer 13 · answered May 23 '19 at 16:28

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 save the output in a JSON file with any name.

score 0 · Answer 14 · answered Feb 01 '11 at 19:28

0

Hmm.. I'd throw some brute force at this by extracting the various CSS selectors using a serverside parsing of the CSS file, then run each of these as a jQuery selector within the browser. Not very elegant, but should work?

answered Feb 01 '11 at 19:28

kander

4,226
1
22
43

But is there an existing tool to do this? – Roger Halliburton Feb 01 '11 at 19:51

score -1 · Answer 15 · answered Sep 01 '22 at 16:30

-1

The @pamekar solution worked perfectly for me, extracting the used css classes from https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css.

Note that you have to copy the code from the bootstrap.min.css file and paste it into the css section of https://uncss-online.com.

answered Sep 01 '22 at 16:30

Juan Domínguez

39
3

Please don't add "thank you" as an answer. Instead, vote up the answers that you find helpful. - [From Review](/review/late-answers/32624667) – Rohit Gupta Sep 06 '22 at 14:48

score -1 · Answer 16 · answered Jun 25 '23 at 04:17

-1

Use ExtractEase tool it will help you to extract and compare css properties by specific element or specific tag. URL : https://extractease.in/

answered Jun 25 '23 at 04:17

Iamnk

1

score -2 · Answer 17 · answered Apr 06 '20 at 13:59

-2

You can also use http://getcssusedinapage.com to get the CSS used in a page. It's free, fast & gives you back much details along with minimified & optimized CSS code that you can just copy + paste in your website

answered Apr 06 '20 at 13:59

Joel

895
4
13
33

dead link, now links to ads – pcarvalho Feb 22 '23 at 01:14

Extracting only the css used in a specific page

17 Answers17

Linked