Autoprefixer

autoprefixer · npmjs · github

PostCSS eklentisi olan autoprefixer, CSS’i ayrıştırır ve caniuse.com‘daki değerleri kullanarak CSS kodunuza diğer tarayıcılara uyumlu olması için gerekli ön ekleri dahil eder. Siz ön ekleri unutun ve yalnızca saf CSS kodunuzu yazın.

Örnek vermek gerekirse, aşağıdaki kodu yazdığınızı düşünelim:

a {
    display: flex;
}

Autoprefixer eklentisi tüm tarayıcı ön eklerini koda dahil ederek şu çıktıyı verecektir:

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Kurulum

Aşağıdaki komut ile kurulum işlemini gerçekleştirebilirsiniz.

npm install autoprefixer --save-dev

Kullanımı

Post Css ile birlikte autoprefixer eklentisini kullanabilirsiniz.

Gerekli eklentileri sayfaya dahil ederek, autoprefixer adında bir task oluşturalım.

var autoprefixer = require('autoprefixer'),
    gulp         = require("gulp"),
    postcss      = require('gulp-postcss');

gulp.task('autoprefixer', function () {
    return gulp.src('./src/*.css')          // 1
        .pipe(postcss([ autoprefixer() ]))  // 2
        .pipe(gulp.dest('./dest'));         // 3
});

1. src klasörünün içerisindeki tüm .css uzantılı dosyaları alır

2. autoprefixer ile gerekli ön ekleri koda ekler

3. kodun son halini dest klasörünün içerisinde oluşturur

Seçenekler

browsers (array)

Kodunuzun tarayıcıların hangi sürümlerine uyumlu olacağını belirleyebilirsiniz:

gulp.task('autoprefixer', function () {
    return gulp.src('./src/*.css')
        .pipe(postcss([ autoprefixer( { browsers: ['last 2 versions'], cascade: false } ) ]))
        .pipe(gulp.dest('./dest'));
});

Fakat bu seçenek yerine package.json dosyasındaki browserslisti kullanmanızı öneririz.

{
  "private": true,
  "dependencies": {
    "autoprefixer": "^6.5.4"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Kullanılabilir tüm değerleri görmek için Browserslist dokümanına göz atın.

Eklemeler yapılacaktır.

Sıradaki Eklenti: Browser Sync