بودكاست CSS - 008: وحدات القياس
الويب هو وسيط سريع الاستجابة، لكن في بعض الأحيان تريد التحكم في أبعاده لتحسين الجودة الإجمالية للواجهة. وخير مثال على ذلك هو الحد من أطوال الأسطر لتحسين إمكانية القراءة. وكيف يمكنك تحقيق ذلك باستخدام وسيط مرن مثل الويب؟
في هذه الحالة،
يمكنك استخدام وحدة ch التي تساوي عرض الحرف "0"
في الخط المعروض بحجمه المحتسب.
تسمح لك هذه الوحدة بالحدّ من عرض النص باستخدام وحدة مصمّمة لحجم النص،
والتي بدورها
تتيح التحكّم في النص بشكلٍ يمكن توقُّعه بغض النظر عن حجم ذلك النص.
الوحدة ch هي واحدة من عدد من الوحدات المفيدة لسياقات معيّنة مثل هذا المثال.
الأرقام
وتُستخدَم الأرقام لتحديد 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.
وهذا يعني أنّه إذا كانت قيمة font-size للسمة p هي 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 لا يتم استخدامه للمحتوى الرقمي فحسب، ولكن أيضًا لتنسيق المحتوى المطبوع.
يمكن أن تكون الأطوال المطلقة مفيدة حقًا عند التصميم للطباعة.
| الوحدة | الاسم | تعادل |
|---|---|---|
| سم | سنتيمتر | 1 سم = 96 بكسل/2.54 |
| مم | ملليمتر | 1 ملم = 1/10 من 1 سم |
| س | ربع مليمتر | 1Q = 1/40 من 1 سم |
| بوصة | بوصة | 1 بوصة = 2.54 سم = 96 بكسل |
| pc | بيكاس | 1PC = 1/6 من 1 بوصة |
| نقطة | النقاط | 1pt = 1/72 من 1 بوصة |
| بكسل | وحدات بكسل | 1 بكسل = 1/96 من 1 بوصة |
الأطوال النسبية
يتم احتساب الطول النسبي مقابل قيمة أساسية، وهي تشبه إلى حدٍ كبير النسبة المئوية.
ويتمثل الفرق بين هذه النسب والنسب المئوية في أنه يمكنك تحديد حجم العناصر من حيث السياق.
يعني ذلك أنّ CSS تحتوي على وحدات مثل ch تستخدم حجم النص كأساس، وvw التي تستند إلى عرض إطار العرض (نافذة المتصفح).
تعد الأطوال النسبية مفيدة بشكل خاص على الويب نظرًا لطبيعة سرعة الاستجابة.
الوحدات النسبية لحجم الخط
توفر CSS وحدات مفيدة ذات صلة بحجم عناصر أسلوب الخط المعروضة،
مثل حجم النص نفسه (em وحدة) أو عرض أحرف الخطوط الطباعية (ch وحدة).
| الوحدة | مقارنةً بـ: |
|---|---|
| em | بالنسبة إلى حجم الخط، بمعنى آخر، سيكون حجم 1.5 em أكبر بنسبة 50% من حجم الخط الأساسي الذي تم احتسابه للخط الرئيسي. (تاريخيًا، كان ارتفاع الحرف الكبير "M"). |
| مثال: | إرشادي لتحديد ما إذا كان يجب استخدام قيمة الارتفاع x أو الحرف "x" أو " .5em" في حجم الخط المَحسوب الحالي للعنصر. |
| كاب | ارتفاع الأحرف الكبيرة في حجم الخط المَحسوب الحالي للعنصر. |
| ch | متوسط التقدم بالحرف في حرف رسومي ضيق في خط العنصر (يمثّله الحرف الرسومي "0"). |
| ic | متوسط التقدم بالحرف لحرف رسومي كامل العرض في خط العنصر، كما يتم تمثيله بالحرف الرسومي "水" (الحرف الرسومي للماء CJK، U+6C34). |
| ريم | حجم خط العنصر الجذر (القيمة التلقائية هي 16 بكسل). |
| lh | ارتفاع سطر العنصر. |
| rlh | ارتفاع سطر العنصر الجذر |
الوحدات النسبية لإطار العرض
يمكنك استخدام أبعاد إطار العرض (نافذة المتصفح) كأساس نسبي. تشكل هذه الوحدات مساحة إطار العرض المتاحة.
| الوحدة | مقارنةً بـ |
|---|---|
| vw | 1% من عرض إطار العرض. يستخدم المستخدمون هذه الوحدة لإجراء تعديلات رائعة للخط، مثل تغيير حجم خط العنوان بناءً على عرض الصفحة، وبالتالي عندما يغيّر المستخدم حجم الخط، سيتم أيضًا تغيير حجم الخط. |
| vh | 1% من ارتفاع إطار العرض. ويمكنك استخدامها لترتيب العناصر في واجهة المستخدم، إذا كان لديك شريط أدوات تذييل على سبيل المثال. |
| vi | 1% من حجم إطار العرض في المحور المضمّن للعنصر الجذر. يشير المحور إلى أوضاع الكتابة. في أوضاع الكتابة الأفقية، مثل اللغة الإنجليزية، يكون المحور المضمّن أفقيًا. في أوضاع الكتابة العمودية مثل بعض الخطوط الطباعية اليابانية، يعمل المحور المضمّن من أعلى إلى أسفل. |
| vb | 1% من حجم إطار العرض في محور الحظر للعنصر الجذر بالنسبة لمحور الكتلة، سيكون هذا هو اتجاه اللغة. قد يكون للّغات ذات اليسار الارتباطي، مثل الإنجليزية، محور كتلة عمودي، لأنّ برامج قراءة اللغة الإنجليزية تحلّل الصفحة من أعلى إلى أسفل. يحتوي وضع الكتابة العمودي على محور كتلة أفقي. |
| الجهاز الافتراضي | 1% من البُعد الأصغر لإطار العرض. |
| وحدة vmax | 1% من البُعد الأكبر لإطار العرض. |
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 في استعلام عن الوسائط وعرض صورة عالية الدقة.
التحقّق من استيعابك
اختبر معلوماتك حول المقاسات
أي من السمات التالية صالحة؟
كيف تختلف الوحدات المطلقة عن الوحدات النسبية؟
تعتبر وحدات إطار العرض مطلقة.