40 حالة اختبار

CSS الحديث

CSS الحديث يقدم ميزات قوية يمكن أن تغير كيفية عرض صفحتك بالكامل. Delta-QA يبقى محدثاً مع أحدث مواصفات CSS ويكتشف الانحدارات في الميزات المتقدمة.

محدد :has()

يكتشف التغييرات البصرية الناتجة عن محددات الأب :has() التي تنسق العناصر شرطياً بناءً على أبنائها.

تداخل CSS

يراقب سلوك تداخل CSS الأصلي ويلتقط انحدارات خصوصية القواعد المتداخلة.

تتالي @layer

يتتبع تغييرات ترتيب طبقات التتالي التي يمكن أن تتجاوز الأنماط بشكل غير متوقع.

Subgrid

يكتشف تغييرات التخطيط عندما ينكسر محاذاة subgrid بين حاويات الشبكة.

@scope

يراقب تغييرات الأنماط المحددة النطاق والشروط الحدية التي تؤثر على عزل أنماط المكونات.

خصائص منطقية

يلتقط تغييرات الخصائص المنطقية (inline-start, block-end) المستخدمة للتخطيطات الجاهزة للتدويل.

قبل

بعد

جرّب أداة المقارنة عبر الإنترنت

يستخدم مطوّر CSS container queries لتكييف مكوّن مع حاويته لكنه ينسى تحديد container-type على الأب. في Chrome، الفوال-باك يعمل. في Safari، المكوّن يظهر بحجم خاطئ — عريض جدًا أو ضيّق جدًا حسب السياق. زوّارك على iPhone يرون مكوّنًا مكسورًا. الفريق يطوّر ويختبر على Chrome، وليس على كل المتصفّحات في كل سبرنت. Delta-QA يلتقط الموقع على كل متصفّح ويقارن اللقطات: المكوّن ذو الحجم الخاطئ على Safari يظهر في diff.

يستخدم مطوّر المحدّد :has() لتنسيق نموذج — إبراز التسميات عند ملء الحقل، تمييز الحقول المطلوبة. في Firefox (قبل الإصدار 121)، :has() غير مدعوم: الزوّار يرون نموذجًا بدون أي إشارات بصرية. الفريق يطوّر على Chrome، الخلل لا يظهر محليًا أبدًا. Delta-QA يلتقط النموذج على كل متصفّح ويقارن بصريًا: الأنماط المفقودة على Firefox تظهر عند التراكب.

يستخدم مطوّر subgrid لمحاذاة الأسعار والأوصاف والأزرار في شبكة منتجات. في متصفّح لا يدعم subgrid، تتفكّك العناصر: الأسعار لم تعد مقابل المنتجات، أزرار «اشترِ» على ارتفاعات مختلفة. فريق QA تحقّق على Chrome (الذي يدعم subgrid)، لكن ليس على المتصفّحات الأخرى. Delta-QA يلتقط الشبكة على كل متصفّح ويقارن اللقطات: العناصر المتفكّكة تظهر في diff.

السابقالتصميم المتجاوب

التاليمكونات حقيقية