Best IT Recipes

How can I extract only the used CSS on a given web page and combine it into a separate stylesheet?

I have a website whose style sheets are becoming overwhelming and the full 50% -90% or so are not used on certain pages. Instead of 23 separate CSS blocking sheets, I’d like to know which ones are used on the page I’d like to target, and export them into one sheet.

I saw several questions that recommend "Dust me selectors" or similar add-ons that will indicate which selectors are used and which are not used; but that’s not what I want. I need to be able to export all used styles from all sheets for this particular page to one new sheet, which can be used to replace 23 others. The solution should be able to maintain a responsive website (media calls). The website page I am targeting is http://tripinary.com .

I found: https://unused-css.com , but this is a paid service, and I need it for free;

The next closest thing I came across is http://www.csstrashman.com/ , but this does not look at stylesheets. In fact, he completely ignores them, and ultimately I have problems with the responsiveness of the site. Many times, this site just crashes.

I am not opposed to a software solution, if someone should have done this earlier and can recommend the direction.

+19
css
Jul 10 '14 at 0:50
source share
6 answers

(deleted my comment on RwwL's answer to make it a thorough answer)

UnCSS , whether it is node.js or as a grunt or gulp task, can list the CSS rules used by an array of pages in a Media Queries array.

uncss: https://github.com/giakki/uncss
grunt-uncss: https://github.com/addyosmani/grunt-uncss
gulp -uncss: https://github.com/ben-eb/gulp-uncss

multi-page:

You can pass files as an argument to any of the three plugins, for example:

 var files = ['my', 'array', 'of', 'HTML', 'files'], options = { /* (…) */ }; uncss(files, options, function (error, output) { console.log(output); });

Avoid:

URLs (array):
An array of URLs to download using Phantom (on top of files that have already passed, if any).
NOTE. This function is deprecated, you can pass URLs directly as arguments.


Requests for the media and taken into account:

media (array):
By default, UnCSS processes only stylesheets with the media query "all", "screen" and those who don’t. Indicate here which others to include.

You can add stylesheets, ignore some of them, add inline CSS and many other parameters, such as htmlroot


Other problems:

1 / Conditional classes if you use them for IE9-. Obviously, they will not be mapped in the WebKit PhantomJS environment!

 HTML: <!--[if IE 9]><html class="ie9 lte-ie9" lang="en"><![endif]--> <!-- teh conditional comment/class --> CSS: .ie9 .some-class { property: value; ] /* Only matched in IE9, not WebKit PhantomJS */

Should they be added manually or script to the html element in the test environment? (how it does not matter)
Is there an option in uncss?
Until you use the :not(.ie9) (weird) style, this should be fine.

EDIT: you can use the ignore option with the template to force uncss "to provide a list of selectors that should not be deleted by UnCSS". Will not be verified.

2 / Scripts that will determine the resolution (width of the viewport) and adapt content to it by deleting / adding it or adding a class to the container. They will be executed in PhantomJS in desktop resolution, I think, and therefore I will not do my work, so you will need to change the calls to PhantomJS or something like that ... Or look at the options or problems of GitHub from three projects ( me not)

Other tools that I heard about were not tested or barely or could not be tested, I do not know about the MQ part:

  • in grunt-uncss readme, part of the coverage
  • ucss from Opera (there is already an answer there, failed to get it to work)
  • Helium
  • CSSESS
  • mincss

Addie Osmani has countless presentations with over 100 slides featuring amazing tools like this one: https://speakerdeck.com/addyosmani/automating-front-end-workflow (you will regret even more that the days are made only from 24 hours, not 48 err wait 72 ^^)

+17
Jul 13 '14 at 11:51
source share

What about CSS Usage Plugin for Firebug ?

Steps:

  • Visit your page in Firefox
  • CSS Usage Tab in Firebug
  • Click the Scan button
  • Click bold file name
  • Save CSS Selectors Page to Disk

Here are a few screenshots and go through . Not sure about media queries or if it will work on your site and it probably won’t save -webkit etc. But it may help you with that.

+7
Jul 12 '14 at 2:30
source share

Opera Software has released a CSS scanner on Github, which claims to be able to find unused and duplicate selectors. This can do the trick if you are comfortable using the command line tool. https://github.com/operasoftware/ucss

+2
Jul 10 '14 at 1:32
source share

You can check in Google Chrome by checking the item (F12). In unused CSS, there is a line above the tags.

+1
Jul 17 '14 at 6:42
source share

If you want, you can try to create a script that runs on a (non-production) server that goes through each css rule, removes it from the stylesheet, loads the page with something like phantomjs and checks for see if anything changed since the last page load. If so, then return the css rule, if not, then leave it and go to the next rule. It will take some time, but it will work. You will also need to configure an instance of your server that does not use caching to start it.

+1
Jul 17 '14 at 17:48
source share

Try using this tool, which is a simple js script https://github.com/shashwatsahai/CSSExtractor/. This tool helps to get CSS from a specific page containing a list of all sources for active styles, and save it in JSON with the source as Key and rules as value. It loads all the CSS from the href links and reports all the styles applied to them. You can modify the code to save all CSS in a .css file. Thus combining all your CSS.

0
May 23 '19 at 16:36
source share


More articles:


All Articles