html5 meterタグとprogressタグ

HTML5でひっそりと定義されているものに、meterタグとprogressタグがある。

meterタグは、

<meter value="300" min="0" max="999" low="100" hight="999">--</meter>

と書くと、Chromeで見るとこんな感じになる。

これは・・、RPGでよくあるHPバーにしか見えない・・。
しかもlowで設定した値をvalueが下回っていると、Chromeではこうなる。

完全にHPだこれ。誰かケ○ルをかけてあげて!


progressタグは進捗状況を表示する時に使えってタグで

<progress id="prog" max="100" value="60"></progress>

と書くと、Chromeではこうなる。

プログレスバーをJSで書く必要がなくなるようだ。

遠い将来、普通に使う日がくるのかなあ。。
現状は、CSSとか全然あてられないし、Chromeぐらいしか対応してないしで、実用性が皆無。

meterタグとprogressタグのデモはこちら
デモではJSでvalueを動かしています。

タイトルとURLをコピーしました