شرح العنصر (meter) في لغة HTML

دليل شامل لعنصر <meter> في HTML

HTML

دليل عملي يحتوي على كل ما تحتاج معرفته عن عنصر القياس في HTML5

ما هو عنصر <meter>

عنصر <meter> هو عنصر تم إضافته في مواصفات HTML5 لتمثيل قيمة قياسية ضمن نطاق معروف. يعرض هذا العنصر قيمة رقمية بشكل مرئي (عادة كشريط تقدم) مما يساعد المستخدمين على فهم البيانات الكمية بسرعة.

مثال أساسي:

<meter value="0.75">75%</meter>

75%

السمات الكاملة

value (مطلوبة)

القيمة الحالية للقياس

min

الحد الأدنى للقياس (القيمة الافتراضية: 0)

max

الحد الأقصى للقياس (القيمة الافتراضية: 1)

low

الحد الأدنى للقيمة التي تعتبر منخفضة

high

الحد الأعلى للقيمة التي تعتبر مرتفعة

optimum

القيمة المثالية أو المفضلة

أمثلة تطبيقية

عرض مستوى التخزين

<meter value="85" min="0" max="100" low="30" high="80">85%</meter>

85%

نظام التقييم

<meter value="4" min="1" max="5">4 نجوم</meter>

4 نجوم

التنسيق باستخدام CSS

يمكنك تخصيص مظهر عنصر <meter> باستخدام CSS:

meter {
  width: 300px;
  height: 25px;
  margin: 10px 0;
}

/* تنسيق الخلفية */
meter::-webkit-meter-bar {
  background: #f0f0f0;
  border-radius: 5px;
}

/* تنسيق الجزء الممتلئ */
meter::-webkit-meter-optimum-value {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  border-radius: 5px;
}

إمكانية الوصول

لضمان إمكانية الوصول:

• أضف نصاً وصفياً داخل العنصر
• استخدم العنصر <label> المرتبط
• تأكد من وجود تباين كافٍ في الألوان

<label for="disk_usage">استخدام القرص:</label>
<meter id="disk_usage" value="65" min="0" max="100">65% من المساحة مستخدمة</meter>

دعم المتصفحات

يدعم عنصر <meter> جميع المتصفحات الحديثة:

Chrome

مدعوم (الإصدار 8+)

Firefox

مدعوم (الإصدار 16+)

Safari

مدعوم (الإصدار 6+)

Edge

مدعوم بالكامل

Internet Explorer

ليس مدعوم

Opera

مدعوم (الإصدار 11+)

أفضل الممارسات

1. استخدم العنصر فقط للقياسات وليس لمؤشرات التقدم
2. حدد دائماً قيمة min و max عندما تكون مختلفة عن القيم الافتراضية
3. أضف نصاً بديلاً داخلياً لتحسين إمكانية الوصول
4. استخدم CSS لتوحيد المظهر عبر المتصفحات المختلفة

الخلاصــة

عنصر <meter> هو أداة قوية لعرض القياسات الكمية في تطبيقات الويب. عند استخدامه بشكل صحيح، يمكنه تحسين تجربة المستخدم من خلال تقديم تمثيل مرئي واضح للبيانات الرقمية ضمن سياقها المناسب.

كيف كان المقال؟