Remove unwanted css Using uncss in Responsive sites

Question

I have uncss (A project on github) to remove unwanted css for responsive site . It also removes the css mentioned in the mobile.css file , but which actually affects the site in mobile view . I don't have any idea how the uncss works ? i.e weather it simply removes the selectors which are not present in DOM or it removes the selectors which are not used in a particular view port only .

Answer 1

Media option is to rescue:

options = { ... media : ['(min-width: 700px) handheld and (orientation: landscape)'], ... }

From documentation:

media (Array): By default UnCSS processes only stylesheets with media query "all", "screen", and those without one. Specify here which others to include.

Just specify exact meida option for mobile.css and exjoy proper unCSS work.

Answer 2

From github:

How?

The process by which UnCSS removes the unused rules is as follows:

1. The HTML files are loaded by PhantomJS and JavaScript is executed.
2. Used stylesheets are extracted from the resulting HTML.
3. The stylesheets are concatenated and the rules are parsed by css-parse.
4. document.querySelector filters out selectors that are not found in the HTML files.
5. The remaining rules are converted back to CSS.

So yes, it removes selectors not in the DOM at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */ before them, e.g.

/* uncss:ignore */
.selector1 {
    /* this rule will be ignored */
}