في هذا الدرس 8تصفّح المواضيع
كل قياس رقمي في لغة CSS — سواء لضبط حجم الخط بـ font-size أو لضبط عرض العنصر width وارتفاعه height — يتكون من رقم متبوع بوحدة قياس ملتصقة به مباشرةً من دون أي مسافة فاصلة مثل 24px أو 50% (ولا يجوز حذف الوحدة إلا مع الرقم 0). ويحدد نوع الوحدة ما إذا كان تصميمك جامداً أم مرناً يتكيف بسلاسة مع الهواتف والشاشات العريضة:
- الوحدات المطلقة (
pxوcmوmmوinوpt): قياسات ثابتة لا تتغير بتغير أبعاد العنصر الأب أو إعدادات تكبير الخط الافتراضي في متصفح الزائر. - الوحدات النسبية (
remوemوchو%وvwوvhوsvhوdvh): قياسات ذكية تُحسب ديناميكياً نسبةً إلى مرجع آخر كحجم خط الجذر<html>أو أبعاد الحاوية الأم أو نافذة العرض.
ولكي ترى أثر العرض والارتفاع بوضوح بصري في أمثلة هذا الدرس، سنميز صناديق التجريب بلون خلفية مسمى عبر خاصية background-color.
تُعد وحدة البكسل px أشهر الوحدات المطلقة على الشاشات، لكن 1px في CSS ليس مجرد نقطة ضوئية صلبة واحدة في الشاشة! فالهواتف الحديثة تضم كثافة نقاط عالية جداً، ولو تعامل المتصفح مع البكسل المادي الخام لظهر خط بحجم 16px مجهرياً لا يُقرأ على الهاتف. لذلك تعتمد المتصفحات مفهوم البكسل المرجعي (Reference Pixel) الذي يوحّد الحجم البصري المدرك عبر مختلف الشاشات.
وتوفر اللغة كذلك وحدات فيزيائية مخصصة للورق والطباعة: البوصة in (وتعادل قياسياً 96px)، والسنتيمتر cm، والمليمتر mm، والنقطة المطبعية pt (حيث 1in = 72pt). ويُقصر استخدام هذه الوحدات الورقية على قوالب الطباعة والفواتير والشهادات لا واجهات الشاشات المتجاوبة.
تمنح وحدتا rem و em مرونة رائعة للنصوص، لكن فهم الفرق بينهما يحميك من مفاجآت تضخم الخط داخل العناصر المتداخلة:
- وحدة الجذر
rem: ترتبط دائماً بحجم خط عنصر الجذر الأساسي للصفحة<html>(وهو افتراضياً16pxفي المتصفحات). لذا فإن1remتعادل16pxو1.5remتعادل24pxبثبات تام مهما تداخلت الحاويات، كما أنها تحترم تلقائياً تكبير الخط المفضل في إعدادات متصفح الزائر! - وحدة العنصر
em: عند استخدامها فيfont-sizeفإنها تضرب حجم خط الأب المباشر. فإذا وضعت حاوية بحجم1.5emداخل حاوية أخرى بحجم1.5em، يتضاعف الرقم تراكمياً من16pxإلى24pxثم يقفز في الابن الداخلي إلى36px!
<style>
html { font-size: 16px; }
.rem-box { font-size: 1.5rem; color: navy; }
.em-box { font-size: 1.5em; color: crimson; }
</style>
<div class="rem-box">Outer 1.5rem (24px)
<div class="rem-box">Inner 1.5rem stays 24px!</div>
</div>
<div class="em-box">Outer 1.5em (24px)
<div class="em-box">Inner 1.5em jumps to 36px!</div>
</div>هل حاولت يوماً قراءة مقال تمتد سطوره من أقصى يمين شاشة عريضة إلى أقصى يسارها؟ السطور المفرطة الطول ترهق العين عند العودة لبداية السطر التالي وتُضعف التركيز القرائي.
تقدم لغة CSS وحدة المحرف ch التي تعادل عرض الرقم 0 في الخط المستخدم؛ وبضبط عرض الفقرة width بين 45ch و 65ch تحصل على عمود قراءة مريح يشبه صفحات الكتب المطبوعة في العربية والإنجليزية معاً، ويتسع تلقائياً كلما كبر حجم الخط.
تقيس النسبة المئوية % قيمتها دائماً بالارتباط المباشر مع الحاوية الأم المباشرة التي تحتضن العنصر:
- عرض الصندوق المرن: كتابة
width: 50%;لعنصر ابن داخل حاوية عرضها360pxتمنحه عرضاً محسوباً قدره180px، ويتمدد تلقائياً كلما اتسعت الحاوية الأم. - شرط عمل نسبة الارتفاع: كتابة
height: 50%;على الابن لا تُنتج ارتفاعاً فعلياً إلا إذا كان للأب نفسه ارتفاع صريح محدد مثلheight: 80px;؛ أما إذا تُرك ارتفاع الأب تلقائياً فلن يجد المتصفح رقماً ثابتاً ليحسب نصفه! - نسبة حجم الخط: كتابة
font-size: 125%;تضرب حجم خط الأب تماماً كما تفعل1.25em.
<style>
.reading-note { width: 48ch; background-color: whitesmoke; }
.track-box { width: 360px; height: 40px; background-color: lavender; }
.half-fill { width: 50%; height: 100%; background-color: teal; color: white; }
</style>
<p class="reading-note">Comfortable 48ch reading line width for long lesson notes.</p>
<div class="track-box"><div class="half-fill">50% (180px)</div></div>بخلاف النسبة المئوية المرتبطة بالأب المباشر، تقيس وحدات نافذة العرض (Viewport Units) أبعادها مباشرةً من المساحة المرئية لنافذة المتصفح مقسمةً إلى 100 جزء متساوٍ:
- عرض النافذة
vw: تعادل1vwنسبة1%من عرض نافذة المتصفح؛ فالقيمة50vwتمنح العنصر نصف عرض الشاشة دائماً. - ارتفاع النافذة
vh: تعادل1vhنسبة1%من ارتفاع نافذة المتصفح المرئية. - الأصغر والأكبر
vminوvmax: تقيسvminنسبةً إلى الضلع الأصغر للنافذة (العرض في الهاتف العمودي أو الارتفاع في الشاشة الأفقية)، بينما تقيسvmaxنسبةً إلى الضلع الأكبر.
في متصفحات الهواتف الذكية، يظهر شريط العنوان العلوي عند فتح الصفحة ثم يتقلص تلقائياً أثناء التمرير لأسفل. وبما أن الوحدة الكلاسيكية 100vh تفترض دائماً أن أشرطة المتصفح مخفية، فإن أسفل القسم المصمم بارتفاع 100vh يختفي مقصوصاً خلف شريط الهاتف فور فتح الصفحة!
عالجت مواصفة CSS الحديثة هذه المشكلة بوحدتين قياسيتين مدعومتين في جميع المتصفحات الحديثة:
- الارتفاع الآمن الأصغر
svh: تمثل100svhالمساحة المرئية الصافية أثناء ظهور أشرطة الهاتف كاملةً، مما يضمن عدم اختفاء أي عنصر سفلي وعدم حدوث قفزات بصرية أثناء التمرير. - الارتفاع الديناميكي الحي
dvh: تتحدث قيمة100dvhلحظياً لتطابق الارتفاع المرئي الفعلي مع اختفاء شريط العنوان أو عودته.
.hero-panel {
width: 90vw;
height: 55svh;
background-color: midnightblue;
color: white;
font-size: 1.5rem;
}لاختيار الوحدة الأنسب دون حيرة في مشاريعك العملية، اعتمد هذا الدليل الهندسي المختصر وتأكد دائماً من الناتج النهائي داخل المتصفح:
| الهدف التنسيقي | الوحدة الموصى بها | السبب الهندسي والعملي |
|---|---|---|
| أحجام خطوط العناوين والفقرات | rem | تحترم إعدادات خط المستخدم وتتجنب تراكم التداخل |
| عرض أسطر المقالات القرائية | ch (45ch–65ch) | تحفظ طول سطر مريح للعين في العربية والإنجليزية |
| عرض الصناديق المرنة داخل أب | % | تتناسب طردياً مع عرض الحاوية الأم المباشرة |
| أغلفة الشاشة الكاملة بالجوال | svh أو dvh | تمنع اقتصاص المحتوى خلف شريط عنوان الهاتف |
| القياسات الثابتة الدقيقة | px | ضبط مرجعي دقيق مستقل عن أبعاد الأب |
| مخرجات الطباعة الورقية | cm و mm و pt | تطابق مقاييس الورق الفيزيائية القياسية |
ومهما كانت الوحدة النسبية التي كتبتها في الكود، افتح تبويب Computed في أدوات المطور لترى كيف حوّل المتصفح كل rem أو % أو vw إلى قيمتها النهائية المحسوبة بدقة بوحدة px!
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
اختتمت بهذا الدرس فصل بنية اللغة بإتقان الوحدات المطلقة (px ووحدات الطباعة)، والفرق الجوهري بين ثبات rem وتراكم em، وضبط السطر القرائي بـ ch، وحساب % من الأب، ووحدات العرض الحديثة للجوال svh و dvh. وفي الخطوة التالية ستبدأ فصل تنسيق النصوص مع درس ألوان النصوص في لغة CSS.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS Reference Pixel (px) البكسل المرجعي في CSS
- وحدة قياس بصرية مستقلة عن كثافة العتاد تعادل 1/96 من البوصة لضمان ثبات الحجم المدرك عبر الشاشات العادية وعالية الكثافة.
- للمراجعة
- 02 Root EM (rem) وحدة خط الجذر rem
- وحدة نسبية تُحسب دائماً كمضاعف لحجم خط عنصر الجذر html (وهو 16px افتراضياً) دون أن تتضاعف بتداخل الحاويات.
- للمراجعة
- 03 Character Unit (ch) وحدة عرض المحرف ch
- وحدة نسبية تعادل عرض الرقم 0 في الخط الحالي وتُستخدم لضبط عرض سطور القراءة المريحة بين 45ch و 65ch.
- للمراجعة
- 04 Small Viewport Height (svh) وحدة الارتفاع الآمن للجوال svh
- وحدة عرض حديثة تمثل فيها 100svh المساحة المرئية الصافية للشاشة أثناء ظهور أشرطة متصفح الهاتف لمنع اقتصاص المحتوى.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 REM REM
- Root Element EM
- وحدة طول نسبية ترتبط حصرياً بحجم الخط المحسوب لعنصر الجذر الأساسي في المستند.
- للمراجعة
- 02 DPR DPR
- Device Pixel Ratio
- النسبة بين عدد البكسلات المادية الفعلية في الشاشة وبين البكسل المرجعي الواحد في لغة CSS.
- للمراجعة
- 03 SVH SVH
- Small Viewport Height
- وحدة نسبة مئوية لارتفاع نافذة العرض تُقاس عند الحالة الصغرى الآمنة لظهور أشرطة أدوات الجوال.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال مقارنة rem و em في محرر التجريب وأضف حاوية ثالثة متداخلة بصنف em-box لمشاهدة قفز الخط إلى 54px مقارنةً بثبات الصنف rem-box عند 24px.
-
افتح مثال النسبة المئوية في محرر التجريب وغيّر عرض الشريط الداخلي من 50% إلى 75% لملاحظة تمدده التلقائي نسبةً إلى عرض الأب البالغ 360px.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.