وحدات المقاسات

The CSS Podcast - 008: Sizing Units

الويب هو وسيلة سريعة الاستجابة، لكنك قد تحتاج أحيانًا إلى التحكم في أبعاده لتحسين جودة الواجهة بشكل عام. ومن الأمثلة الجيدة على ذلك الحد من طول السطور لتحسين إمكانية القراءة. كيف يمكنك إجراء ذلك في وسيط مرن مثل الويب؟

في هذه الحالة، يمكنك استخدام وحدة ch، وهي تساوي عرض الحرف "0" في الخط المعروض بالحجم المحسوب. تتيح لك هذه الوحدة الحد من عرض النص باستخدام وحدة مصمّمة لتحديد حجم النص، ما يتيح بدوره التحكّم بشكل متوقّع بغض النظر عن حجم هذا النص. وحدة ch هي إحدى الوحدات القليلة المفيدة في سياقات محددة مثل هذا المثال.

Numbers

تُستخدَم الأرقام لتحديد opacity وline-height وحتى لقيم قنوات الألوان في rgb. الأرقام هي أعداد صحيحة بدون وحدات (1 و2 و3 و100) وأرقام عشرية (0.1 و0.2 و0.3).

للأرقام معانٍ حسب سياقها. على سبيل المثال، عند تحديد line-height، يمثّل الرقم نسبة إذا حدّدته بدون وحدة داعمة:

p {
  font-size: 24px;
  line-height: 1.5;
}

في هذا المثال، تساوي القيمة 1.5 %150 من حجم الخط المحسوب بالبكسل للعنصر p. وهذا يعني أنّه إذا كان p يحتوي على font-size‏ = 24px، سيتم احتساب ارتفاع السطر على أنّه 36px.

يمكن أيضًا استخدام الأرقام في المواضع التالية:

• عند ضبط قيم الفلاتر: يطبِّق filter: sepia(0.5) فلتر البني الداكن 50% على العنصر.
• عند ضبط التعتيم: يطبِّق opacity: 0.5 التعتيم 50%.
• في قنوات الألوان: rgb(50, 50, 50)، حيث تكون القيم 0-255 مقبولة لضبط قيمة اللون. الاطّلاع على درس الألوان
• لتحويل عنصر: transform: scale(1.2) يكبِّر العنصر بنسبة %120 من حجمه الأولي.

نِسب مئوية

عند استخدام نسبة مئوية في CSS، عليك معرفة كيفية احتسابها. على سبيل المثال، يتم احتسابwidth كنسبة مئوية من العرض المتاح في العنصر الرئيسي.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

في المثال أعلاه، يبلغ عرض div p 150px، بافتراض أنّ التنسيق يستخدم box-sizing: content-box التلقائي.

إذا ضبطت margin أو padding كنسبة مئوية، سيكونان جزءًا من عرض العنصر الرئيسي، بغض النظر عن الاتجاه.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

في المقتطف أعلاه، سيتم احتساب كل من margin-top وpadding-left على أنّهما 150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

إذا ضبطت قيمة transform كنسبة مئوية، ستستند إلى العنصر الذي تم ضبط التحويل عليه. في هذا المثال، قيمة السمة p هي translateX بقيمة 10% وقيمة width بقيمة 50%. أولاً، احسب العرض: 150px لأنّه ‎50% من عرض العنصر الرئيسي. بعد ذلك، اطرح 10% من 150px، أي 15px.

الأبعاد والأطوال

في حال إرفاق وحدة برقم، تصبح سمة. على سبيل المثال، 1rem هي سمة. في هذا السياق، يُشار إلى الوحدة المرتبطة برقم في المواصفات كرمز مميّز للبُعد. الأطوال هي سمات تشير إلى المسافة ويمكن أن تكون مطلقة أو نسبية.

الأطوال المطلقة

يتم تحليل جميع الأطوال المطلقة بالاستناد إلى القاعدة نفسها، ما يجعلها متوقّعة أينما تم استخدامها في CSS. على سبيل المثال، إذا كنت تستخدِم cm لتحديد حجم العنصر ثم الطباعة، من المفترض أن تكون النتيجة دقيقة إذا قارنت العنصر بمسطرة.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

في حال طباعة هذه الصفحة، ستتم طباعة div كمستطيل أسود مقاس 10×5 سم. يُرجى العِلم أنّه لا يتم استخدام CSS للمحتوى الرقمي فقط، بل أيضًا لتنسيق المحتوى المخصّص للطباعة. يمكن أن تكون الأطوال المطلقة مفيدة حقًا عند التصميم للطباعة.

الأطوال النسبية

يتم حساب الطول النسبي مقابل قيمة أساسية، تمامًا مثل النسبة المئوية. الفرق بين هذه القيم والنسب المئوية هو أنّه يمكنك تحديد حجم العناصر حسب السياق. وهذا يعني أنّ CSS تتضمّن وحدات مثل ch التي تستخدِم حجم النص كأساس، وvw التي تستند إلى عرض مساحة العرض (نافذة المتصفّح). تكون الأطوال النسبية مفيدة بشكل خاص على الويب بسبب طبيعتها سريعة الاستجابة.

الوحدات النسبية لحجم الخط

يوفّر CSS وحدات مفيدة تكون نسبية لحجم عناصر الطباعة المعروضة، مثل حجم النص نفسه (وحدات em) أو عرض أحرف الخطوط (وحدات ch).

الوحدات ذات الصلة بإطار العرض

يمكنك استخدام سمات إطار العرض (نافذة المتصفّح) كأساس نسبي. وتقسّم هذه الوحدات مساحة إطار العرض المتاحة.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

في هذا المثال، سيكون div ‏10% من عرض إطار العرض لأنّ 1vw ‏1% من عرض إطار العرض. يحتوي العنصر p على max-width بقيمة 60ch، ما يعني أنّه لا يمكن أن يتجاوز عرض 60 حرفًا "0" في الخط والحجم المحسوبَين.

الوحدات المتنوعة

هناك بعض الوحدات الأخرى التي تم تحديدها للتعامل مع أنواع معيّنة من القيم.

وحدات الزوايا

في وحدة الألوان، نطّلِع على وحدات الزاوية، التي تكون مفيدة لتحديد قيم الدرجات، مثل درجة اللون في hsl. وهي مفيدة أيضًا لتدوير العناصر ضمن دوال التحويل.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

باستخدام وحدة الزاوية deg، يمكنك تدوير div بزاوية 90 درجة على محورها المركزي.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

وحدات الدقة

في المثال السابق، قيمة min-resolution هي 192dpi. تشير الوحدة dpi إلى نقاط لكل بوصة. ومن السياقات المفيدة لهذا الإجراء رصد الشاشات العالية الدقة للغاية، مثل شاشات Retina في طلب الوسائط وعرض صورة بدرجة دقة أعلى.

التحقق من فهمك

اختبر معلوماتك حول المقاسات

الموارد

• المستوى 4 من قيم ومواصفات CSS
• الحجم والوحدات في رقم دليل الجوّال
• لمحة عن خدمة Ems
• شرح النسب المئوية