لوحة CSS Overview

في Chrome DevTools، افتح لوحة CSS Overview عبر Cmd+Shift+P → "CSS Overview". انقر على "Capture overview" لتحليل ملف الأنماط الكامل للصفحة الحالية. تلخّص اللوحة الألوان والخطوط واستعلامات الوسائط والتعريفات غير المستخدمة.

يسرد قسم Colors كل قيمة لون مستخدمة في CSS الخاصة بالصفحة — hex وrgb والقيم المسماة وتوقفات التدرج — مع تجميعها حسب النوع. يؤدي النقر على لون إلى إظهار العناصر والخصائص التي تستخدمه، مما يكشف التنوّع اللوني غير المقصود وتشتّت لوحة الألوان.

يسرد قسم Fonts كل مجموعة من قيم font-family وfont-size وfont-weight المطبقة على الصفحة. ويكشف الخطوط الاحتياطية في مكدس الخطوط، ويسلط الضوء على عدم اتساق مقاييس أحجام النصوص، ويعرض العناصر التي تستخدم كل مجموعة.

يسرد قسم Media Queries كل قاعدة @media ونقاط توقفها وعدد التعريفات الموجودة داخلها. يكشف هذا الملخص عدم اتساق نقاط التوقف — إذ تتراكم لدى الفرق أحيانًا أكثر من 15 قيمة مختلفة قليلًا لنقاط التوقف في قاعدة الشيفرة.

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

تسلط اللوحة الضوء على ألوان النص التي لا تحقق نسب التباين المطلوبة وفق WCAG AA أو AAA مقابل خلفياتها. يؤدي النقر على حالة فشل التباين إلى تحديد العنصر في DOM، مما يسهّل إصلاح مشكلات إمكانية الوصول دون أدوات منفصلة.

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

شغّل CSS Overview على صفحات متعددة من التطبيق نفسه. يكشفَت مقارنة ملخصات الألوان والخطوط الانحراف الخاص بكل صفحة — أي المكونات التي تُعرض بأسلوب طباعة أو لون مختلف عن نظيراتها في الصفحات الأخرى.

صدّر بيانات الألوان من CSS Overview وقارنها بلوحة رموز التصميم لديك. الألوان الموجودة في الملخص وغير الموجودة في لوحة الرموز هي قيم ثابتة ينبغي تحويلها إلى مراجع للرموز وإزالتها كقيم مستقلة.

أدرج نقاط التوقف من CSS Overview، وحدد القيم المكررة والمتقاربة جدًا (768px و769px و770px من مطورين مختلفين)، وادمجها في مقياس نقاط التوقف الخاص بنظام التصميم، ثم حدّث جميع استعلامات الوسائط لاستخدام CSS custom properties أو متغيرات SCSS.

تحلل CSS Overview أوراق الأنماط المرتبطة، وليس الأنماط المضمنة أو أنماط CSS-in-JS وقت التشغيل. وقد لا تظهر الفئات الديناميكية التي يضيفها JavaScript بعد العرض الأولي. استكمل ذلك باستخدام Coverage والفحص اليدوي للحصول على تغطية كاملة للأنماط الديناميكية.

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