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

Category : CSS

2011年1月27日に「meter 要素のスタイリングについてのメモ for webkit & Opera」という記事を書きましたが、先日リリースされた Firefox 16 でも meter 要素に対応し、また Webkit の指定方法も変更されていましたので改めてメモしておきます。

なお、前回同様に Opera についてはスタイリングの方法が分かりませんので(まだないっぽい)、Webkit と Firefox 向けの指定方法となります。
時間のある方は前の記事も読んでおくと理解しやすいかと思います。

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 要素に指定します。
他はまあ問題ないと思います。

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


ここで書いたものは現時点でのものですので、変更される可能性があります。
実際に使う場合にはそのあたりも気に留めておいて下さい。

Trackbacks & Pingbacks

Leave a Reply