Artifact--autoprefixer for dealing with CSS prefix issues

As is known to be compatible with all browsers, some CSS properties need to be prefixed to different browsers, but sometimes add a property, you need to add a similar attribute of three-line only to meet the browser compatibility, this will not only add a lot of work.

What is autoprefixer

Autoprefixer is a post-processing program that you can use in common with sass,stylus or less preprocessor. It works for normal CSS, and you don't have to worry about which browsers to prefix, just a new focus on implementation, and use the latest specifications.

How to use autoprefixer

Introduced so much, if it is troublesome to use, it is not as direct handwriting, and autoprefixer Another major feature is the use of simple, now say how to use.

Autoprefixer can be simply downloaded plugin configured to Sublime , Brackets or Atom wait for the IDE, while in the WebStorm plugin to directly install and use the Autoprefixer, Need to be implemented through external tools or file watchers, detailed in WebStorm How to install can refer to this article.

If this function can only be used by the IDE, it is far from being an artifact, and the reason it is truly the name of the artifact is that it can be used in conjunction with existing packaging tools ( gulp , webpack etc.) to complete the prefix of attributes in all the files in the project css .

Below, we'll look at how to use autoprefixerunder these two packaging tools, respectively.

• Gulp
  In gulp, you can use postcss a combination of + two plugins recommended by the Autoprefixer website autoprefixer , or gulp-autoprefixer a plugin.

Method 1:postcss + autoprefixergulp.task (' Autoprefixer ',function () {var postcss =Require' Gulp-postcss ');var sourcemaps =Require' Gulp-sourcemaps ');var autoprefixer =Require' Autoprefixer ');Return GULP.SRC ('./src/*.css '). Pipe (Sourcemaps.init ()). Pipe (Postcss ([Autoprefixer ({browsers: [//Method 2:gulp-autoprefixergulp.task ( ' autoprefixer ', function (var autoprefixer = require ( Gulp-autoprefixer '); return gulp.src (browsers: [/dest '));              

• webpack (webpack1 notation)
  and using Autoprefixer in the most recent hot webpack is a breeze.
  using webpack can be configured with a simple configuration of the sass such as the one mentioned at the beginning of this article A post-processing program such as Autoprefixer is combined.

var autoprefixer = require ( " Autoprefixer '); module.exports = {module: {loaders: [{ test: /\.css$/, loader: " Style!css!postcss "}, {test: /\.scss$/, loader:  "Style!css!postcss!sass"}]}, POSTCSS: [ Autoprefixer ({browsers: [   

Note: There is another webpack one autoprefixer-loader , but the NPM website has labeled it "deprecated" and is recommended for use in the same way as in the example above postcss-loader autoprefixer .

disciple_d
Links: https://www.jianshu.com/p/f5b0b92e6b0f

Artifact--autoprefixer for dealing with CSS prefix issues