ما هو بائع CSS أو بادئات المتصفح؟

تعد بادئات بائع CSS ، والتي تعرف أيضًا أحيانًا أو بادئات مستعرضات CSS ، طريقة يستخدمها صانعي المتصفح لإضافة دعم لميزات CSS الجديدة قبل أن يتم دعم هذه الميزات بشكل كامل في جميع المتصفحات. يمكن القيام بذلك خلال فترة اختبار وتجربة حيث تقوم الشركة المصنعة للمتصفح بتحديد كيفية تنفيذ ميزات CSS الجديدة هذه بالضبط. أصبحت هذه البادئات تحظى بشعبية كبيرة مع صعود CSS3 قبل بضع سنوات.

عندما تم تقديم CCS3 لأول مرة ، بدأ عدد من الخصائص المثارة في الوصول إلى متصفحات مختلفة في أوقات مختلفة. على سبيل المثال ، كانت المتصفحات التي تدعمها Webkit (Safari و Chrome) هي أول من قدم بعض خصائص نمط الرسوم المتحركة مثل التحويل والانتقال. باستخدام خصائص مسبقة للبائع ، كان مصممو الويب قادرين على استخدام هذه الميزات الجديدة في عملهم وجعلهم ينظرون إلى المتصفحات التي دعمتهم على الفور ، بدلاً من الاضطرار إلى انتظار كل مصنع آخر للمتصفح للحاق!

لذلك من منظور مطور ويب أمامي ، يتم استخدام بادئات المتصفح لإضافة ميزات CSS جديدة على موقع ما مع وجود راحة في معرفة أن المتصفحات ستدعم هذه الأنماط. يمكن أن يكون هذا مفيدًا بشكل خاص عند تنفيذ جهات تصنيع المستعرضات المختلفة للخصائص بطرق مختلفة قليلاً أو باستخدام بناء جملة مختلف.

إن بادئات مستعرض CSS التي يمكنك استخدامها (كل منها خاص بمتصفح آخر) هي:

ذكري المظهر:
-webkit-
كروم:
-webkit-
ثعلب النار:
-moz-
متصفح الانترنت:
-الآنسة-
دائرة الرقابة الداخلية:
-webkit-
أوبرا:
-o-
سفاري:
-webkit-

في معظم الحالات ، لاستخدام خاصية نمط CSS جديدة تمامًا ، فإنك تأخذ خاصية CSS القياسية وتضيف البادئة لكل متصفح. ستأتي الإصدارات السابقة مسبقًا أولاً (بأي ترتيب تفضل) بينما ستظهر خاصية CSS العادية في الأخير. على سبيل المثال ، إذا كنت تريد إضافة انتقال CSS3 إلى المستند ، فستستخدم

انتقال

الخاصية كما هو موضح أدناه:

-webkit- الانتقال: كل سهولة 4s. -moz- الانتقال: كل سهولة 4s. -الآنسة- الانتقال: كل سهولة 4s. -o- الانتقال: كل سهولة 4s.الانتقال: كل سهولة 4s.

ملحوظة: تذكر أن بعض المتصفحات لها بنية مختلفة لخصائص معينة مقارنة بغيرها ، لذلك لا تفترض أن إصدار المتصفح ذي الملكية المسبقة هو نفسه تمامًا مثل الموقع القياسي. على سبيل المثال ، لإنشاء تدرج CSS ، يمكنك استخدام

الخطي التدرج
خاصية. يستخدم كل من Firefox و Opera والإصدارات الحديثة من Chrome و Safari تلك الخاصية بالبادئة المناسبة بينما تستخدم الإصدارات القديمة من Chrome و Safari الخاصية مسبوقة

-webkit-التدرج
. أيضا ، يستخدم Firefox قيمًا مختلفة عن القيم القياسية.

السبب في إنهاء دائمًا للإعلان باستخدام الإصدار العادي غير المُسبَق لخاصية CSS هو أنه عندما يدعم المستعرض القاعدة ، فإنه يستخدم ذلك. تذكر كيف تتم قراءة CSS. تكون القواعد الأحدث لها الأسبقية على القواعد السابقة إذا كانت الخصوصية هي نفسها ، لذلك فإن المتصفح سيقرأ إصدار البائع للقاعدة ويستخدمها إذا لم يدعم الإصدار العادي ، ولكن بمجرد أن يتم ذلك ، فإنه سيتجاوز إصدار البائع مع قاعدة CSS الفعلية.

البادئات البائعين ليست هاك

عندما تم تقديم بادئات البائعين لأول مرة ، تساءل العديد من محترفي الويب عما إذا كانوا قد تعرضوا للاختراق أو العودة إلى الأيام المظلمة المتمثلة في تشفير رمز موقع الويب لدعم المتصفحات المختلفة (تذكر ذلك) هذا الموقع هو أفضل عرض في IE على الرغم من ذلك ، لا تكون بادئات صفحات CSS خارقة ، ولن يكون لديك أي تحفظ بشأن استخدامها في عملك.

يستغل قرص اختصار CSS الثغرات في تنفيذ عنصر أو خاصية أخرى من أجل الحصول على خاصية أخرى للعمل بشكل صحيح. على سبيل المثال ، استغل الاختراق نموذج مربع العيوب في تحليل

صوت الأسرة
أو في كيفية تحليل المستعرضات خطوط مائلة عكسية (

). ولكن تم استخدام هذه الاختراقات لإصلاح مشكلة الاختلاف بين كيفية معالجة 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؛border-radius: 10px 5px؛
ولكن الآن أصبحت المتصفحات تدعم هذه الميزة بشكل كامل ، فأنت تحتاج فقط إلى الإصدار القياسي فقط:

border-radius: 10px 5px؛
دعم Chrome خاصية CSS3 منذ الإصدار 5.0 ، أضافه Firefox في الإصدار 4.0 ، وأضاف Safari في الإصدار 5.0 ، Opera في الإصدار 10.5 ، iOS في 4.0 ، و Android في الإصدار 2.1. حتى أن Internet Explorer 9 يدعمها بدون بادئة (ولم يدعمها IE 8 أو أقل مع البادئات أو بدونها).

تذكر أن المتصفحات ستتغير دائمًا وأن الطرق الإبداعية لدعم المتصفحات القديمة ستكون مطلوبة إلا إذا كنت تخطط لإنشاء صفحات ويب تتخلف أكثر من عام عن أحدث الأساليب. في النهاية ، تعد كتابة بادئات المتصفح أسهل بكثير من العثور على الأخطاء التي من المرجح أن تكون ثابتة في إصدار مستقبلي واستغلالها ، مما يتطلب العثور على خطأ آخر لاستغلاله وما إلى ذلك.