البادئات المغلفة CSS

ما هي ولماذا يجب عليك استخدامها

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

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

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

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

• Android: -webkit-
• Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• الأوبرا:
• سفاري: - webkit-

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

-webkit- الانتقال: كل سهولة 4s.
-moz- الانتقال: كل سهولة 4s.
-ms- الانتقال: سهولة جميع 4s؛
-o- الانتقال: سهولة جميع 4s؛
الانتقال: كل سهولة 4s.

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

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