meter要素のスタイリングについてのメモ 2012年10月

Webkit向け

::-webkit-meter-inner-element

これはユーザーエージェントスタイルシートに書かれているものですが、気にしなくていいと思います。
meter要素の中の部分を指定します。

::-webkit-meter-bar

メーター自体を指す擬似要素です。バーの背景などはここで指定します。
以前あった横方向・縦方向の指定はなくなっています。

::-webkit-meter-optimum-value

meter要素の値が最適領域にあるときのメーターの値の部分を指します。
何も指定していない場合は緑色のグラデーションになります。

::-webkit-meter-suboptimum-value

値が準最適領域にあるときのメーターの値の部分を指します。
以前は::-webkit-meter-horizontal[vertical]-suboptimal-valueという擬似要素でした。
何も指定していない場合は黄色のグラデーションになります。

::-webkit-meter-even-less-good-value

値が非最適領域にあるときのメーターの値の部分を指します。
何も指定していない場合は赤色のグラデーションになります。

ちなみに、2012年10月12日時点でのユーザーエージェントスタイルシートは次のようになっています。
これはtrunk/Source/WebCore/cssで見ることができます。

meter {
  -webkit-appearance: meter;
  box-sizing: border-box;
  display: inline-block;
  height: 1em;
  width: 5em;
  vertical-align: -0.2em;
}

meter::-webkit-meter-inner-element {
  -webkit-appearance: inherit;
  box-sizing: inherit;
  -webkit-user-modify: read-only !important;
  height: 100%;
  width: 100%;
}

meter::-webkit-meter-bar {
  background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
  height: 100%;
  width: 100%;
  -webkit-user-modify: read-only !important;
  box-sizing: border-box;
}

meter::-webkit-meter-optimum-value {
  background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
  height: 100%;
  -webkit-user-modify: read-only !important;
  box-sizing: border-box;
}

meter::-webkit-meter-suboptimum-value {
  background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
  height: 100%;
  -webkit-user-modify: read-only !important;
  box-sizing: border-box;
}

meter::-webkit-meter-even-less-good-value {
  background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44));
  height: 100%;
  -webkit-user-modify: read-only !important;
  box-sizing: border-box;
}

Firefox向け

MDNの「Firefox 16 for developers」で触れられています。
Webkitと違うのは、値の状態は擬似クラスで指定し、メーターの値の部分は擬似要素として別に指定しなければならないことです。

::-moz-meter-bar

MDNではまだ触れられていませんが、「Bugzilla@Mozilla – Bug 659999」には書かれています。
これはメーターの値の部分を指します。

:-moz-meter-optimum

meter要素の値が最適領域にある状態を指す擬似クラスです。
何も指定していない場合、この状態の::-moz-meter-barは緑色のグラデーションになります。

:-moz-meter-sub-optimum

値が準最適領域にある状態を指す擬似クラスです。
何も指定していない場合、この状態の::-moz-meter-barは黄色のグラデーションになります。
（UA CSS にはオレンジって書かれてますが）

:-moz-meter-sub-sub-optimum

値が非最適領域にある状態を指す擬似クラスです。準々最適領域みたいな表記ですね……。
何も指定していない場合、この状態の::-moz-meter-barは赤色のグラデーションになります。

2012年10月12日時点でのユーザーエージェントスタイルシートは次のようになっています。
これはresource://gre-resources/forms.cssで見ることができます。

meter {
  -moz-appearance: meterbar;
  display: inline-block;
  vertical-align: -0.2em;

  background: -moz-linear-gradient(top, #e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
}

::-moz-meter-bar {
  /* Block styles that would change the type of frame we construct. */
  display: inline-block ! important;
  float: none ! important;
  position: static ! important;
  overflow: visible ! important;

  -moz-appearance: meterchunk;
  height: 100%;
  width: 100%;
}

:-moz-meter-optimum::-moz-meter-bar {
  /* green. */
  background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
:-moz-meter-sub-optimum::-moz-meter-bar {
  /* orange. */
  background: -moz-linear-gradient(top, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  /* red. */
  background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}

上記2つを使ってみる

では実際に指定してみます。
HTMLは以前の記事で使ったサンプルと同じです。

meter {
  margin-top: 10px;
  border: 1px solid #ccc;
  width: 300px;
  height: 20px;
  vertical-align: bottom;
  /* for Firefox */
  background-image: linear-gradient(to bottom, #dadada, #eee 20%, #f0f0f0);
}

/* Webkit */
meter::-webkit-meter-bar {
  background-image: -webkit-linear-gradient(top, #dadada, #eee 20%, #f0f0f0);
  background-image: linear-gradient(to bottom, #dadada, #eee 20%, #f0f0f0);
}

meter::-webkit-meter-optimum-value {
  background-image: -webkit-linear-gradient(top, #a0ff9f, #018f00);
  background-image: linear-gradient(to bottom, #a0ff9f, #018f00);
}

meter::-webkit-meter-suboptimum-value {
  background-image: -webkit-linear-gradient(top, #feff9f, #dddf00);
  background-image: linear-gradient(to bottom, #feff9f, #dddf00);
}

meter::-webkit-meter-horizontal-even-less-good-value {
  background-image: -webkit-linear-gradient(top, #ffafaf, #f00);
  background-image: linear-gradient(to bottom, #ffafaf, #f00);
}

/* Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
  background-image: linear-gradient(to bottom, #a0ff9f, #018f00);
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background-image: linear-gradient(to bottom, #feff9f, #dddf00);
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background-image: linear-gradient(to bottom, #ffafaf, #f00);
}

メーターの背景ですが、Webkit向けには::-webkit-meter-barに、Firefox向けにはmeter要素に指定します。
他はまあ問題ないと思います。

グラデーションの指定をしていない場合はこういう見た目になります。