الأنماط المحسوبة وفاحص نموذج الصندوق

تعرض علامة Computed في Chrome DevTools ← Elements القيمة النهائية المحسوبة لكل خاصية CSS في العنصر المحدد، بعد حل التتالي والوراثة وspecificity. وهي تجيب عن سؤال "ما الذي طُبّق فعليًا؟" بدلًا من "ما الذي كُتب؟"

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

اكتب في مربع التصفية للعثور بسرعة على خصائص محسوبة محددة. فعّل "Show all" لتضمين الخصائص الموروثة والخصائص الافتراضية للمتصفح. وألغِ تفعيله لعرض الخصائص غير الافتراضية فقط، وهو أقصر طريق إلى الأنماط المطبقة ذات الصلة.

تكون الخصائص المعروضة باللون الرمادي في Computed موروثة من عنصر أب. انقر على الخاصية الموروثة للانتقال إلى العنصر والقاعدة التي حددتها، وتتبع التتالي دون فحص العناصر الأب يدويًا في الترميز.

تتوسع كتابة margin: 16px 8px إلى أربع قيم محسوبة: margin-top وmargin-right وmargin-bottom وmargin-left. تعرض لوحة Computed دائمًا الخصائص الفردية بالصيغة الموسعة، مما يفيد في تصحيح مشكلات التباعد غير المتناظر.

تكون قيم الألوان المحسوبة دائمًا بصيغة rgb() أو rgba()، بغض النظر عن طريقة كتابتها. انقر على عينة لون في لوحة Styles للتبديل بين تنسيقات العرض (hex وhsl وrgb). تعرض لوحة Computed اللون المحلول دائمًا.

افحص font-size وfont-family وline-height وletter-spacing المحسوبة للتحقق من تطبيق رموز الطباعة بشكل صحيح. وتظهر الخطوط البديلة للمتصفح في font-family المحسوبة عند تعذر تحميل الخط المطلوب.

تجعل box-sizing: border-box العرض شاملًا للحشو والحد، بينما تستبعدهما box-sizing: content-box (الإعداد الافتراضي). يعكس مخطط نموذج الصندوق في DevTools النموذج المطبق، لذا قارن عرض المحتوى بالعرض الإجمالي للتأكد من سلوك box-sizing.

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

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

تظهر قواعد ورقة أنماط user-agent في المتصفح أسفل لوحة Styles، مع التسمية "user agent stylesheet". وتعرض Computed قيمها المحلولة. أعد ضبط هذه القواعد باستخدام CSS reset أو Normalize.css لإنشاء أساس متسق عبر المتصفحات.

ما الذي تعرضه لوحة Computed Styles ولا تعرضه لوحة Styles؟

تكشف لوحة Computed Styles ومخطط نموذج الصندوق القيم النهائية المحلولة لجميع خصائص CSS بعد حل التتالي. استخدمهما لتتبع الوراثة، وتصحيح توسيع الصيغ المختصرة، والتحقيق في box-sizing، وتحديد القاعدة الفائزة في تعارضات specificity على أي عنصر.