autoprefixer

Autoprefixer: ابزار پیشوندگذاری

یکی از دغدغه های این روزها در دنیای CSS نوشتن خطوط استایلی است که برای اینکه در مرورگرهای مختلف کار کنند نیاز به prefix یا پیشوند دارند.
کد زیر را در نظر بگیرید:


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 دارد عملیات پیشوندگذاری را انجام می دهد.

برای استفاده از این ابزار چندین راه وجود دارد. بهترین راه تعریف آن به عنوان یک Task در مراحل کاری و اجرای آن توسط Grunt و یا Gulp می باشد که ما در مطالب آینده این موضوع را مورد بررسی قرار خواهیم داد. ( همینطور در مورد sass و gulp و sublime نیز صحبت می کنیم.)

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

یک راه هم ابزارهای آنلاین هستند, که امروز ما قصد معرفی یکی از آنها را که توسط این سایت طراحی شده است را داریم:

استفاده از این ابزار خیلی ساده است کافیست کد CSS را در سمت چپ قرار دهید و خروجی پیشوندگذاری شده را از قسمت سمت راست کپی کنید.

autoprefixer

تنها نکته ای که زمان استفاده از Autoprefixer باید در نظر بگیرید, تنظیم آن در مورد پیشتیبانی مرورگرهای مختلف است. یک قسمت در بالای صفحه برای انجام این تنظیمات وجود دارد. خطوط زیر نمونه هایی از انتخاب مرورگرهایی که هدف شما برای پشتیبانی هستند می باشند.


last 2 versions <!-- دو تا نسخه آخر همه مرورگرهای اصلی -->
last 2 Chrome versions <!-- دو تا نسخه آخر مرورگر کروم -->
> 5% <!-- مرورگر هایی که مورد استفاده آنها بیشتر از 5% کل مرورگر ها در جهان است -->
> 5% in IR <!-- مرورگر هایی که مورد استفاده آنها بیشتر از 2% همه مرورگرها در کشور ایران است -->
ie 6-8 <!-- انتخاب بازه ای از مرورگرها مثلا در اینجا نسخه های 6 تا 8 مرورگرهای مایکروسافت -->
Firefox > 20 <!-- نسخه های جدیدتر از 20 مرورگر فایرفاکس -->
Firefox >= 20 <!-- نسخه های جدیدتر از 20 مرورگر فایرفاکس و خود نسخه 20 -->
Opera < 40 <!-- نسخه های قبل از 40 مرورگر اپرا  -->
iOS 7 <!-- انتخاب یک نسخه خاص یک مرورگر خاص -->

در ضمن می توانید موارد بالا را با هم ترکیب کنید و برای این کار باید از ویرگول استفاده کنید به عنوان مثال تنظیمات پیشفرض autoprefixer به صورت زیر است:


> 1%, last 2 versions, Firefox ESR, Opera 12.1

برای آشنایی بیشتر با این موضوع می توانید به این آدرس مراجعه کنید. همینطور برای اینکه از آمار استفاده از مرورگرها با خبر باشید می توان به این صفحه نگاهی داشته باشید.

10 دیدگاه برای “Autoprefixer: ابزار پیشوندگذاری

  1. من از ویژوال استودیو استفاده می کنم با نصب ریشارپر بر روی آن نیازهای Autoprefixer رو برای مرورگرای مختلف در قبل و بعد از کدنویسی رفع می کنه.
    مطالب خیلی مفیدی ارائه دادید
    بسیار سپسگذارم از شما

    1. چقد کار خوبی کردین که اینو معرفی کردین. ممنون از شما.

      میشه بیشتر توضیح بدین تا بقیه هم باهاش بیشتر آشنا بشن؟

      مثلا اینکه داده ها شو از کجا میاره؟ و نحوه کارش چجوریه یعنی همونجا که css می نویسید بقیه پیشوندها رو تولید می کنه؟

      1. تو نسخه جدید ویژوال استدیو بدون نصب ریشارپر اگر یه بار دکمه تب رو بزنیم این کار رو برامون انجام میده
        همچنین اکستشن های زیادی برای اینکار هست برای ویژوال استدیو هست که میشه نصب کرد

    1. prefix اون پیشوندهایی هستند که مرورگرها بوجود آوردن تا یک سری ویژگی ها رو پشتیبانی کنند. مثل -webkit- یا -moz- و … که بعدا فهمیدن کار اشتباهی بود و دیگه ادامه نداند ولی هنوز ما برای بعضی از ویژگی ها و بعضی از نسخه های مرورگرها نیاز داریم تا از این پیشوند ها استفاده کنیم.

      fallback یه چیز دیگست. فرض کنید می خواین به یک باکس inline-flex بدید اما می دونید که این مقدار برای مرورگرهای قدیمی تعریف نشده و ساپورت نمیشه حالا برای اون مرورگرها از inline-block استفاده می کنیم چون اون رو ساپورت می کنند. باید به این ترتیب هم نوشته بشه:

      display: inline-block
      display: inline-flex

      حالا وقتی یک مرورگر قدیمی به این خطوط نگاه میکنه display اون باکس رو برابر با inline-block قرار میده بعد میره خط بعد چون اون مقدارو نمیشناسه تمومه دیگه. اما وقتی مرورگر مدرن میره خط بعد inline-flex رو میشناسه پس اون مقدار رو برای باکس در نظر میگیره.

      به این کار میگن Fallback نویسی. یعنی اگر مورد دوم ساپورت نشد ما یک پشتیبانی داشته باشیم.

      موفق باشید.

      1. مرسی
        اگه سرعت پاسخگویی رو بالا ببرید ممنون میشیم.
        پست برای من ایمیل نشد توی تلگرام متوجهش شدم. چرا آخه!
        مشکلی که در حال حاضر بنده باهاش مواجه هستم اینکه زبان انگلیسیم خوب نیست و وقتی سوالی و یا مشکلی توی کدم دارم اجبارا باید به زور به stackoverflow مراجعه کنم که بنده خداها جواب میدن ولی اینکه یخورده ناجور میشه :D گفتم یه درد دلی کرده باشم!

  2. چرا شما اینقدر میگید sublime
    brackets که رایگان هست و توسعه داده شده برای فرانت اند رو جایگزین نمیکنید! اونم پلاگین داره برای این منظور.
    من تجربه کاری ندارم فقط این دو رو میشناسم، دلیل استفاده شما از sublime چیه؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *