مدیریت کاربران مشترک
بروز خطا
امتیازات دریافتی

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


کاشی زاده  3 سال پیش  3 سال پیش
0
2
2

با استفاده از ابزار Autoprefixer و به کار گیری آن در Grunt می توانید 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 شما اضافه می شود.

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