شرح صفوف ومحتوى الفقرة
يقع كثير من المطورين في خطأ خفي عند كتابة * { box-sizing: border-box; } بمفردها؛ فالمحدد الشامل * يطابق عناصر شجرة المستند الحقيقية فقط ولا يشمل ::before أو ::after! ونتيجة لذلك يعود أي صندوق زخرفي بعرض width: 100% وحشوة داخلية إلى نموذج content-box فيتجاوز حدود حاويته.
لذلك فإن ترقية قاعدة التأسيس في مشاريعك إلى *, *::before, *::after { box-sizing: border-box; } تضمن خضوع جميع الصناديق الحقيقية والمولدة لحساب أبعاد موحد ودقيق.
| العنصر الزائف | الوظيفة الأساسية | القاعدة الجوهرية |
|---|---|---|
::before و::after | الشارات والفواصل الزخرفية | يشترط content ولا يعمل على <img> |
::first-line | إبراز السطر الافتتاحي | يعمل على الكتل ويتحدث تلقائياً مع عرض الشاشة |
::first-letter | تكبير الحرف الاستهلالي | تجنب فصل الحرف المتصل في الكلمات العربية |
::marker | تلوين نقاط وأرقام القوائم | يدعم الخط واللون وcontent فقط |
::placeholder | تنسيق النص الإرشادي للحقول | اضبط لوناً هادئاً مع opacity: 1 |
::selection | تخصيص ألوان تظليل القراءة | حافظ على تباين لا يقل عن 4.5:1 |