Vendor Prefix ها یا پیشوندهای مرورگر در CSS

در این مقاله می آموزیم که Vendor Prefix ها چه هستند و چرا باید از آن ها استفاده کنیم؟

vendor prefix های CSS که گاهی اوقات از آن ها به عنوان browser prefix نیز یاد می کنیم، راهی برای پشتیبانی مرورگرها از ویژگی های جدید CSS در نظر گرفته می شوند. در واقع قبل از زمانی که درباره امکان پیشتیبانی همه مرورگرها از ویژگی های جدید آگاه شویم، امکان استفاده از vendor prefix ها مطرح می شود. در طول زمانی که برای آزمایش و تست مرورگر درنظر گرفته می شود تا سازنده مرورگر دقیقا نحوه عملکرد این ویژگی های جدید CSS را تعیین کند، این امکان وجود دارد تا از vendor prefix ها استفاده کنیم. این امکان که می توان آن را در فارسی به صورت «پیشوندهای مرورگر!» معنا کرد، در سال های اخیر با توجه به رشد استفاده از CSS3 بسیار محبوب شده است.

زمانی که ابتدا CSS3 معرفی شد، تعدادی از ویژگی های جذاب و جدید CSS3، مرورگرها را وارد چالش کرد. برای مثال، مرورگرهای قدرت گرفته از موتور Webkit (مانند Safari و Chrome) جزء اولین مرورگرهایی بودند که ویژگی های مربوط به aniamtion-style را (مثل transform و transition) معرفی کردند.

با استفاده از ویژگی vendor prefix، طراحان وب توانستند از ویژگی های جدید CSS در کار خود استفاده کنند و در سایر مروگرهایی که از vendor prefix پشتیبانی می کردند، این ویژگی های جدید را مشاهده کنند. با این کار نیاز نبود تا طراحان منتظر بمانند و ببینند سایر مرورگرها چطور از ویژگی های جدید CSS3 پشتیبانی می کنند!

پیشوندهای مشترک

از دید یک توسعه دهنده front-end، پیشوندهای مرورگر جهت اضافه کردن ویژگی های جدید CSS به سایت هاست در حالی که می داند مرورگر از این سبک استایل دهی (پیشوند های مرورگر - browser prefixes) پشتیبانی می کند. این دید، به خصوص زمانی مفید است که بدانیم ممکن است مرورگرها ویژگی های مختلف را به صورت های مختلفی پشتیبانی کنند. اما با این دید، برنامه نویس تنها با بهره گیری از پیشوندها کار خود را انجام می دهد و درگیر پیاده سازی های دیگر نمی شود.

پیشوندهای مرورگر که در CSS می توانید استفاده کنید (در مرورگرهای مختلف این پیشوند ها متفاوت هستند)، به شرح زیر هستند:

Android

-webkit-

Chrome

-webkit-

Firefox

-moz-

Internet Explorer

-ms-

iOS

-webkit-

Opera

-o-

Safari

-webkit-

زمانی که می خواهید از یک ویژگی جدید و خاص CSS استفاده کنید، باید نام استاندارد آن خاصیت CSS را به پیشوندهایی که در بالا آمده است، اضافه کنید. بنابراین همیشه خواص vendor prefix با پیشوند مرورگر آغاز می شوند و بعد از آن نام خاصیت CSS می آید. شما می توانید در بکار بردن پیشوند های مختلف (برای مرورگرهای مختلف) هر نوع ترتیبی داشته باشید و کاملا انتخابیست. مثلا در کد مثال زیر خاصیت transition در CSS3 طوری مقداردهی می شود که در همه مرورگرها کار کند:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

حتما به خاطر داشته باشید که بعضی از مروگرها از سینتکسی متفاوت برای اعمال خواص vendor prefix در مقایسه با CSS استاندارد استفاده می کنند. بنابراین تصور نکنید سینتکس استفاده از یک ویژگی معین CSS در حالت استاندارد حتما با نسخه سینتکسی vendor prefix آن برابر است.

برای مثال جهت ایجاد gradient، مرورگر Opera و نسخه های مدرن مرورگر Chrome و Safari، این ویژگی را به همراه پیشوند مناسب بکار می برند، در حالی که نسخه های اخیر Chrome و Safari اصطلاحا از prefixed property (خاصیت پیشوند شده) استفاده می کنند که به صورت webkit-gradient- می باشد. همچنین Firefox از مقادیر متفاوتی نسبت به این مرورگرها استفاده می کند.

شما همیشه باید تعریف ویژگی را با سینتکس نرمال و استاندارد در آخرین قسمت اعلان آن ویژگی قرار دهید. به این دلیل، همیشه تعاریف خود را با سینتکس استاندارد به پایان می رسانید. به خاطر بیاورید که CSS چطور خوانده می شود. با در نظر گرفتن ترتیب از بالا به پایین، دستورات بعدی (پایین تر) اولویت بیشتری نسبت به دستورات قبلی یا بالایی دارند. بنابراین مرورگر ابتدا تعریف استاندارد را می بیند و اگر آن را پشتیبانی کرد از آن استفاده می کند و اما اگر از دستور سینتکس استاندارد پشتیبانی نکرد، به سراغ یکی از دستورات vendor می رود و از آن بهره می برد که در واقع نسخه override شده شکل نرمال و استاندارد دستور (اعلان خاصیت CSS) است.

