Autoprefixer: A post-processing program that handles browser prefixes in the best way

Autoprefixer parse the CSS file and add the browser prefix to the CSS rules, use the data of can I uses to determine which prefixes are needed.

  All you need to do is add it to your resource builder (for example,  grunt) and completely forget the CSS prefix. Although it is normal to write your CSS in accordance with the latest specifications, you do not need a browser prefix. Like this: a{     transition :transform 1s}  Autoprefixer uses a database to provide you with a prefix based on the popularity of the current browser and attribute support: a{    -webkit-transition :- Webkit-transform 1s;     transition :-ms-transform 1s;     Transition  :transform 1s}  problem   Of course we can write the browser prefix, but it's tedious and error-prone.   We can also use services like PREFIXR and editor plugins, but it's still not working with a bunch of repetitive code.   We can use the Mixin library provided by a preprocessor like compass to sass and nib to stylus. They can solve most of the problems, but they also introduce other problems. They force us to use the new syntax. They iterate slower than modern browsers, so when stable releases produce a lot of unnecessary prefixes, sometimes we need to create our own mixins.  compass actually doesn't block the prefix for you, because you still need to decide a lot of questions, such as: Do I need to write a mixin for  border-radius ? Do I need to divide the  +transition  parameters with commas? The-prefix-free of  lea Verou almost solves this problem, but using the client library is not a good thing to take into account when you consider the end user performance. To prevent doing the same thing over and over again, it is best to build the CSS once the resource is built or when the project is released.    Secret  autoprefixer is a post-processing program, unlike pre-processors such as sass and stylus. It works for normal CSS without using a specific syntax. It is easy to integrate with sass and stylus because it runs after the CSS is compiled.  autoprefixer BaseIn rework, a framework that you can use to write your own CSS post-processing program. Rework parse CSS into a useful JavaScript structure after you have processed it back to CSS. Each version of the  autoprefixer contains a copy of the latest Can I use data:

• The current list of browsers and their popularity.
• A list of new CSS properties, values, and selectors prefixes.

Autoprefixer will support the latest 2 versions of mainstream browsers by default, similar to Google. However, you can choose from a name or pattern in your project:

• The most recent 2 versions of mainstream browsers use "last 2 versions";
• More than 1% of global statistics use ">1%";
• Only new versions are used with "ff>20" or "ff>=20".

The autoprefixer then calculates which prefixes are needed and which ones have expired.   When Autoprefixer adds a prefix to your CSS, you won't forget to fix the syntax differences. In this way, CSS is based on the latest specifications produced by:a {     background : linear-gradient (to Top, black, white);      display : Flex}::p laceholder {     color : #ccc}  Compiled into:a {    background :-webkit-linear-gradient (bottom, black, white);    BACKGROUND&NBSP: Linear-gradient (to Top, black, white);    display :-webkit-box;     DISPLAY&NBSP:-webkit-flex;    display :-moz-box;    display :- ms-flexbox;    display : flex}:-ms-input-placeholder {    color : # ccc}::-moz-placeholder {    color : #ccc}::-webkit-input-placeholder {     color : #ccc}::p laceholder {    color : #ccc} autoprefixer Also cleans up expired prefixes (from legacy code or similar to Bootstrap CSs library), so the following code:a {   -webkit-border-radius : 5px;    border-radius : 5px}   compiled into:a {    border-radius : 5px}  because of autoprefixer processing, the CSS will only contain the actual browser prefix. The CSS size was reduced by nearly 20% after Fotorama switched from Compass to autoprefixer.    Demo   If you haven't used any tools to automate building your static resources, be sure to try the grunt, and I highly recommend that you start using the Build tool. This will open up your entire grammatical sugar world, an efficient mixin library and a useful image processing tool. The efficient way for all developers to save a lot of effort and time (free choice of language, code to take, the ability to use third-party libraries) will now apply to front-end developers.   Let's create a project directory and write some simple css: style.cssa { }  in style.css in this example, we'll use grunt. You first need to use NPM to install  GRUNT-AUTOPREFIXER :NPM INSTALL GRUNT-CLI grunt-contrib-watch grunt-autoprefixer   Then we need to create  Gruntfile.js  files and enable Autoprefixer: gruntfile.jsmodule.exports = function   (Grunt)  {     grunt .initconfig  ({           autoprefixer : {                Dist : {                     files : {  ' build/style.css '  :  ' style.css '  } } },                      watch : {                          styles : {                                files : [' style.css '  ],                                tasks : [' autoprefixer '  ]                          }                     }                });  Grunt.loadnpmtasks (' grunt-autoprefixer '  ); Grunt.loadnpmtasks (' Grunt-contrib-watch '  );};     This configuration file allows Autoprefixer to compile   style.cssTo build/style.css. We will also use grunt-contrib-watch 来Listening style.css文件变化Re-compiling build/style.css。Enable the Grunt Watch feature:./node_modules/.bin/grunt Watch Now we add a CSS3 expression to Style.css and save: Style.cssa {width:calc (50%-2EM)} Next Is the moment to witness the miracle, now that I have the Build/style.css file, grunt monitors the Style.css file for changes and enables autoprefixer tasks. Autoprefixer found it. calc()The value unit requires a browser prefix for Safari 6.     Build/style.cssa {width:-webkit-calc (50%-2EM);     Width:calc (50%-2EM)} We add a little bit more complex CSS3 to Style.css and save: Style.css a {width:calc (50%-2EM); Transition:transform 1s}autoprefixer known Chrome,safari 6 and opera 15 need to be transitionAnd transform 添加Prefix. But IE9 also needs to add a prefix to transform as the value of transition.     Build/style.cssa {width:-webkit-calc (1% + 1em);     Width:calc (1% + 1em);     -webkit-transition:-webkit-transform 1s;     Transition:-ms-transform 1s; Transition:transform 1s} autoprefixer is designed to complete all your dirty work. It will write all the required prefixes according to the can I use database, and also understand the differences between the specifications, welcome to the future of CSS3-no more browser prefixes! Next? 1, autoprefixer support Ruby on Rails,middleman,mincer,grunt,sublime Text. Learn more about how to use the documentation in your environment. 2. If your environment does not support autoprefixer, please report it to me. 3, focus on @autoprefixer to get updates and new features information. Original address: http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html

Autoprefixer: A post-processing program that handles browser prefixes in the best way