Menu
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?
288
If you open the "Computed" section, you can see the final style that is applied, after all the rules from various CSS selectors have been applied. And you can open up any specific attribute to find out which CSS selector and file is responsible.
On Chrome's Developer Tools tab (CTRL + SHIFT + I), go to Resources (you may have to enable Resource tracking on that page), and click on the sub-tab Stylesheets. That will show all css files loaded by that page.
Install "eXtract Snippet"=> Inspect an element using chrome's developer tools 'inspect element'. Within the developer tools you should also see a panel named "eXtract HTML CSS". Click on to the "eXtract HTML CSS" panel and further click onto the "Get HTML/CSS of inspected element" button withing the panel.
In vanilla JavaScript, you can use the contains() method provided by the classList object to check if any element contains a specific CSS class. This method returns true if the class exists, otherwise false .
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:
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.
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
