Retrieving only css used on a specific page

Question

Let's say you had a dynamically created site that worked too many people, past and present, and now you have a collection of common style sheets that contain more than 20,000 CSS lines. It is not organized at all, there are several class and identifier selectors, but also too many tag-based selectors. And then say that you have 100 templates that use these styles through some kind of controller.

Is there a tool, something that works like Firebug, is it possible that you can specify a URL and it will identify all the appropriate CSS selectors for this page and upload them to a file? Basically, there is some way to share common stylesheets on page by page.

Answer 1

I previously used the Dust-Me Selector, which is a Firefox plugin. It is very easy to use and versatile because it maintains a combined list on multiple pages that use CSS values.

The disadvantage is that I could not automate it to create a spider for the entire site, so I used it only on the 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 just installed it).

Answer 2

Hands down, the best one that actually does exactly what you want, only by getting the used css on the page and letting you just copy it to the clipboard and paste it into this Chrome extension. Use CSS

Sample image

Answer 3

They look promising:

• Unused-CSS.com - A service that covers your site and sends you your results.
• Using CSS - Firebug addon

Answer 4

(Not for firefox, but maybe this helps someone)

If you work with chrome, you can use this extension:

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

• allows loading combined css with all styles used
• shows unused styles in a popup
• includes generated styles

Answer 5

Snappy snippet

There is an open-source announcement of chrome called SnappySnippet. I found it much better than others, it just extends the chrome tools already available to the developer. You can even extract only one part of the page with all the relevant css. Take a look at https://stackoverflow.com/a/312960/

Answer 6

• uncss: Find unused CSS - cli tool, use phantomjs and execute JS on the page, can be used at URLs
• grunt-uncss - works only with static files
• ( critical css - extracts CSS for elements visible in a browser window)

Answer 7

I came across Uncss-Online - an unofficial server, very convenient for testing or one-time use! I think this is the best tool I've come across.

UnCSS is a tool that removes unused CSS from your stylesheets. It works with multiple files and supports Javascript-embedded CSS. This can be used as follows:

• Copy and paste the HTML and CSS into the appropriate fields
• Press button
• Wait for magic to happen
• Unused CSS is gone, grab the rest and use it!

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

Answer 8

This Firefox extension is likely to solve your problem, Dust-Me Selectors . There's also a tiny desktop application called CssCleaner or CssHelper, but I couldn't find a link to it ... (just ask it on my machine, downloaded a long time ago for a similar task)

Answer 9

If you are dealing with single pages, you can also use my bookmarklet to quickly capture only CSS, which is actually used on a web page:

• Go here (if this link doesn't work, you can also get it from pastebin ).
• Drag the large button into the "Download bookmark" on the bookmarks toolbar.

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

One good thing with this solution is that it supports responsive pages, as media queries are also retrieved. As a bonus, media queries are sorted by species size (for example, @media (max-width: 767px) will appear after @media (max-width: 1023px) ).

If necessary, I can add a parameter to minimize the CSS generated. Since I used this bookmarklet only for my own needs, it has not been widely tested, so please report any problems in the comments.

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

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

Answer 10

Here is 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 text list of all the steels of the page and their contents.

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; } 

Answer 11

Try using this tool, which is a simple js script https://github.com/shashwatsahai/CSSExtractor/. This tool helps to get CSS from a specific page containing a list of all sources for active styles, and save it in JSON with the source as Key and rules as value. It loads all the CSS from the href links and reports all the styles applied to them. You can save the output to a JSON file with any name.

Answer 12

Hmm .. I would throw some brute force on it by extracting various CSS selectors using CSS file parsing, and then run each of them as a jQuery selector in the browser. Not very elegant, but should it work?

Answer 13

Check out PurifyCSS and this is for anyone who can handle CLI or Gulp / Grunt / Webpack

You can remove unused style from one page or several pages or the whole project, even thinking that classes are being introduced by javascript.

If you can use Google, there are tons of resources that you can learn about PurifyCSS from.