meter要素のフォールバックサンプル

Category
HTML5
CSS
Bookmark

meter要素の、スタイルを含めたフォールバックのサンプルです。

HTML

<meter min="0" max="100" value="60" title="percentage"><span class="outer"><span class="inner">60%</span></span></meter>

CSS

.outer {
  display: block;
  width: 80px;
  height: 15px;
  background: #e5e5e5;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #e5e5e5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#e5e5e5));
  background: linear-gradient(top, #FFFFFF 0%, #e5e5e5 100%);
}

.inner {
  display: block;
  width: 60%;
  height: 15px;
  background: #3893E2;
  background: -moz-linear-gradient(top, #7FE9FF 0%, #3893E2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7FE9FF), color-stop(100%,#3893E2));
  background: linear-gradient(top, #7FE9FF 0%, #3893E2 100%);
  text-indent: -99999px;
}

サンプル

60%

判りやすいように、対応しているブラウザではブラウザごとのインターフェイスに（Chrome8, Opera11 だと緑のバー）、非対応ブラウザでは青いバーが出るように（Firefox3.6, IE6,7,8, iPhone Safari (iOS4.2) で確認）なっています。
（モニタによっては、メーターの幅を示す灰色のグラデーションが見えづらいかもしれません）

解説

特に難しい事はしていません。
単純にmeter要素の中のテキストを二重に囲って、それぞれにスタイルを当てているだけです。