demo · v130

Dashboard Meters

Chrome 130 lets authors fully style the <meter> element via author-defined fallback styles instead of the browser's native appearance. This dashboard shows six real-world metric gauges — CPU, memory, disk, battery, temperature, network — each using the three semantic pseudo-elements (::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, ::-webkit-meter-even-less-good-value) to show context-appropriate colours.

Simulate scenario:

Semantic states and colours

Value conditionPseudo-elementSwatchWhen to use
value inside optimum range ::-webkit-meter-optimum-value
Normal / healthy state
value outside optimum but inside low/high ::-webkit-meter-suboptimum-value
Warning / elevated state
value in low or high danger zone ::-webkit-meter-even-less-good-value
Critical / danger state 
/* Chrome 130: author-styled <meter> */
meter {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: #eee;
  border: 1px solid #ccc;
}
meter::-webkit-meter-bar {
  background: #eee;
  border-radius: 0;
}

/* Semantic states */
meter::-webkit-meter-optimum-value      { background: #22c55e; }
meter::-webkit-meter-suboptimum-value   { background: #f59e0b; }
meter::-webkit-meter-even-less-good-value { background: #ef4444; }

/* HTML — semantic attributes drive which pseudo-element applies */
<meter value="75" min="0" max="100"
       low="20" high="80" optimum="50">
  75%
</meter>
/* value=75 is above high=80? → even-less-good-value → red */

see also