HTML značka `<meter>`

Značka <meter> slouží k indikaci čísla.

4. prosince 2013

4 minuty

Element <meter> je hodně podobný značce <progress> (ale nefunguje ani v IE 11). Jednoduše řečeno znázorňuje číslo sloupcovým grafem.

Zatímco <progress> je spíš určen k presentování postupu typu Krok 1 ze 3, <meter> může typicky znázorňovat:

stav zaplnění místa na disku,
teplotu (i když u té je trochu obtížné určit minimální a maximální hodnotu),
popularitu článku/videa/čehokoliv,
relevanci výsledku (hledání),
kondici torrentu a další.

Možné atributy

Kromě standardních atributů jako value, name a form (pro začlenění do formuláře) a dalších, existují tyto specifické.

min: Minimální hodnota (výchozí je 0).
max: Maximální hodnota.
low: Jaká hodnota je považována za nízkou.
high: Jaká hodnota je považována za vysokou (pozor na překlep hight).
optimum: Optimální hodnota.

Hlavní smysl značky <meter> je asi v tom, že podle nastavení výše uvedených atributů se postará o styl, který výsledný element bude mít.

Pomyslnou osu hodnot od min do max je možné atributy low a high rozdělit na 3 části a atributem optimum zvolit optimální část.

Místo na disku: Z 640 GB zaplňeno 100 GB

Relevance: 95 %

Teplota: 17 °C

(Možnost měnit hodnotu zajišťuje <input type=range>.)

Stylování

Hodilo by se, kdyby šlo funkcí content přečíst nastavenou hodnotu. Zatím to nejde.

Pro stylování obalu i sloupců existuje napříč prohlížeči odlišné oprefixované vlastnosti.

Starší prohlížeče

Ve starších prohlížečích je teoreticky možné umístit náhradu uvnitř značky <meter> nebo v nich JavaScriptem vygenerovat atrapu. Otázka je, zda použití <meter>u oproti pár <div>ům natolik usnadní práci, aby stálo za to u všech uživatelů Internet Exploreru spoléhat na JavaScript.