Autoprefixer
According to the data of Can I use, the prefix code is automatically prefixed with the manufacturer on demand.
Input:
a { display: flex;}
Output:
a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex}
Cssnext
The CSS Translator (transpiler) translates the code into CSS that conforms to the current browser implementation, based on standards that are still in the draft stage and are not implemented by the browser. Similar to ES6 's Babel. Since the translation is also to deal with the prefix problem, so directly rely on autoprefixer to do this part.
Input:
/* custom selectors */@custom-selector --heading h1, h2, h3, h4, h5, h6;--heading { margin-top: 0 }/* filters */.blur { filter: blur(4px);}
Output:
/* Custom Selectors */H1,H2,H3,H4,H5,h6 { margin-top: 0 }/* filters */. blur { filter: URL (' data: Image/svg+xml;charset=utf-8,<svg xmlns= "Http://www.w3.org/2000/svg" ><filter id= "filter" >< Fegaussianblur stddeviation= "4"/></filter></svg> #filter '); -WebKit-filter: blur(4px); filter: blur(4px);}
Both are based on the CSS Processing framework postcss (POSTCSS is what Autoprefixer's author did when he migrated autoprefixer from another CSS processing framework rework).
In contrast, autoprefixer more practical value, and cssnext implementation of the function of the browser will be how to implement the doubt, feel can only play. Gu Yiling
Links: http://www.zhihu.com/question/28622861/answer/41736403
Autoprefixer and Cssnext