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
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
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:
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