مؤخرًا، قمت بنشر إطار عمل CSS قمت بتطويره لإنشاء تصميمات شعاعية. أثناء التطوير، واجهت العديد من التحديات، بما في ذلك اختبار الميزات المختلفة. لقد لاحظت أن أدوات فحص CSS والأدوات الأخرى لم تسمح لي بمعرفة سبب عدم عمل شيء ما، حتى لو لم تكن هناك أخطاء أساسية. هناك مشكلة نموذجية أخرى في CSS وهي معرفة كيفية مشاركتها عبر متصفحات مختلفة. لحسن الحظ، اكتشفت أنه يمكن استخدام بعض ميزات CSS الجديدة لإنشاء سلسلة من الاختبارات في الوقت الفعلي. هذه الميزات هي @support و@container و:has().

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

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

هناك أيضًا حالات نموذجية لعدم توافق المتصفح، لذا في بعض الحالات غير الحرجة، أستخدم @support أو @container لإخفاء بعض ميزات Orbit التي لا تؤثر على استخدامه. على سبيل المثال، لا يقبل Safari تنسيقات سياق SVG، لذا أقوم بإخفائها.

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

لا أريد أن أزعجك بالتفاصيل الخاصة بـ Orbit، لكنني سأترك لك الرابط إلى مصدر الدعم والوثائق ذات الصلة.

الريبو: https://github.com/zumerlab/orbit
الملف المصدر: https://github.com/zumerlab/orbit/blob/main/src/scss/_support.scss
وثائق دعم أوربت: https://zumerlab.github.io/orbit-docs/tools/support/

من الجيد التعمق أكثر: https://heydonworks.com/article/testing-html-with-modern-css