في هذا الدرس 6تصفّح المواضيع
يمتلك كل متصفح ويب ورقة تنسيقات داخلية افتراضية خاصة به تعود لعقود مضت؛ لذا تختلف الهوامش الافتراضية للعناوين والقوائم والأزرار ومجموعات الحقول بشكل طفيف بين Chrome و Firefox و Safari. ولو بنيت شبكتك مباشرةً فوق هذه الفروق غير المتجانسة لاختلفت محاذاة العناصر من جهاز لآخر.
تُعد طبقة Reboot حجر الأساس الأول داخل ملف bootstrap.min.css؛ فهي تطوّر فكرة Normalize.css لتوحيد مظهر العناصر القياسية عبر محددات الوسوم المباشرة فقط دون أي كلاسات إضافية، لتبدأ جميع المتصفحات من نقطة انطلاق هندسية متطابقة تماماً.
في نموذج الصندوق التقليدي القديم content-box، إذا منحت عنصراً عرضاً قدره 50% ثم أضفت له حشواً داخلياً أو إطاراً، ازداد عرضه الفعلي عن النصف وانكسرت الأعمدة المتجاورة فوراً. تعالج طبقة Reboot هذه المشكلة من جذورها بفرض القاعدة الشاملة box-sizing: border-box على كافة العناصر والعناصر الزائفة ::before و ::after.
بفضل هذه القاعدة، إذا حددت عرض صندوق بـ 220px وأضفت حشواً بـ 14px وإطاراً بـ 4px، يبقى العرض الكلي الخارجي للصندوق مساوياً لـ 220px بالضبط دون زيادة بكسل واحد!
<div class="container">
<div id="box" class="sizing-compare">
Declared width: 220px
</div>
<p id="out"></p>
</div>
<script>
const w = document.getElementById('box').offsetWidth;
document.getElementById('out').textContent = w + 'px';
</script>تضبط طبقة Reboot إعدادات عامة نظيفة ومدروسة على عنصري <html> و <body> فور تحميل الصفحة:
- إلغاء هامش الصفحة الخارجي: تصفر الهامش الافتراضي
8pxحول<body>لتمتد الأشرطة العلوية والخلفيات من الحافة إلى الحافة بسلاسة. - اعتماد وحدة
remالنسبية: تحترم حجم الخط الافتراضي في إعدادات متصفح الزائر والذي يعادل غالباً16px، وتمنح النص الأساسي حجماً قدره1remوارتفاع سطر مريحاً قدره1.5. - حزمة خطوط النظام الأصلية: تختار تلقائياً أنقى خط واجهة مثبت في نظام المستخدم مثل Segoe UI في ويندوز و San Francisco في أبل و Roboto في أندرويد بسرعة تحميل فورية.
قد يبدو عنوان <h1> بحجم 40px متناسقاً على شاشة الحاسوب، لكنه يزدحم وينكسر في أربعة أسطر ضيقة على شاشة الهاتف الصغير. لذلك يفعّل Bootstrap 5 افتراضياً محرك تحجيم الخطوط المتجاوب RFS؛ حيث تُحسب أحجام العناوين بمعادلة calc() ذكية تجمع بين قيمة أساسية بوحدة rem ونسبة مرنة من عرض الشاشة vw لتتدرج بنعومة تامة حتى تبلغ حجمها الكامل عند عرض 1200px.
<div class="container">
<h1>H1 Fluid RFS Heading</h1>
<h2>H2 Fluid Subheading</h2>
<h3>H3 Section Heading</h3>
<p>Paragraph stays at steady 1rem (16px) base.</p>
</div>تهذّب طبقة Reboot سلوك العناصر القياسية اليومية في HTML لضمان إيقاع رأسي منتظم وخالٍ من المفاجآت:
- توحيد اتجاه الهوامش للأسفل فقط: تزيل الهامش العلوي
margin-topعن العناوين والفقرات والقوائم وتكتفي بالهامش السفلي مثل0.5remللعناوين و1remللفقرات، مما يقضي على مشاكل تداخل الهوامش العمودية. - تنسيق الأكواد والنماذج الخام: تمنح وسوم
<code>و<kbd>مظهراً مقروءاً، وتزيل الإطار القديم المزعج حول<fieldset>، وتضبط محاذاة الصور عمودياً في المنتصف، وتوحّد خط حقول الإدخال ليرث خط الصفحة.
<div class="container">
<h2>Normalized Raw HTML Elements</h2>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd>
to save <code>app.js</code>.</p>
<ul>
<li>Zero margin-top on lists & headings</li>
<li>Nested lists have 0 bottom margin</li>
</ul>
</div>تختتم طبقة Reboot قواعدها بضمانات أصيلة لإمكانية الوصول وحماية المستخدمين:
- احترام تفضيل تقليل الحركة
prefers-reduced-motion: لا يفعّل بوتستراب التمرير السلسscroll-behavior: smoothأو انتقالات الحركة إلا إذا لم يطلب المستخدم تقليل الحركة في إعدادات نظام التشغيل، مراعاةً للمصابين بالحساسية البصرية والدوار. - تحصين السمة القياسية
[hidden]: يفرض القاعدةdisplay: none !importantعلى أي عنصر يحمل السمةhiddenلمنع ظهوره خطأً عند إعطائه خاصية عرض أخرى في التنسيقات.
| المحدد المستهدف | السلوك الخام في المتصفح | قاعدة Reboot في Bootstrap 5.3 | الفائدة الهندسية |
|---|---|---|---|
*, *::before, *::after | box-sizing: content-box | box-sizing: border-box | بقاء الحشو والحدود ضمن العرض المئوي للأعمدة |
body | هامش 8px وخط تقليدي | هامش 0 وحزمة خطوط النظام 1rem / 1.5 | امتداد كامل للصفحة ومقروئية فورية سريعة |
h1 – h6 | أحجام جامدة وهوامش مزدوجة | تحجيم متجاوب RFS وهامش سفلي 0.5rem فقط | تدرج سلس للعناوين على الهاتف ومنع تداخل الهوامش |
p, ul, ol, dl | هوامش علوية وسفلية متباينة | إلغاء الهامش العلوي وتوحيد السفلي بـ 1rem | إيقاع عمودي منتظم بين الكتل النصية |
[hidden] | إخفاء ضعيف الأولوية | display: none !important | ضمان بقاء العناصر المخفية غير مرئية دائماً |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتممت الوحدة التأسيسية الأولى بإتقان طبقة Reboot في Bootstrap 5.3: توحيد المتصفحات بمحددات العناصر، وقاعدة border-box الشاملة، وحزمة خطوط النظام، ومحرك الخطوط المتجاوب RFS، وتوحيد الهوامش السفلية، واحترام تقليل الحركة والإتاحة. الخطوة التالية: انتقل الآن إلى الوحدة الثانية والدرس الخامس «نقاط التوقف المتجاوبة في بوتستراب 5» لإتقان العتبات الست القياسية لعرض الشاشات.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Reboot طبقة التطبيع القياسي Reboot
- الطبقة التأسيسية في بوتستراب المبنية فوق Normalize.css لتوحيد المظهر والسلوك الافتراضي لعناصر HTML الخام عبر المتصفحات دون كلاسات.
- للمراجعة
- 02 Border-Box Sizing حساب الأبعاد الشامل border-box
- قاعدة حساب الأبعاد التي يعممها Reboot بحيث تدخل الهوامش الداخلية والحدود ضمن العرض المحدد للعنصر دون زيادته.
- للمراجعة
- 03 Native Font Stack حزمة خطوط النظام الأصلية
- قائمة مرتبة من خطوط الواجهة المدمجة في أنظمة التشغيل تمنح النصوص وضوحاً عالياً وسرعة رسم فورية دون انتظار تحميل خطوط خارجية.
- للمراجعة
- 04 Single-Direction Margin توحيد اتجاه الهوامش للأسفل
- منهجية Reboot في تصفير الهامش العلوي للعناوين والفقرات والقوائم والاكتفاء بالهامش السفلي لمنع تداخل الهوامش العمودية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RFS RFS
- Responsive Font Sizes
- المحرك المدمج في بوتستراب 5 لتقليص وتمديد أحجام العناوين تلقائياً بتناغم مع عرض الشاشة عبر معادلة calc(rem + vw).
- للمراجعة
- 02 REM REM
- Root Em Unit
- وحدة قياس نسبية ترتبط بحجم خط عنصر الجذر <html> (غالباً 16 بكسل) وتضمن احترام إعدادات التكبير الخاصة بالمستخدم.
- للمراجعة
- 03 UA UA
- User-Agent Stylesheet
- ورقة الأنماط الداخلية المدمجة في كل متصفح والتي تتولى طبقة Reboot توحيد اختلافاتها.
- للمراجعة
- 04 VW VW
- Viewport Width Unit
- وحدة قياس تعادل 1% من عرض نافذة المتصفح، تُدمج مع وحدة rem داخل معادلات العناوين المتجاوبة RFS.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
بدّل بين التبويبات الثلاثة في فاحص Reboot لمقارنة سلوك المتصفح الخام مع التطبيع القياسي وضوابط تقليل الحركة والإتاحة.
-
افتح مثال إثبات border-box في محرر التجريب، وزِد قيمة الحشو الداخلي padding من 14px إلى 24px، وتأكد أن العرض الخارجي يبقى 220px بالضبط.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما قيمة خاصية box-sizing التي تفرضها طبقة Reboot عالمياً على كافة العناصر والعناصر الزائفة؟
يضبط Reboot كافة العناصر على box-sizing: border-box لضمان احتساب الحشو والحدود ضمن العرض المحدد.
أي نوع من محددات CSS تعتمد عليه طبقة Reboot لتطبيع العناصر القياسية دون تدخل يدوي؟
تستهدف طبقة Reboot محددات الوسوم المباشرة فقط (مثل body وh1 وp وul) لتوحيد الأساس قبل إضافة أي كلاس.
تلغي طبقة Reboot الهامش العلوي margin-top عن العناوين والفقرات وتكتفي بالهامش السفلي لضمان تباعد رأسي منتظم.
صواب؛ فتوحيد الهوامش بالاتجاه السفلي فقط يمنع مشاكل تداخل الهوامش العمودية بين العناصر المتتالية.
ما الدور الذي يؤديه محرك RFS المدمج افتراضياً في Bootstrap 5 مع العناوين؟
يقوم محرك RFS بتحجيم العناوين بسلاسة وتلقائية حسب عرض نافذة المتصفح دون الحاجة لكتابة استعلامات وسائط يدوية.
ما الحجم الافتراضي للخط وارتفاع السطر اللذان تطبقهما طبقة Reboot على عنصر <body>؟
تعتمد Reboot حجم خط 1rem (يعادل 16px افتراضياً) وارتفاع سطر 1.5 على عنصر body.
تفعّل طبقة Reboot التمرير السلس scroll-behavior: smooth إجبارياً حتى لو فعّل المستخدم خيار «تقليل الحركة» في نظام التشغيل.
خطأ؛ تحترم طبقة Reboot تفضيلات الإتاحة فلا تفعّل التمرير السلس إلا عند عدم طلب تقليل الحركة.
لماذا تفرض طبقة Reboot القاعدة [hidden] { display: none !important; }؟
لضمان عدم ظهور أي عنصر يحمل السمة القياسية hidden بالخطأ عند تطبيق خاصية display أخرى عليه في CSS.
لماذا يعتمد Bootstrap 5 افتراضياً على حزمة خطوط النظام الأصلية بدلاً من تحميل خط خارجي من الإنترنت؟
لأن خطوط النظام المثبتة مسبقاً تُرسم فوراً بصفر طلبات شبكة إضافية وبمظهر مألوف وواضح على كل نظام تشغيل.