goto: [Translate]autoprefixer: A post-processor that handles browser prefixes in the best way possible

Originally from: http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html

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 the 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 doesn't actually 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 the 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. SecretAutoprefixer is a post-processor, unlike a preprocessor 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 is based on 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, it doesn't forget to fix the syntax differences. In this way, CSS is generated based on the latest specifications: a { background : Linear-gradient (to Top, black, white); Display : Flex } ::Placeholder { Color : #ccc }Compiled into: a { background :-webkit-linear-gradient (bottom, black, white); background : Linear-gradient (to Top, black, white); Display :-webkit-box; Display :-webkit-flex; Display :-moz-box; Display :-ms-flexbox; Display : Flex } :-ms-input-placeholder { Color : #ccc } ::-moz-placeholder { Color : #ccc } ::-webkit-input-placeholder { Color : #ccc } ::Placeholder { Color : #ccc }Autoprefixer also cleans up expired prefixes (from legacy code or similar Bootstrap CSS libraries), so the following code: a { -webkit-border-radius : 5px; Border-radius : 5px }Compiled into: a { Border-radius : 5px }Because after autoprefixer processing, the CSS will only contain the actual browser prefixes. The CSS size was reduced by nearly 20% after Fotorama switched from Compass to autoprefixer. DemoIf 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 will use grunt. First you need to use NPM to install GRUNT-AUTOPREFIXER:NPM InstallGRUNT-CLI Grunt-contrib-watch Grunt-autoprefixer Then we need to create the Gruntfile.js file 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 time to witness the miracle, and 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) }Let's add a little bit more complex CSS3 to Style.css and save: Style.cssA { 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 step? 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://css-tricks.com/autoprefixer

goto: [Translate]autoprefixer: A post-processor that handles browser prefixes in the best way possible