ما المقصود ببادئات CSS أو المستعرض؟

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

أصول بادئات البائعين

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

البادئات الشائعة

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

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

• ذكري المظهر:

  -webkit-

• كروم:

  -webkit-

• ثعلب النار:

  -موز-

• متصفح الانترنت:

  -آنسة-

• iOS:

  -webkit-

• أوبرا:

  -o-

• سفاري:

  -webkit-

إضافة بادئة

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

-webkit- الانتقال: كل 4s سهلة ؛
-موز-الانتقال: سهولة كل 4 ثانية ؛
-ms- الانتقال: كل 4s سهولة ؛
-o-Transition: كل 4s سهلة ؛
الانتقال: كل 4s سهلة ؛ 

تذكر أن بعض المتصفحات لها بنية مختلفة لخصائص معينة عن غيرها ، لذلك لا تفترض أن الإصدار المسبق بالمتصفح من الخاصية هو نفسه تمامًا للخاصية القياسية. على سبيل المثال ، لإنشاء تدرج CSS ، يمكنك استخدام خاصية التدرج الخطي. تستخدم Firefox و Opera والإصدارات الحديثة من Chrome و Safari هذه الخاصية مع البادئة المناسبة بينما تستخدم الإصدارات القديمة من Chrome و Safari الخاصية مسبوقة -webkit-gradient.

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

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

بادئات البائع ليست اختراق

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

يستغل اختراق CSS الثغرات في تنفيذ عنصر أو خاصية أخرى من أجل جعل خاصية أخرى تعمل بشكل صحيح. على سبيل المثال ، استغل اختراق نموذج الصندوق العيوب في تحليل عائلة الصوت أو في كيفية تحليل المتصفحات للشرطات المائلة للخلف \. ولكن تم استخدام هذه الاختراقات لإصلاح مشكلة الاختلاف بين كيفية تعامل Internet Explorer 5.5 مع نموذج الصندوق وكيف نتسكيب فسرها ، وليس لها علاقة بأسلوب عائلة الصوت. لحسن الحظ ، هذان المتصفحان القديمان هما متصفحان لا يجب أن نهتم بهما هذه الأيام.

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

بادئات البائع مزعجة ولكنها مؤقتة

نعم ، قد يكون من المزعج والمتكرر أن تضطر إلى كتابة الخصائص 2-5 مرات حتى تعمل في جميع المتصفحات ، لكنها حالة مؤقتة. على سبيل المثال ، قبل بضع سنوات فقط ، لتعيين زاوية مستديرة في مربع كان عليك أن تكتب:

-موز حدود نصف قطرها: 10 بكسل 5 بكسل ؛
-webkit-border-top-left-radius: 10px ؛
-webkit-border-top-right-radius: 5px ؛
-webkit-border-bottom-right-radius: 10px ؛
-webkit-border-bottom-left-radius: 5px ؛
نصف قطر الحدود: 10 بكسل 5 بكسل ؛ 

ولكن الآن بعد أن أصبحت المتصفحات تدعم هذه الميزة بشكل كامل ، فأنت تحتاج حقًا فقط إلى الإصدار القياسي:

نصف قطر الحدود: 10 بكسل 5 بكسل ؛ 

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

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