با Autoprefixer بیشتر آشنا بشید🔵

از ابزار Autoprefixer برای افزودن پیشوندهای مرورگر (vendor prefixes) به کدهای CSS به منظور حمایت از مرورگرهای قدیمی و جلوگیری از مشکلات سازگاری مرورگرها استفاده میشه. این ابزار به طور خودکار پیشوندهای مرورگرها رو به کدهای CSS شما اضافه می‌کنه.

کد زیر و در نظر بگیرید:

div { 
  transition: all 1s ease;
 }
 

برای اینکه این استایل بهترین پشتیبانی و در مرورگرهای مختلف داشته باشه باید به صورت زیر پیشوندگذاری بشه:

div {   
 -webkit-transition: all 1s ease; 
 -moz-transition: all 1s ease;                              ‌ -o-transition: all 1s ease; 
 transition: all 1s ease;
 }

قبلنا برای اینکه مجبور به نوشتن پیشوندها به صورت دستی نباشیم از ابزارهایی مثل پلاگین های Sublime استفاده می کردیم. به مرور با بوجود آمدن پیش پردازنده هایی (preprocessor) مثل Sass و Less یا Stylus می تونستیم از mixin ها برای اضافه کردن پیشوندها استفاده کنیم.

اما این روزها بازار ابزارهایی مثل Grunt و Gulp داغ هست و میشه از بسته هایی که برای این ابزارها نوشته شده برای کارهای مختلف استفاده کرد. یکی از این بسته ها Autoprefixer هست که معروف ترین ابزار این روزها برای نوشتن پیشوندها هست و گوگل استفاده از این ابزار و توصیه می کنه 💀

برتری که Autoprefixer نسبت به دیگر ابزارهای پیشوندگذاری داره اینه که بر اساس تنظیماتی که ما براش در نظر می گیریم و بر اساس آماری که از سایت caniuse داره، عملیات پیشوندگذاری و انجام میده.


اطلاعات بیشتر و نحوه استفاده از این ابزار و میتونید تو این مقاله مطالعه کنید⚡️


#autoprefixer #css
@CodeModule