Vendor Prefix ها هک CSS نیستند

به طور خلاصه هک CSS به مجموعه روش هایی گفته می شود تا ویژگی CSS را جهت پشتیبانی مرورگری خاص پیاده سازی کنند و آن پیاده سازی خاص توسط سایر مرورگرها در نظر گرفته نمی شود.

زمانی که برای اولین بار vendor prefix ها معرفی شدند، توسعه دهنده های وب این طور برداشت کردند که احتمالا این ویژگی هم یک نوع هک CSS است و یا عقبگردی است به دورانی که باید چند کد برای سایت ها می نوشتند تا در مرورگرهای مختلف پشتیبانی شود (پیام «این سایت به بهترین شکل در IE مشاهده می شود» را بیاد بیاورید). vendor prefix ها در CSS هک نیستند و به جهت هک CSS رزرو نشده اند تا در کارهایتان استفاده کنید.

یک هک CSS از خطاهایی که در پیاده سازی عنصر یا یک ویژگی وجود دارد، به جهت این که ویژگی دیگری درست کار کند، بهره برداری می کند. برای مثال هک box model در CSS را در نظر بگیرید که از خطاهای شیوه پارس کردن ویژگی voice-family یا این که مرورگرها چطور \ (backslash) را پارس می کنند، بهره می برد. حالا مسئله این است که این هک کردن به جهت مدیریت تفاوت های Internet Explorer 5.5 و Netscape در تفسیر box model بکار می آید و ارتباطی به ویژگی voice family ندارد. البته خوشبختانه دیگر ما نگرانی در مورد این دو مرورگر منسوخ شده نداریم.

vemdor prefix ها هک نیستند به این دلیل که این امکان را به ما می دهند تا تعاریف ویژگی های CSS را تنظیم کنیم و بگوییم که چطور اجرا شوند. vendor prefix ها در حالی که این امکان را به ما می دهند، به مرورگرها نیز این اجازه را می دهند تا ویژگی های CSS را به روش متفاوتی پیاده سازی کنند بدون آن که خللی در کار ایجاد شود. علاوه بر همه این ها، پیشوندهای موجود در vendor prefix ها با ویژگی های CSS کار می کنند که در نهایت نیز بخشی از ویژگی محسوب می شوند و دیگر آن که به جهت دسترسی سریع به ویژگی های CSS ما به سادگی کدهایی را اضافه می کنیم که این دلیل دیگری است برای آن که ما تعاریف ویژگی ها را در قالب vendor prefix با تعریف استاندارد ویژگی به پایان می بریم. با این شیوه شما می توانید در صورت پشتیبانی مرورگر، آن تعریف دیگر را که در شرایط قبلی داشتید رها کنید.

اگر می خواهید بدانید که مرورگری از یک ویژگی CSS پشتیبانی می کند یا خیر می توانید به سایت CanIUse.com سری بزنید که منبعی با اطلاعات ارزشمند است. این منبع، اطلاعاتی را راجع به این که آیا مرورگری خاص و نسخه ای خاص از آن از یک ویژگی معین پشتیبانی می کند یا خیر؟ به شما می دهد.

vendor prefix ها زحمت برایمان ایجاد می کنند، اما موقتیست

بله! ممکن است برای شما نوشتن 2 تا 5 بار از یک ویژگی خسته کننده باشد که در همه مرورگرها کار کند اما این یک وضعیت موقتیست. برای مثال، تا چند سال قبل، برای گرد کردن گوشه های یک box شما باید کد زیر را می نوشتید:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

اما در حال حاضر مرورگرها به طور کامل از این ویژگی پشتیبانی می کنند و شما در نهایت به نسخه استاندارد تعریف این ویژگی نیاز دارید:

border-radius: 10px 5px; 

مرورگر Chrome از نسخه 5.0 ویژگی های CSS3 را پشتیبانی می کند. Firefox این ویژگی ها را در نسخه 4 به بعد اضافه کرده است. Safari از نسخه 5.0 این کار را انجام داده است. مرورگر Opera از نسخه 10.5 به بعد این ویژگی ها را پشتیبانی می کند. iOS از نسخه 4.0 و اندروید از نسخه 2.1 این ویژگی ها را پشتیبانی می کنند. حتی Internet Explorer 9 از آن ها بدون پیشوند پشتیبانی می کند. (و البته IE8 و نسخه های پایین تر نیز از این ویژگی ها با یا بدون پیشوند پشتیبانی نمی کنند.)

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

منبع: سایت Life Wire