<meter>

وسم المقياس ضمن نطاق <meter>

وسم meter يعرض قيمة قياس ضمن نطاق معروف — مساحة تخزين مستخدمة، تقييم نجوم، حرارة — لا تقدّم مهمة كما يفعل progress.

الفرق الجوهري عن progress محسوم بالمعنى: progress يقول «هذه المهمة أُنجز منها كذا بالمئة»، بينما meter يقول «هذه القيمة تقع كذا ضمن نطاق من كذا إلى كذا» — قياس ثابت لا عملية جارية. مساحة القرص المستخدمة، درجة الحرارة، نتيجة اختبار، تقييم المنتج — كلها meter لا progress.

ميزته الفريدة: low وhigh وoptimum تقسّم النطاق إلى مناطق (منخفضة/متوسطة/مرتفعة) والمتصفح يلوّن الشريط تلقائيًّا أخضر أو أصفر أو أحمر حسب موقع value منها — دون أي CSS إضافي.

الصياغة

<meter min="0" max="100" low="33" high="66" optimum="80" value="50">50 من 100</meter>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<label>مساحة التخزين المستخدمة:</label><br>
<meter min="0" max="100" low="50" high="80" optimum="20" value="72" style="width:100%">72%</meter>
<p style="font-size:13px; color:#666">optimum منخفض هنا يعني: كلما قلّت المساحة المستخدمة كان أفضل، فالمتصفح يلوّن القيمة العالية بالأحمر تحذيرًا.</p>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
value / min / max	القيمة الحالية ونطاقها — min يساوي 0 وmax يساوي 1 افتراضيًّا إن أُهملا
low / high	حدود المنطقتين المنخفضة والمرتفعة داخل النطاق
optimum	القيمة المثالية — يحدد اتجاه «الأفضل»: أعلى، أوسط، أم أدنى

💡 نصائح عملية

مهمة قيد الإنجاز (تحميل، رفع ملف)؟ progress هو الصحيح دلاليًّا لا meter
اضبط optimum بعناية: أحيانًا القيمة المنخفضة هي المرغوبة (استهلاك الذاكرة) لا المرتفعة

⚠️ أخطاء شائعة

استخدامه كشريط تحميل — تلك مهمة progress حصرًا
تجاهل low/high/optimum فيخسر المستخدم إشارة اللون التلقائية المفيدة

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs