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

بودكاست CSS - 008: وحدات القياس

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

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

Numbers

تُستخدَم الأرقام لتحديد opacity وline-height وحتى لقيم قنوات الألوان في rgb. الأعداد عبارة عن أعداد صحيحة بلا وحدة (1، 2، 3، 100) والكسور العشرية (.1، .2، .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 في استعلام عن الوسائط وتعرض صورة بدقة أعلى.

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

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

الموارد

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