Find out what CSS styles are being used on a given

2019-04-20 20:01发布

问题:

I have a page that contains multiple stylesheets and a large majority of the styles in it aren't actually used in the page (deprecated etc). I would like to export a new stylesheet containing all styles on the page that are actually in use. Is there anyway to do this?

回答1:

I think this website does what you want: CSS Trashman. It takes a little while to run, but it works. It reduced my personal site's CSS from 3.31 KB to 402 Bytes.

If you would rather use a command-line tool, CSS Rationator powers CSS Trashman.



回答2:

I had this same issue, complicated by the fact that the pages I need to analyze are login-only, and for work, so I cannot provide my login to an external app (which is how unused-css.com crawls pages behind a login wall).

I found two Chrome extensions:

  1. CSS Remove and Combine
  2. unusedCSS

I only used the first, as it did the trick nicely. It counted CSS elements on the page, told me how many were used and unused, and let me download a stylesheet of all used elements. It did not seem to include functionality for browsing around a site and accumulating seen elements, it was just on a page-by-page basis, but it still let me prune 450 down to 150.



回答3:

In the Chrome DevTools, there is an Audits tab that will allow you to run a Web Page Performance audit and see a list of unused CSS rules :



回答4:

I found this : http://unused-css.com/

Features

  • Explore the pages of your site automatically, find the unused CSS selectors and create new clean CSS files you can download
  • Authenticate and explore the pages requiring authentication. It will then check unused CSS rules.
  • Search for CSS rules in javascript files
  • Customize the list of CSS selectors to keep
  • Preview the change made to the CSS file
  • Follow CSS import commands
  • Set a user agent for the crawler

But i am not sure this would be a good idea, something like : javascript trigered selectors, contextual display, code conditional layout ... So, be carefull if you attempt to 'batch' work your .css files.



标签: css http styles