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

Answer 1

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:

1. Go here (if this link is broken, you can also get it from pastebin).
2. 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