مدیریت پیشوندها در CSS برای پشتیبانی در مرورگرهای مختلف

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

وقتی ما می‌خوایم یک سایت یا یک برنامه تحت وب طراحی کنیم، معمولا نمی‌تونیم به کاربرانمون بگیم که حتما از فایرفاکس نسخه فلان استفاده کنن و وقتی که اونا ببینن سایت ما زشت توی صفحشون نشون داده میشه، ما رو مقصر می‌دونن. کاری که ما باید انجام بدیم، اینه که کدمون توی تمام برازرهایی که الان پر استفاده هستن، کار کنه. چجوری؟ فرض کنید الان سال 2013ـه و ما می‌خوایم یک بلاک درست کنیم که کاربر اجازه نداره سلکتش کنه، رنگ زمینه بالاش سفیده و پایینش هم مشکی. برای اینکار، ما یه چنین کدی احتیاج داریم:

کد استاندارد:

.example {
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

اما اگه همین کد رو توی برازرها اجرا کنیم، میبینیم توی بعضی‌هاشون عمل نمیکنه. بخاطر اینکه اونا هنوز این کدهای ما رو نمیفهمن؟ نه! بخاطر اینکه ما نیاز به یه چنین کدی داریم تا حداقل به بهترین نتیجه برسیم:

.example {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -webkit-linear-gradient(top, white, black);
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

اوه. آدم واقعا پشیمون میشه از این که بخواد این همه کد رو بنویسه واسه دو تا استایل. چرا ما باید این همه prefix بنویسیم؟ خب اونا برن برازر جدید استفاده کنن! اما دنیا اینطوری کار نمی‌کنه. ما باید حداقل تا حد زیادی به سلیقه کاربرانمون احترام بذاریم و کدی بنویسیم که حتی استفاده کنندگان IE هم بتونن استفاده کنن. (همکار ویندوزی‌اش نگاهی خشمناک به او میکند). برای اینکه این کار برای خود ما هم راحت‌تر بشه، sass و lessمعرفی شدن که قابلیت‌های جدیدی اضافه کردن. مثلا یکیش mixin نوشتن بود که ما توش میگفتیم هر وقت توی کدمون نوشتیم mammad، تمام این استایل‌ها ایجاد بشن.

@mixin mammad() {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -webkit-linear-gradient(top, white, black);
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

.example{
  @include mammad();
}

.example2{
  @include mammad();
}

بلاک اول این کد، mixin ما رو ایجاد میکنه و از اون به بعد هر جایی ما اون رو فراخونی کنیم، تمام استایل‌ها به این جای جدید اعمال میشن. خیلی کار راحت شد نه؟ اما ما هنوز هم به نتیجه دلخواه نرسیدیم. بخاطر اینکه این روش باعث میشه ما باز هم یه چیزایی رو از دست بدیم. مثلا ما یادمون بره که پیشوند -ms- که خیلی کم استفاده میشه، توی mixinـمون استفاده کنیم. به علاوه اینکه باعث میشه ما یه syntax جدید واسه خودمون درست کنیم. اگه یه آدم دیگه که اتفاقا خدای css هست بخواد بیاد کدهای مارو بخونه، احتمالا کدهای مارو نمی‌فهمه! چون به هرحال اینا کدهای استاندارد نیستن!

از وقتی postcss و پلاگین خیلی خوب autoprefixer معرفی شد، ما خیالمون دیگه از این بابت راحت شد. وقتی ما پروژمون رو توسط این‌ها کانفیگ کنیم (که بخاطر طولانی شدن مطلب الان وارد جزئیاتش نمیشم)، ما میشیم همون آدم قبلی که از prefix نوشتن متنفره و همون کد اول این مطلب رو مینویسه. چون autoprefixer زحمت این کار رو برای ما میکشه. مثلا ما توی کانفیگمون میگیم:

autoprefixer('last 2 versions', 'ie 10')

این پلاگین خودش میفهمه که ما نیاز داریم کدمون توی دو تا نسخه آخر برازرها و همچنین IE نسخه 10 کار کنه، پس میاد و تمام prefixهای مورد نیاز ما رو ایجاد میکنه و خروجی درست رو به ما تحویل میده! امیدوارم این مطلب به دردتون بخوره!

منابع