Extracting only the css used in a specific page

前端 未结 15 1794
难免孤独
难免孤独 2020-12-04 06:51

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

相关标签:
15条回答
  • 2020-12-04 07:48
    • 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)
    0 讨论(0)
  • 2020-12-04 07:52

    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

    0 讨论(0)
  • 2020-12-04 07:53

    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
    
    0 讨论(0)
提交回复
热议问题