الفرق بين المراجعتين لصفحة: «CSS/length»

المراجعة الحالية بتاريخ 07:14، 3 أغسطس 2019

نوع البيانات <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 التي تضبط الهوامش في الأطراف الأربعة للعنصر.

مصادر ومواصفات

مواصفة CSS Values and Units Module Level 3. إضافة الواحدات ch و rem و vw و vh و vmin و vmax و q.
مواصفة ‎CSS Level 2 (Revision 1)‎، تعريف واضح لواحدات pt و pc و px.
مواصفة CSS Level 1، التعريف الضمني للواحدات pt و pc و px.

@@ سطر 101: / سطر 101: @@
 تمثِّل هذه الواحدة القيمة الأصغر من <code>vw</code> أو <code>vh</code>.
-===== <code>vh</code> =====
+===== <code>vmax</code> =====
 تمثِّل هذه الواحدة القيمة الأكبر من <code>vw</code> أو <code>vh</code>.
@@ سطر 141: / سطر 141: @@
 * <code>3pt</code> تساوي <code>4px</code> دومًا.
 * <code>25.4mm</code> تساوي <code>96px</code> دومًا.
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> التي تُستخدم لتعديل النموذج الصندوقي الافتراضي.
+* صفحة الخاصية <code>[[CSS/height|height]]</code> التي تُحدِّد ارتفاع العناصر.
+* صفحة الخاصية <code>[[CSS/width|width]]</code> التي تُحدِّد عرض العناصر.
+* صفحة الخاصية <code>[[CSS/padding|padding]]</code> التي تضبط الحاشية (padding) في الأطراف الأربعة للعنصر.
+* صفحة الخاصية <code>[[CSS/margin|margin]]</code> التي تضبط الهوامش في الأطراف الأربعة للعنصر.
 == مصادر ومواصفات ==
@@ سطر 146: / سطر 153: @@
 * مواصفة ‎[http://www.w3.org/TR/CSS2/syndata.html#length-units CSS Level 2 (Revision 1)‎]، تعريف واضح لواحدات <code>[[#pt|pt]]</code> و <code>[[#pc|pc]]</code> و <code>[[#px|px]]</code>.
 * مواصفة [http://www.w3.org/TR/CSS1/#length-units CSS Level 1]، التعريف الضمني للواحدات <code>[[#pt|pt]]</code> و <code>[[#pc|pc]]</code> و <code>[[#px|px]]</code>.
-[[تصنيف:CSS]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Data Type]]
+[[تصنيف:CSS Data Type|{{SUBPAGENAME}}]]