วิธีตั้งค่าค่าที่เหมาะสมที่สุด (Optimum) สำหรับ Gauge ใน HTML

ใช้แอตทริบิวต์ optimum เพื่อตั้งค่าที่เหมาะสมที่สุดสำหรับ Gauge (แท็ก <meter>) ใน HTML

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ optimum:

<!DOCTYPE html>
<html>
  <body>
    <h3>Gauge</h3>
    <p><meter value="0.7" min="0" max="1" low="0.3" high="0.7" optimum="0.8"></meter></p>
    
    <h3>Disk Usage</h3>
    <p><meter value="85" min="0" max="100" low="30" high="70" optimum="50">85%</meter></p>
    
    <h3>Battery</h3>
    <p><meter value="20" min="0" max="100" low="20" high="80" optimum="100">20%</meter></p>
  </body>
</html>

แอตทริบิวต์ของ <meter> (Gauge)

โซนการแสดงผล (Visual Zones)

เบราว์เซอร์จะจัดสีต่างกันตามโซน (ขึ้นอยู่กับ UA Style):

• Optimum Zone: ใกล้ค่า optimum สุด - สีเขียว/ปกติ
• Sub-optimal Zone: ระหว่าง low-high แต่ไกลจาก optimum - สีเหลือง/ส้ม
• Sub-optimal Zone (Outside low/high): ต่ำกว่า low หรือสูงกว่า high - สีแดง

ตัวอย่าง Logic โซน

<!-- Optimum สูง = ค่ายิ่งมากยิ่งดี (Score, Battery) -->
<meter value="85" min="0" max="100" low="50" high="80" optimum="100"></meter>
<!-- Zones: 0-50=Red (Low), 50-80=Yellow, 80-100=Green (Optimum) -->

<!-- Optimum ต่ำ = ค่ายิ่งน้อยยิ่งดี (Temperature, Ping, Error Rate) -->
<meter value="35" min="0" max="100" low="30" high="70" optimum="0"></meter>
<!-- Zones: 0-30=Green (Optimum), 30-70=Yellow, 70-100=Red (High) -->

<!-- Optimum กลาง = ค่ากลางดีที่สุด (pH, Humidity) -->
<meter value="7.0" min="0" max="14" low="6" high="8" optimum="7"></meter>
<!-- Zones: 0-6=Red, 6-8=Green (Optimum), 8-14=Red -->

การจัดสไตล์ด้วย CSS (Custom)

meter {
  width: 100%;
  height: 20px;
  appearance: none; /* Reset default */
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

meter::-webkit-meter-bar { background: #eee; }
meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, #4caf50, #8bc34a); }
meter::-webkit-meter-suboptimum-value { background: linear-gradient(90deg, #ffc107, #ff9800); }
meter::-webkit-meter-even-less-good-value { background: linear-gradient(90deg, #f44336, #e53935); }

/* Firefox */
meter::-moz-meter-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: linear-gradient(90deg, #ffc107, #ff9800); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: linear-gradient(90deg, #f44336, #e53935); }

meter vs progress

Accessibility

<meter value="85" min="0" max="100" low="30" high="70" optimum="50">
  85% Disk Used
</meter>

เนื้อหาภายใน meter = Fallback text สำหรับเบราว์เซอร์ที่ไม่รองรับ และ Screen Readers