meter要素で自動的にメーターの色を変える

progress要素に似た見た目のmeter要素がある。

meter要素は、範囲内の数値を表すための要素で、min/max属性やlow/high属性を使うことで、min〜low、low〜high、high〜maxの3つの範囲を決められ、valueの値に応じて自動的にメーターの色を変更できる。

※progress要素は見た目が似ているが、タスクの進捗状況を表す要素なので、low/highのような範囲を指定するような属性はない。

<meter
  min="0"
  max="100"
  low="30"
  high="70"
  optimum="71"
  value="50"
>50点</meter>

属性

• min/max: メーターの最小値と最大値を指定する
• high: 「高」とされる範囲の下限値。highを超えると「高」として扱う
• low: 「低」とされる範囲の上限値。lowを下回ると「低」として扱う
• optimum: この値がある範囲を「最適」として扱う
  • high:80、low:30の場合、optimum:30だと「低」の範囲が最適として扱われる

            low          high
    <-[low]->|<-[medium]->|<-[high]->
min <========+============+=========> max
       |           |
       |         optimum: low-highの間が「最適」
       |
    optimum: lowの値以下が「最適」：

「最適」とされる範囲から離れるにつれ、緑→黄色→赤と自動的に色がわかる。

色のカスタマイズ

色のカスタマイズにはベンダープレフィックスのついた疑似クラスを使う。ただし、::-webkit-meter-barは非推奨、その他の擬似クラスも非標準機能であるため、利用には十分注意が必要。

/**
 * メーターの背景色
 * @deprecated
 */
::-webkit-meter-bar {
  background: white;
}

/**
 * 「最適」とされる範囲
 * @non-standard
 */
::-webkit-meter-optimum-value {
  background: green;
}

/**
 * 「最適」からひとつ外れた範囲
 * @non-standard
 */
::-webkit-meter-suboptimum-value {
  background: yellow;
}

/**
 * 「最適」からふたつ外れた範囲
 * @non-standard
 */
::-webkit-meter-even-less-good-value {
  background: red;
}

デモ

0〜100において、0〜30がlow、31〜70がmedium、71〜100がhighとする場合。