Autoprefixer parse CSS file and add the prefix browser to CSS rules, the use of Can I Use the data to decide what prefix is needed. All you need to do is add it to your resources to build tools (for example Grunt) and can completely forget that this thing CSS prefix. Although according to the latest W3C specifications to normal without the need to write your CSS browser prefixes. Like this: a {transition: transform 1s} Autoprefixer using a database available to you based on the popularity of the prefix and the properties of the current browser support: a {-webkit-transition: -webkit-transform 1s; transition: -ms-transform 1s; transition: transform 1s} problem, of course, we can handwriting browser prefixes, but this seems tedious and error-prone. We can also use this service as well as a similar Prefixr editor plug, but still lack in dealing with a bunch of duplicate code. We can use it in Sass and Compass as the nib in the pre-processor Stylus mixin class libraries provided. They can solve most of the problems, but at the same time introduces other problems. They force us to use the new syntax. They iteration slower than modern browsers, so when stable release will have a lot of unnecessary prefixes, and sometimes we need to create your own mixins. Compass does not Michael Kors Bedford Logo Large Black Crossbody Bags actually shield you prefix, because you still need to decide many issues, such as: Do I need to write a border-radius Michael Kors Berkley Logo Large Black Clutches mixin it? I need to use a comma-separated + transition parameters it? Lea Verou of -prefix-free almost solved the problem, but the use of client library is not a good idea, when you take into account the end-user performance, then. In order to prevent repeatedly doing the same thing, it is best to build or re-build the resources when a CSS project release. Secret Autoprefixer is a post-processing program, Sass and Stylus and the like do not like the pre-processor. It applies to ordinary CSS without using a specific syntax. It can be easily integrated with Sass and Stylus, due to its run after CSS compilation. Autoprefixer based Rework, after a framework that can be used to write your own Michael Kors Bedford Signature Large White Totes CSS handler. Rework Javascript parse CSS into useful structures after treatment guide you back to the Michael Kors Bedford Gusset Medium Blue Crossbody Bags CSS. Each version Autoprefixer are included an updated Can I Use Data: current browser list and their popularity. The new CSS properties, values, and selectors prefix list. Autoprefixer default browser will support major recent two versions, this is similar to Google. But you can in your own projects carried out by name or mode selection: mainstream browsers recent two versions with 'last 2 versions'; global statistics there are more than 1% usage using the '\u0026 gt; 1%'; only with a new Michael Kors Outlet version 'ff Michael Kors Bedford Logo Monogram Large Coffee Totes \u0026 gt; 20' or 'ff \u0026 Michael Kors Bedford Logo Large Purple Crossbody Bags gt; = 20' and then calculate what Autoprefixer prefix is needed, which is already out of date. When Autoprefixer add a prefix to your CSS, but also do not forget to repair syntax differences. In this way, CSS is a W3C specification based on Michael Kors Bedford Logo Monogram Large Coffee Totes the latest Michael Kors Bedford Logo Large Purple Crossbody Bags generation: a {background: linear-gradient (to top, black, white); display: Michael Kors Bedford Signature Large White Totes flex} :: placeholder {color: #ccc} translated into: a {background: -webkit -linear-gradient (bottom, black, white); background: linear-gradient (to top, black, white); display: -webkit-box; display: -webkit-flex; display: Michael Kors Bedford Logo Large Gold Crossbody Bags -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 will also clean up the expired prefix Michael Kors Accessories (code or similar Bootstrap CSS library from left), so the following code: a {-webkit-border-radius: 5px; border-radius: 5px} compiled: a {border-radius: 5px} Because after Autoprefixer processing, CSS will contain only the actual browser prefix. After switching Michael Kors Bedford Signature Large White Totes from Compass Fotorama to Autoprefixer, CSS size reduced by nearly 20%. Demo if you have not used any tools to automate build your static resources, we must try the next Grunt, I strongly recommend you start using the build tools. This will turn your whole world syntactic sugar, efficient mixin libraries and Michael Kors Berkley Logo Large Black Clutches practical image processing tools. Efficient way all developers to save a lot of energy and time (free choice of language, code use, the ability to use third-party libraries) will now apply to the front-end developers. Let's create a project directory and write some simple CSS in style.css in: style.cssa {} In this example, we will Michael Kors Bedford Large Orange Shoulder Bags use Grunt. First need to use npm install grunt-autoprefixer: npm install grunt-cli grunt-contrib-watch grunt-autoprefixer then we need to create 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 profile allows Autoprefixer compiled style.css to build / style.css Similarly, we will with a grunt-contrib-watch to monitor changes in style.css file recompilation build / style.css. Grunt's Watch feature is enabled: ./ node_modules / .bin / grunt watch now we add a CSS3 expression to style.css and save: style.cssa {width: calc (50% - 2em)} Next is to witness the miracle of the moment Now I have a build / style.css file, Grunt monitor changes to style.css file and enable Autoprefixer tasks. Autoprefixer found calc () value of the unit requires Safari browser prefix 6. build / style.cssa {width: -webkit-calc (50% - 2em); width: calc (50% - 2em)} we'll add a little bit more complicated to style.css CSS3 and save: style.cssa {width : calc (50% - 2em); transition: transform 1s} Autoprefixer known Chrome, Safari 6 and Opera 15 will need to add a prefix to transition and transform. But IE9 also need to transform to add a prefix, 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 to do all the dirty work while you design. Can I Use It will be based on a database, and write all the same prefix needs to understand the difference between norms, welcome to the future CSS3 - no prefix browser! The next step? 1, Autoprefixer support for Ruby on Rails, Middleman, Mincer, Grunt, Sublime Text. Learn more about how to use the documents in your environment. 2, if your environment does not support Autoprefixer, please report it to me. 3. Followautoprefixer updates and new features to get information.Autoprefixer: The best way to deal with a post-processing browser prefixes