القيمة <length>
نوع البيانات <length> في CSS يستعمل لتمثيل القيم الطولية، فعدد كبير من خاصيات CSS تقبل بقيم ذات النوع <length>، مثل width و margin و padding و font-size و border-width و text-shadow.
تسمح بعض خاصيات CSS باستخدام قيم سالبة، بينما تعدّها غيرها على أنها خطأ في بنية القاعدة. لاحظ أنَّ النسب المئوية <percentage> تُمثِّل قيمًا طوليةً أيضًا، وهي مقبولة من بعض خاصيات CSS التي تقبل القيم الطولية <length>، لكنها في الحقيقة ليست قيمًا من النوع <length>.
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الرئيسي | 1.0 | 1.0 | مدعومة | مدعومة | 1.0 |
| ch | 27 | 1.0 | 9.0 | 20.0 | 7.0 |
| ex و em | مدعومة | مدعومة | مدعومة | مدعومة | مدعومة |
| rem | 4 | 3.6 | 9.0 | 11.6 | 4.1 |
| vh و vw و vmin | 20 | 19 | 9.0 | 20 | 6.0 |
| vmax | 26 | 19 | غير مدعومة | 20 | 6.0 |
| q | غير مدعومة | 49.0 | غير مدعومة | غير مدعومة | غير مدعومة |
الشكل العام
تتألف القيم الطولية من قيمة عددية <number> يتبعها رمز الواحدة (مثل px أو em أو pc أو in أو mm ...إلخ.)، وكما في جميع واحدات CSS، لا يجوز وضع فراغ بين الرمز والقيمة العددية. لاحظ أنَّ تحديد واحدة هو أمرٌ اختياريٌ إن كانت القيمة العددية هي 0 (تنطبق هذه الحالة على العدد 0 فقط).
الواحدات
الواحدات الطولية النسبية
الأطوال النسبية تصف طولًا يكون معتمدًا على طول آخر، مثل أبعاد محرف معيّن في الخط الحالي، أو أبعاد العنصر الأب، أو أبعاد إطار العرض (viewport).
الأطوال التي تُنسَب إلى الخط font
الأطوال التي تُنسَب إلى الخط تصف طولًا معتمدًا على أبعاد محرف معيّن أو خاصية من خاصيات الخط المُطبَّق حاليًا على العنصر (أو العنصر الأب في بعض الحالات الخاصة المشروحة أدناه).
em
تُمثِّل هذه الواحدة قياس الخط font-size المستخدم في العنصر، وإذا استخدمت هذه الواحدة على الخاصية font-size فستُمثِّل قياس الخط المستخدم في العنصر الأب للعنصر الحالي.
تُستخدَم هذه الواحدة عادةً لإنشاء تخطيط صفحة متجانس حتى لو غيّر المستخدم حجم الخط. وعادةً ما يُعبّر عن قيم الخاصيات line-height و font-size و margin بواحدة em.
ex
تمثِّل هذه الواحدة قيمة x-height (أي ارتفاع الحرف x، وسميت بهذا الاسم لأنها تكافئ عادةً ارتفاع الحرف x بحالة الصغيرة، وهي نفس قيمة ارتفاع بقية الأحرف ذات الحالة الصغيرة [lowercase]) في الخط المستخدم في العنصر (وينطبق على هذه الواحدة ما ينطبق على em عند استخدامها في خاصية font-size)، وهذه الواحدة تكافئ 1ex ≈ 0.5em في الكثير من الخطوط.
ch
تمثِّل هذه الواحدة عرض المحرف 0 (أي الرقم صفر) في الخط المستخدم.
rem
تمثِّل هذه الواحدة قيمة font-size للعنصر الجذر في الصفحة (أي خاصية font-size للعنصر <html>، ومن هنا أتى اسم الواحدة root em)، وعند استخدام هذه الواحدة مع خاصية font-size للعنصر الجذر فستُمثِّل القيمة الافتراضية في المتصفح (وتكون مساويةً إلى 16px في أغلبية المتصفحات، لكن يمكن أن يغيّرها المستخدم).
الأطوال التي تُنسَب إلى إطار العرض viewport
الأطوال التي تُنسَب إلى إطار العرض تصف طولًا معتمدًا على أبعاد إطار العرض، وهو الجزء الظاهر من المستند.
ملاحظة: إذا ضُبِطَت القاعدة overflow: auto في عنصرَي <html> و <body>، فلن تُطرَح المساحة التي تحجزها أشرطة التمرير من إطار العرض، لكنها ستُطرَح منها إذا ضُبِطَت القاعدة overflow: scroll.
vh
تمثِّل هذه الواحدة 1% من ارتفاع إطار العرض (viewport height).
vw
تمثِّل هذه الواحدة 1% من عرض إطار العرض (viewport width).
vmin
تمثِّل هذه الواحدة القيمة الأصغر من vw أو vh.
vmax
تمثِّل هذه الواحدة القيمة الأكبر من vw أو vh.
الواحدات الطولية المطلقة
تُمثِّل الأطوال المطلقة (absolute length) طولًا فيزيائيًا عندما تكون الخصائص الفيزيائية لجهاز الإخراج معروفة.
للأجهزة التي لها كثافة نقطية قليلة (low-dpi)، ستُمثِّل الواحدة px بكسلًا فيزيائيًا، وستُعرَّف بقية الواحدات نسبةً لها. وبالتالي تكون الواحدة 1in (أي بوصة واحدة) تساوي 96 بكسلًا مما يساوي 72 نقطة؛ لاحظ أنَّ هذا التعريف يعني أنَّ الأطوال المُقاسة بالبوصة (in) أو السنتيمتر (cm) أو المليمتر (mm) قد لا تُطابِق الطول الفيزيائي نفسه على جهاز العرض.
أما في الأجهزة التي لها كثافة نقطية عالية (high-dpi)، فستكون الواحدات الفيزيائية مثل البوصة (in) والسنتيمتر (cm) والمليمتر (mm) مطابقة للطول الفيزيائي على جهاز العرض، وبالتالي ستكون واحدة البكسل px منسوبةً لها (وهي تساوي 1/96 من البوصة).
ملاحظة: قد يزيد المستخدمون من قياس الخط لتسهيل قابلية الوصول، وللسماح لتخطيط الصفحة أن يكون متناسقًا مع بعضه بغض النظر عن حجم الخط، فينصح باستخدام الأطوال المطلقة عندما تكون الخصائص الفيزيائية لجهاز العرض معروفةً، لكن عند ضبط قياس الخط (عبر الخاصية font-size) فمن الأفضل استخدام واحدات نسبية مثل em أو rem.
px
هذه الواحدة تكون نسبةً إلى جهاز العرض. إذ تُمثِّل عادةً نقطةً واحدةً في الشاشات العادية؛ أما في الطابعات والشاشات عالية الدقة، فالبكسل الواحد في CSS قد يُمثِّل عدّة بكسلات فيزيائية على جهاز العرض، حتى يكون عدد البكسلات في البوصة الواحدة مساويًا إلى 96 بكسلًا تقريبًا.
mm
مليمتر واحد.
q
ربع المليمتر، أي 1/40 من السنتيمتر cm.
cm
سنتميتر واحد، أي 10 مليمتر mm.
in
بوصة (inch) واحدة، أي 2.54 سنتميتر cm.
pt
نقطة (point) واحدة، أي 1/72 من البوصة in.
pc
بيكا (pica) واحدة، أي 12 نقطة pt.
واحدات CSS وكثافة الشاشة
لاحظ أنَّ البوصة in لا تُمثِّل بوصةً حقيقيةً على الشاشة، وإنما تُمثِّل 96px، وهذا يعني أنَّه مهما كانت كثافة الشاشة الحقيقة، فستُعدّ في CSS على أنها 96dpi. ففي الأجهزة ذات الكثافة العالية ستكون البوصة الواحدة أقل من البوصة الحقيقية، وكذلك الأمر بخصوص المليمتر mm والسنتمتر cm والنقطة pt، فهي ليست واحدات مطلقة حقيقية.
بعض الأمور التي عليك أن تضعها ببالك دومًا:
1inتساوي96pxدومًا.3ptتساوي4pxدومًا.25.4mmتساوي96pxدومًا.
انظر أيضًا
- صفحة الخاصية
box-sizingالتي تُستخدم لتعديل النموذج الصندوقي الافتراضي. - صفحة الخاصية
heightالتي تُحدِّد ارتفاع العناصر. - صفحة الخاصية
widthالتي تُحدِّد عرض العناصر. - صفحة الخاصية
paddingالتي تضبط الحاشية (padding) في الأطراف الأربعة للعنصر. - صفحة الخاصية
marginالتي تضبط الهوامش في الأطراف الأربعة للعنصر.