دليل لدعم CSS في المتصفحات

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

لماذا لدينا هذه الاختلافات؟

حتى في عالم تعتمد فيه غالبية المتصفحات على Chromium ، فإن هذه المتصفحات لا تعمل جميعها بنفس إصدار Chromium مثل Google Chrome. هذا يعني أن المتصفح المستند إلى Chromium مثل Vivaldi قد يكون إصدارات قليلة خلف Google Chrome.

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

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

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

البق مقابل نقص الدعم

هناك ثلاث مشكلات نواجهها فيما يتعلق بدعم المتصفح:

1. لا يوجد دعم لميزة
   المشكلة الأولى (وأسهل التعامل معها) هي عندما لا يدعم المتصفح الميزة على الإطلاق.
2. التعامل مع "الأخطاء" في المتصفح
   والثاني هو عندما يدعي المتصفح أنه يدعم الميزة ، لكنه يفعل ذلك بطريقة مختلفة عن الطريقة التي تدعم بها المتصفحات الأخرى الميزة. مثل هذه المشكلة هي ما نميل إلى الإشارة إليه على أنه "خطأ في المتصفح" لأن النتيجة النهائية هي سلوك غير متسق.
3. دعم جزئي لخصائص CSS
   أصبح هذا أكثر شيوعًا ؛ موقف يدعم فيه المستعرض ميزة - ولكن في سياق واحد فقط.

من المفيد أن تفهم ما الذي تتعامل معه عندما ترى اختلافًا بين المتصفحات ، لذلك دعونا نلقي نظرة على كل من هذه المشكلات بدورها.

1. لا يوجد دعم لميزة

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

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

إذا كنت تريد التحقق مما إذا كانت الميزة التي تستخدمها مدعومة من قبل المتصفحات ، فيمكنك إلقاء نظرة على موقع Can I Use. مكان آخر جيد للبحث عن معلومات الدعم الدقيقة هو الصفحة الخاصة بكل خاصية CSS على MDN. تميل بيانات دعم المتصفح إلى أن تكون مفصلة للغاية.

CSS الجديدة تتفهم CSS القديمة

مع تطوير ميزات CSS الجديدة ، يتم توخي الحذر من حيث كيفية تفاعلها مع CSS الحالية. على سبيل المثال ، في مواصفات الشبكة و Flexbox ، يتم تفصيلها من حيث كيفية display: grid display: flex مع سيناريوهات مثل عندما يصبح عنصر عائم عنصر شبكة ، أو عندما يتم تحويل حاوية multicol إلى شبكة. هذا يعني أنه يتم تجاهل بعض السلوكيات ، مما يساعدك ببساطة على الكتابة فوق CSS للمتصفح غير الداعم. تم تفصيل هذه التجاوزات في الصفحة الخاصة بالتحسين التدريجي وتخطيط الشبكة على شبكة MDN.

الكشف عن الدعم باستخدام استعلامات الميزات

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

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

 .grid > .item { width: 23%; margin: 0 1%; } 

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

 .grid > .item { width: 23%; margin: 0 1%; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } 

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

اختبار للحصول على الدعم

اختبار الدعم هو أبسط حالة ، نستخدم @supports ثم نختبر خاصية وقيمة CSS. سيتم تشغيل المحتوى الموجود داخل استعلام الميزة فقط إذا استجاب المستعرض بـ "صواب" ، أي أنه يدعم الميزة.

اختبار لعدم وجود دعم

يمكنك أن تسأل المتصفح إذا كان لا يدعم ميزة. في هذه الحالة ، لن يتم تشغيل الكود الموجود داخل Feature Query إلا إذا أشار المستعرض إلى عدم وجود دعم له.

 @supports not (display: grid) { .item { /* CSS from browsers which do not support grid layout */ } }

اختبار لأشياء متعددة

إذا كنت بحاجة إلى أكثر من خاصية واحدة ليتم دعمها ، فاستخدم and .

 @supports (display: grid) and (shape-outside: circle()){ .item { /* CSS from browsers which support grid and CSS shapes */ } }

إذا كنت بحاجة إلى دعم من خاصية أو أخرى ، فاستخدم or .

 @supports (display: grid) or (display: flex){ .item { /* CSS from browsers which support grid or flexbox */ } }

انتقاء الممتلكات والقيمة للاختبار من أجلها

لست بحاجة إلى اختبار كل خاصية تريد استخدامها - فقط شيء يشير إلى دعم الميزات التي تخطط لاستخدامها. لذلك ، إذا كنت تريد استخدام تخطيط الشبكة ، فيمكنك اختبار display: grid . في المستقبل (وبمجرد وصول دعم الشبكة الفرعية إلى المستعرضات) ، قد تحتاج إلى أن تكون أكثر تحديدًا وأن تختبر وظائف الشبكة الفرعية. في هذه الحالة ، ستختبر grid-template-columns: subgrid للحصول على استجابة حقيقية من تلك المتصفحات فقط التي نفذت دعم الشبكة الفرعية.

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

 .grid > .item { width: 23%; margin: 0 1%; } @supports(display: grid) { .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } .grid > .item { width: auto; margin: 0; } } 

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

