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

bookmark_border تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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 لتحديد حجم العنصر ثم الطباعة، من المفترض أن تكون النتيجة دقيقة إذا قارنتها بمسطرة. يُرجى العِلم أنّ الوحدات المادية، مثل cm وin، لن يتم عرضها بشكل موثوق بهذه الأحجام على الشاشات بسبب اختلافات في أحجام البكسل. من الأفضل استخدام الوحدات المادية في أوراق أنماط الطباعة حيث تكون أكثر موثوقية.

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
• الحجم والوحدات في معرّف MDN
• لمحة عن خدمة Ems
• شرح النسب المئوية