Autoprefixer | تولید Compatibility های CSS به صورت خودکار

به عنوان مثال دستور user-select در Engine های مختلف به صورت زیر است :

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

برای سازگاری CSS در تمامی Engine ها می بایست تمامی دستورات را به شکل بالا وارد کنید. طبیعتا تعداد زیاد خطوط هم باعث کثیفی کد های شما و هم باعث طولانی شدن کد می شود.اما با استفاده از Autoprefixer می توانید تمامی دستورات لازم برای سازگاری کامل CSS با تمامی مروگر ها را تنها با نوشتن یک خط دستور (دستور اصلی) انجام دهید.

مراحل نصب و آماده سازی Autoprefixer :

1-grunt و آخرین نسخه grunt-autoprefixer را نصب کنید.

npm install grunt-cli grunt-autoprefixer

2-دستور زیر را در فایل Gruntfile.js اضافه کنید.

module.exports = function (grunt) {
    grunt.initConfig({
        autoprefixer: {
            dist: {
                files: {
                    'build/style.css': 'style.css'
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-autoprefixer');
};

3-با هر بار اجرای دستور autoprefixer:dist یکبار فایل CSS مورد نظر بررسی شده و دستورات لازم به CSS شما اضافه می شود.

اطلاعات بیشتر در لینک