Extracting only the css used in a specific page

前端 未结 15 1804
难免孤独
难免孤独 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:36

    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)

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

    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.

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

    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

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

    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.

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

    (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
    0 讨论(0)
  • 2020-12-04 07:46

    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).

    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题