پیشوند فروشندگان CSS

آنها چه هستند و چرا باید از آنها استفاده کنید

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

هنگامی که CCS3 برای اولین بار معرفی شد، تعدادی از ویژگی های هیجان انگیز در زمان های مختلف به مرورگرهای مختلف رسید. به عنوان مثال، مرورگرهای وب کیت (Safari و Chrome) اولین کسانی بودند که برخی از خواص سبک انیمیشن مانند تبدیل و انتقال را معرفی کردند. با استفاده از ویژگیهای پیشفرض فروشنده، طراحان وب توانستند از ویژگیهای جدید در کار خود استفاده کنند و آنها را در مرورگرهایی که از آنها پشتیبانی می کردند، بلافاصله مشاهده کنند، به جای این که منتظر بمانند تا هر سازنده دیگر مرورگر به عقب بر گردند!

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

پیشوند مرورگر CSS که می توانید از آن استفاده کنید (هر یک از آنها یک مرورگر متفاوت است):

• آندروید: -webkit-
• Chrome: -webkit-
• فایرفاکس: -moz-
• اینترنت اکسپلورر: -ms-
• iOS: -webkit-
• اپرا: -o-
• صفری: -webkit-

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

-webkit- انتقال: همه 4s سهولت؛
-moz- انتقال: همه 4s سهولت؛
-ms- انتقال: همه 4s سهولت؛
-o- انتقال: همه 4s سهولت؛
انتقال: همه 4s سهولت؛

توجه داشته باشید: به یاد داشته باشید، برخی از مرورگرها دارای خواص خاصی برای خواص خاصی نسبت به دیگران هستند، بنابراین فرض بر این نداشت که نسخه پیشفرض مرورگر از یک ویژگی دقیقا مشابه ویژگی استاندارد است. برای مثال، برای ایجاد یک گرادیان CSS ، شما از ویژگی gradient خطی استفاده می کنید. فایرفاکس، اپرا و نسخه های مدرن کروم و سافاری این ویژگی را با پیشوند مناسب استفاده می کنند در حالی که نسخه های اولیه Chrome و Safari از ویژگی pre-property -webkit-gradient استفاده می کنند. همچنین فایرفاکس از مقادیر مختلفی نسبت به موارد استاندارد استفاده می کند.

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

پیشوند فروشندگان هک نیست

هنگامی که پیشوندهای ارائه شده برای اولین بار معرفی شد، بسیاری از متخصصان وب متوجه شدند که آیا آنها یک هک یا تغییر در روزهای تاریک از کد کد وب سایت برای پشتیبانی از مرورگرهای مختلف (به یاد داشته باشید که " این سایت بهتر است در پیام های اکسپلورر مشاهده شده "). پیشوند فروشندگان CSS هک نیست، و شما نباید در مورد استفاده از آنها در کار خود هیچ نظری داشته باشید.

یک هک CSS از اجرای یک عنصر یا یک ملک دیگر برای خلاص شدن از شر یک ملک دیگر برای کار درست استفاده می کند. به عنوان مثال، جعبه مدل هک از نقص در تجزیه و تحلیل از مالکیت صوتی خانواده و یا در نحوه تجزیه backslashes (\) مرورگرها مورد سوء استفاده قرار گرفته است. اما این هک ها برای رفع مشکل تفاوت بین نحوه کارکرد مدل جعبه ای Internet Explorer 5.5 و نحوه تفسیر Netscape مورد استفاده قرار گرفت و هیچ ارتباطی با سبک خانواده صوتی نداشتند. خوشبختانه این دو مرورگر قدیمی منسوب به این هستند که ما امروز نگران خودمان نیستیم.

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

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

پیشوند های فروشنده مزاحم اما موقت هستند

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

-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؛
مرز شعاع: 10px 5px؛

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

مرز شعاع: 10px 5px؛

کروم از نسخه 5.0 از نسخه CSS3 پشتیبانی کرده است، فایرفاکس آن را در نسخه 4.0 اضافه کرد، Safari آن را در 5.0، اپرا در 10.5، iOS در 4.0 و Android در 2.1 اضافه کرد. حتی اینترنت اکسپلورر 9 آن را بدون یک پیشوند (و IE 8 و پایینتر آن را با یا بدون پیشوند پشتیبانی نمی کند) پشتیبانی می کند.

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