یکبار برای همیشه: vendor prefix ها چی هستن؟

تجربه شخصی من از vendor prefix ها این بود که توی سرچ هام و در نهایت پیدا کردن جواب سوالم توی stackoverflow (که بازگشت همه برنامه نویسان به سوی اوست) بهشون برمیخوردم و علامت سوال همیشگی ذهنم این بود که : اینا حتمن خیلی خفنن که قبل property هاشون ازین چیزا میزارن!

بنا شد به توفیق اجباری اقای کشتکار یکبار برای همیشه پرونده شو ببندم و اینجا به اشتراک بزارم برای همه ی نا- خفن ها که خفن بشن!

چیشد وندور پرفیکس (vendor prefix) متولد شد؟

با روی کار اومدن css3 کلی ویژگی(property) های جدید و هیجان انگیز هم به مرور بهش اضافه شد. حالا مشکل ازینجا شروع شد که از وقتی که این ویژگی ها ریلیز میشه تا اینکه browser ها پشتیبانی ازین ویژگی رو فراهم کنند زمان زیادی میبره و به عبارتی توی این بازه زمانی اون ویژگی ها بلااستفاده میمونن.

وندور پرفیکس ها (vendor prefix) چیکار میکنن؟

راه حل مشکلی که بهش اشاره شد vendor prefix ها هستن. vendor prefix ها باعث میشن browser شما بتونه از همه ویژگی های css پشتیبانی کنه؛ جدیدا، قدیمیا، اون عقبیا... . خلاصه همه ی همه.

اصل مطلب

اگه دقت کرده باشید تا اینجای کار گفتم وندور پرفیکس "ها". چرا؟ چون هر browser وندور پرفیکس مخصوص به خودشو داره و به عبارتی هر browser یک vendor prefix رو میشناسه.

بریم ببینیم هر vendor prefix برای کدوم browser هست:

• -webkit- (Chrome, Safari, iOS Safari / iOS WebView, Android)
• -moz- (Firefox)
• -ms- (Edge, Internet Explorer)
• -o- (Opera, Opera Mini)

چطوری ازشون توی کدمون استفاده کنیم؟

به سادگی! فقط کافیه قبل property مورد نظر prefix رو اضافه کنید. مثلا:

.element {

  -webkit-transform: rotate(60deg);

  -ms-transform: rotate(60deg);

  -o-transform: rotate(60deg);

  transform: rotate(60deg);

}

دقت کنید که هر چهار خط بالا یک کار رو انجام میدن و فقط به این خاطر با پیشوند های مختلف تکرار شدن که browser های متفاوت بتونن property رو بشناسن.

مسألةٌ :

باید برای همه ی ویژگی ها همه ی prefix هارو بزاریم تا توی همه ی browser ها کار کنه؟

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

سرویس های autoprefix :

- PostCSS plugin

- npm prefixor

- for Sublime text

دو تا نکته ی تکمیلی:

1. اگر جایی شک کردید که برای ویژگی ای نیازه prefix به کار ببرید یا نه برید اینجا رو چک کنید:
   - shouldiprefix
2. وندور پرفیکس ها برای API های جاوا اسکریپ هم استفاده میشن. اگر راجع به اونها هم کنجکاوید لینک زیر برای شماست:
   - javascript APIs

اینم از پرونده vendor prefixes.

امیدوارم با خوندن این نوشته خفن شده باشید!