40 -وحدات CSS

وحدات قياس الطول في CSS

تستخدم لغة CSS وحدات مختلفة للتعبير عن قيم الطول.

تحتاج العديد من خصائص CSS إلى قيم “طول”، مثل عرض العناصر (width)، والحواف (margin)، والتبطين (padding)، وحجم الخط (font-size)، وغيرها.

يتكون طول ما من رقم يليه وحدة قياس، على سبيل المثال: 10px أو 2em.

مثال

ضبط قيم طول مختلفة باستخدام وحدات البكسل (px):

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

ملاحظات على وحدات قياس الطول في CSS:

• لا يمكن وجود مسافة بين الرقم ووحدة القياس: يجب كتابة الرقم ووحدة القياس متلاصقين بدون أي فواصل.
• استثناء قيمة الصفر: في حالة القيمة صفر، يُمكن حذف وحدة القياس. على سبيل المثال، margin: 0; تعادل margin: 0px;.
• القيم السالبة: تسمح بعض خصائص CSS باستخدام قيم طول سالبة. على سبيل المثال، margin-top: -10px; لإنشاء هامش علوي سالب (بمعنى إزاحة العنصر للأعلى 10 بكسل).
• نوعان من وحدات الطول: هناك نوعان رئيسيان من وحدات قياس الطول في CSS: مطلقة (absolute) ونسبيّة (relative).

وحدات الطول المطلقة (Absolute Lengths)

وحدات الطول المطلقة ثابتة، وسيظهر أي طول معبر عنه بأي من هذه الوحدات بحجم ثابت تمامًا.

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

*لاحظة على البكسل (px): تعتمد قيمة البكسل على جهاز العرض. بالنسبة للأجهزة منخفضة الدقة (dpi)، يعتبر 1 بكسل بكسل واحد (نقطة) على الشاشة. أما بالنسبة للطابعات والشاشات عالية الدقة، فإن 1 بكسل تعادل عدة بكسلات من الجهاز.

وحدات الطول النسبية (Relative Lengths)

تحدد وحدات الطول النسبية الطول نسبة إلى خاصية طول أخرى. تتكيف وحدات الطول النسبية بشكل أفضل على وسائط العرض المختلفة.

*ملاحظة حول وحدات em و rem: تعتبر وحدتا em و rem وحدتين عمليتين لإنشاء تخطيط قابل للتطوير بشكل مثالي!

*منطقة العرض (viewport) هي مساحة نافذة المتصفح. إذا كان عرض منطقة العرض 50 سم، فإن 1vw = 0.5 سم.

دعم المتصفحات لوحدات الطول (Browser Support)

الأرقام في الجدول تحدد إصدار المتصفح الأول الذي يدعم وحدة الطول بشكل كامل.