احتضان الشلال

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

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

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

هل يمكنني استخدام استعلامات ميزات CSS؟ بيانات عن دعم استعلامات ميزات CSS عبر المتصفحات الرئيسية من caniuse.com.

تعني طريقة العمل المذكورة أعلاه أنه لا داعي للقلق بشأن المتصفحات التي لا تدعم استعلامات الميزات. كما ترى من Can I Use ، فإن ميزة "استعلامات الميزات" تتمتع بدعم كبير حقًا. المتصفحات المتميزة التي لا تدعمها هي أي إصدار من Internet Explorer.

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

1. ستعود المتصفحات التي تدعم استعلامات الميزات إلى الحالة الصحيحة إذا كان لديها دعم ، وبالتالي سيتم استخدام الكود الموجود داخل الاستعلام ، والكتابة فوق الرمز للمتصفحات القديمة.
2. إذا كان المستعرض يدعم استعلامات الميزات ولكن ليس الميزة التي يتم اختبارها ، فسيعود خطأ. سيتم تجاهل الكود الموجود داخل استعلام الميزة.
3. إذا كان المتصفح لا يدعم استعلامات الميزات ، فسيتم تجاهل كل شيء داخل كتلة استعلام الميزات ، مما يعني أن متصفحًا مثل IE11 سيستخدم رمز المتصفح القديم ، والذي من المحتمل جدًا أن يكون بالضبط ما تريده!

2. التعامل مع "الأخطاء" في المتصفح

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

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

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

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

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

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

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

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

3. دعم جزئي لخصائص CSS

أصبح النوع الثالث من المشكلات أكثر شيوعًا نظرًا للطريقة التي تم بها تصميم مواصفات CSS الحديثة. إذا فكرنا في Grid Layout و Flexbox ، فإن هذه المواصفات تستخدم الخصائص والقيم في Box Alignment Level 3 ، للقيام بالمحاذاة. لذلك ، تم تحديد خصائص مثل align-items justify-content column-gap لاستخدامها في كل من Grid و Flexbox بالإضافة إلى طرق التخطيط الأخرى.

ومع ذلك ، في وقت كتابة هذا التقرير ، تعمل خصائص gap في تخطيط الشبكة في جميع المتصفحات الداعمة للشبكة ، وتعمل column-gap في Multicol ؛ ومع ذلك ، فقد قام Firefox فقط بتنفيذ هذه الخصائص لـ Flexbox.

إذا كنت سأستخدم الهوامش لإنشاء احتياطي لـ Flexbox ، ثم اختبر column-gap وقم بإزالة الهوامش ، فلن تحتوي مربعاتي على مسافة بينها في المتصفحات التي تدعم column-gap في الشبكة أو multicol ، لذلك ستكون التباعد الاحتياطي الخاص بي إزالة.

 @supports(column-gap: 20px) { .flex { margin: 0; /* almost everything supports column-gap so this will always remove the margins, even if we do not have gap support in flexbox. */ } }

هذا هو القيد الحالي لاستعلامات الميزة. ليس لدينا طريقة لاختبار دعم ميزة في ميزة أخرى. في الحالة أعلاه ، ما أريد أن أسأله للمتصفح هو ، "هل لديك دعم للفجوة العمودية في Flexbox؟" بهذه الطريقة ، يمكنني الحصول على رد سلبي حتى أتمكن من استخدام احتياطي.

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

اختبار لدعم المحدد

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

إذا قمت بزيارة about:config في Firefox وقم بتمكين العلم layout.css.supports-selector.enabled فيمكنك اختبار لمعرفة ما إذا كانت المحددات المختلفة مدعومة أم لا. تعد البنية حاليًا واضحة جدًا ، على سبيل المثال لاختبار :has selector:

 @supports selector(:has){ .item { /* CSS for support of :has */ } }

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

قراءة متعمقة

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

• خيارات "استخدام شبكة CSS: دعم المتصفحات بدون شبكة" للتعامل مع المتصفحات القديمة وشبكة CSS
• "استعلامات الميزة" صفحة مرجعية MDN لاستعلامات الميزة
• "شبكة CSS والتحسين التدريجي" دليل MDN للتحسين التدريجي للشبكة
• دليل MDN "التوافق مع الإصدارات السابقة لـ Flexbox" لدعم Flexbox بما في ذلك تفاصيل التطبيقات ذات البادئة الأقدم
• "مكتبة الأنماط أولاً" كيفية إدارة التعليمات البرمجية الاحتياطية باستخدام مكتبة الأنماط