Tag <meter>

Tag <meter>

Definition

Status: Aktueller Standard

Das Tag <meter> steht für meter (Maßanzeige, Messinstrument).

Das <meter>-Element stellt einen skalaren Wert innerhalb eines bekannten Bereichs dar. Es eignet sich z.B. für Fortschrittsanzeigen, Skalen, Füllstände oder Bewertungssysteme. Nicht verwechseln mit <progress>. <progress> verwendet man bei Fortschrittsanzeigen (z.B. Datei wird geladen...). <meter> hingegen bei statischen Messwerten, die sich in einem Rahmen bewegen (z.B. Speicherbelegung).

Syntax

<meter value="..." min="..." max="...">...</meter>

Attribute bzw. Unterelemente

value

Aktueller Wert

min

Untergrenze eines Bereiches

max

Obergrenze eines Bereiches

low

Markiert, was als "niedrig" gilt

high

Markiert, was als "hoch" gilt

optimum

Der ideale Wert (z.B. 2,6bar beim Reifenluftdruck)

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <meter> - Mehrere value...

Der Code:

<meter id="disk-space"
  min="0" max="100"
  low="30" high="75"
  optimum="15" value="30">
  85% belegt
</meter>

Ergebnis:

Ergebnis: <meter>-Demo 1
Mehrere value...

Anmerkungen

Je nachdem in welchem Bereich euer value liegt färbt sich der Balken entsprechend. Eine Gestaltung mit CSS ist wegen der browserspezifischen Standard-Styles jedoch etwas komplexer. Zuerst muss man das Standard-Erscheinungsbild in Webkit-Browsern (Chrome, Safari, Edge) deaktivieren:

meter {
  -webkit-appearance: none;
  appearance: none;
}

Nun können die einzelnen Bereichswerte neu definiert werden:

// Hintergrund des gesamten Balkens:
meter::-webkit-meter-bar (Chrome/Safari)
meter (Firefox)

// Farbe des "optimalen" Werts (Standard: Grün):
::-webkit-meter-optimum-value
::-moz-meter-bar (in Firefox für alle Zustände)

// Farbe im "Warnbereich" (Suboptimal, Standard: Gelb):
::-webkit-meter-suboptimum-value

// Farbe im "kritischen" Bereich (Standard: Rot):
::-webkit-meter-even-less-good-value

<meter> hat keine Beschriftung oder Skala. Dies habe ich für das Beispiel in CSS gemacht.