Clever Geek Handbook

Removing unwanted css. Using uncss on responsive sites.

I have uncss (project on github) to remove unwanted css for a qualifying site. It also removes the css mentioned in the mobile.css file, but which actually affects the site on mobile. I don't know how uncss works? In weather it just removes a selector that is not present in the DOM, or it removes a selector that is not only used on a specific viewport.

0


source to share


2 answers


The Media option is meant to save:

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

From the documentation:



media (Array): By default, UnCSS only handles stylesheets with media query "all", "screen" and those that do not. Indicate here which others to include.

Just specify the exact meida option for mobile.css and exjoy for unCSS to work properly.

+2


source


From github :

How?

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



  • HTML files are loaded with PhantomJS and JavaScript is executed.
  • The stylesheets used are extracted from the resulting HTML.
  • Style sheets are concatenated and rules are parsed by css-parse.
  • document.querySelector

    filters out selectors that are not found in HTML files.
  • The rest of the rules are converted back to CSS.

So yes, it removes non-DOM selectors at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */

before them, for example.

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


source






More articles:


All Articles