Das HTML5-Element <meter>

Der folgende Beitrag ist ein Gastbeitrag von Pankaj Parashar. Pankaj hat bereits hier geschrieben, zuletzt über das progress-Element. Es ist also passend, erneut über das sehr verwandte meter-Element zu schreiben. Sie unterscheiden sich sowohl funktional als auch semantisch, also lesen Sie weiter!

Wie vom W3C definiert,

Das meter-Element stellt eine skalare Messung innerhalb eines bekannten Bereichs oder einen Bruchteil dar; zum Beispiel die Festplattenauslastung, die Relevanz eines Suchergebnisses oder den Bruchteil einer Wählerpopulation, der einen bestimmten Kandidaten gewählt hat. Dies ist auch als Messinstrument bekannt.

Wenn Sie wie ich sind, wird die obige Spezifikation nicht viel Sinn ergeben, bis wir uns eingehend mit der Implementierung befassen. Beginnen wir also einfach mit einer grundlegenden Markup für das meter-Element

<meter></meter>

Ähnlich wie sein Geschwister – das progress-Element – muss ein meter-Element sowohl einen Start-Tag (<meter>) als auch einen End-Tag (</meter>) haben. Dies ist sehr nützlich, wenn wir später in diesem Artikel eine robuste Fallback-Technik für ältere Browser entwickeln, die das meter-Element nicht unterstützen.

Inhaltsmodell

Das meter-Element verwendet das Phrasierungs-Inhaltsmodell, was bedeutet, dass es den Text des Dokuments zusammen mit den Elementen, die diesen Text markieren, enthalten kann. Es darf jedoch keine (zusätzlichen) meter-Elemente unter seinen Nachkommen geben.

Attribute

Abgesehen von den globalen Attributen kann das meter-Element 6 weitere Attribute haben.

value – Eine Fließkommazahl, die den aktuellen Wert des gemessenen Bereichs darstellt. Dieser muss zwischen dem min- und dem max-Wert liegen (falls angegeben).

min – Gibt die untere Grenze des gemessenen Bereichs an. Dieser muss kleiner sein als der max-Wert (falls angegeben). Wenn nicht angegeben, ist der Minimalwert 0.

max – Gibt die obere Grenze des gemessenen Bereichs an. Dieser muss größer sein als der min-Wert (falls angegeben). Wenn nicht angegeben, ist der Maximalwert 1,0.

low – Er repräsentiert die obere Grenze des unteren Bereichs der Messung. Dieser muss größer sein als das min-Attribut, aber kleiner als die high- und max-Werte (falls angegeben). Wenn nicht angegeben oder kleiner als der Minimalwert, ist der low-Wert gleich dem min-Wert.

high – Er repräsentiert die untere Grenze des oberen Bereichs der Messung. Dieser muss kleiner sein als das max-Attribut, aber größer als die low- und min-Werte (falls angegeben). Wenn nicht angegeben oder größer als der max-Wert, ist der high-Wert gleich dem max-Wert.

optimum – Dieses Attribut gibt den optimalen Wert an und muss innerhalb des Bereichs der min- und max-Werte liegen. Wenn es zusammen mit den Attributen low und high verwendet wird, gibt es die bevorzugte Zone für einen bestimmten Bereich an. Zum Beispiel

• min ≤ optimum ≤ low – Wenn der optimale Wert zwischen den min- und den low-Werten liegt, wird der untere Bereich als bevorzugte Zone betrachtet.
• high ≤ optimum ≤ max – Wenn der optimale Wert zwischen den high- und den max-Werten liegt, wird der obere Bereich als bevorzugte Zone betrachtet.

Ein meter mit allem würde so aussehen

<meter min="0" low="10" optimum="50" high="90" max="100"></meter>

Faustregeln

1. Alle oben genannten Attribute können Fließkommazahlen sein, z. B. 12, -8, 3,625
2. Basierend auf der Definition jedes Attributs werden die folgenden Ungleichungen wahr:
   • min ≤ value ≤ max
   • min ≤ low ≤ high ≤ max (wenn low/high angegeben)
   • min ≤ optimum ≤ max (wenn optimum angegeben)
3. Es gibt keine explizite Möglichkeit, Einheiten im meter-Element anzugeben, aber die Autoren werden ermutigt, die Einheiten mit dem title-Attribut anzugeben. Zum Beispiel: <meter max="256" value="120" title="GB">120 GB von 256 GB sind belegt</meter>

Verwenden Sie das meter-Element nicht, um…

1. den Fortschritt der Erledigung einer Aufgabe anzuzeigen (verwenden Sie stattdessen das progress-Element).
2. einen Skalarwert eines beliebigen Bereichs darzustellen – zum Beispiel zur Angabe des Gewichts oder der Körpergröße einer Person.

Experiment #1 – Verschiedene Zustände des meter-Elements

Dieses Experiment zeigt die verschiedenen Zustände des meter-Elements unter verschiedenen Kombinationen von Eingabewerten für jedes Attribut. Fühlen Sie sich frei, die Attributwerte des Hauptcodes zu bearbeiten, um die Ausgabe des meter-Gauges anzupassen.

Siehe den Pen HTML5 Meter Element von Pankaj Parashar (@pankajparashar) auf CodePen

Experiment #2 – OSX-ähnliche Festplattennutzung

In diesem Experiment versuchen wir, das Aussehen des Festplattennutzungsfelds in OS X mit dem meter-Element zu simulieren und es dann so browserübergreifend wie möglich zu gestalten.

Befüllen der internen Attribute unseres meter-Tags mit den bekannten Eingabewerten.

• Gesamtgröße der Festplatte – 120,47 GB (unser max-Attribut)
• Aktuelle Festplattennutzung – 55,93 GB (unser value-Attribut)
• Minimale Festplattengröße – 0 (unser min-Attribut, nicht erforderlich, da der Standardwert 0 ist)
• Einheit – GB (unser title-Attribut, das die Einheit angibt)

<meter max="120" value="55.93" title="GB"></meter>

Bevor wir CSS anwenden, sieht der meter-Gauge in Chrome 30 unter OX X 10.9 so aus.

Das ist ziemlich alles, was wir in HTML tun können, da die restliche Arbeit von CSS erledigt wird. In diesem Stadium kümmern wir uns vorerst nicht um die Fallback-Techniken zur Unterstützung älterer Browser, die das meter-Element nicht verstehen.

Styling des meter-Elements

Wie jedes andere Element können wir Abmessungen definieren, indem wir width und height für meter angeben.

meter {
  width: 500px;
  height: 25px;
}

Hier wird es interessant, da im Allgemeinen die meisten A-Grade-Browser separate Pseudoklassen zur Gestaltung des meter-Elements bereitstellen. Obwohl Opera mit der Umstellung auf Blink uns weniger Browser zum Kümmern lässt. Zu diesem Zeitpunkt müssen wir nicht wirklich wissen, welche Versionen der einzelnen Browser das meter-Element unterstützen, da unsere Fallback-Technik sich um den Rest kümmert. Wir klassifizieren sie wie folgt:

• Webkit/Blink
• Firefox
• Internet Explorer

1. Webkit/Blink (Chrome/Safari/Opera/iOS)

Beim Untersuchen des meter-Elements über die Chrome Developer Tools können wir die Implementierung der Spezifikation in Webkit-Browsern rückentwickeln.

Zusätzlich liefert das User-Agent-Stylesheet von WebKit eine Fülle von Informationen darüber, wie Sie verschiedene Pseudoklassen verwenden können, um auf verschiedene Zustände des meter-Elements zuzugreifen.

Zuerst setzen wir das Standardaussehen des meter-Gauges zurück, indem wir -webkit-appearence: none; verwenden.

meter {
  width: 500px;
  height: 25px;
  -webkit-appearance: none; /* Reset appearance */
  border: 1px solid #ccc;
  border-radius: 3px;
}

Für dieses Experiment verwenden wir nur die Pseudoklassen -webkit-meter-bar (zum Stylen des Containers) und -webkit-meter-optimum-value (zum Stylen des Werts). Jede Farbe im linearen Hintergrundverlauf repräsentiert den von den Unterkategorien wie Apps, Filme, Fotos usw. verbrauchten Platz.

meter::-webkit-meter-bar {
  background: none; /* Required to get rid of the default background property */
  background-color: whiteSmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient(
    90deg, 
    #8bcf69 5%, 
    #e6d450 5%,
    #e6d450 15%,
    #f28f68 15%,
    #f28f68 55%,
    #cf82bf 55%,
    #cf82bf 95%,
    #719fd1 95%,
    #719fd1 100%
  );
  background-size: 100% 100%;
}

CSS3 Übergänge/Animation

WebKit-Browser unterstützen sowohl Übergänge als auch Animationen für das meter-Element. Nur zum Testen habe ich experimentiert, indem ich die Breite des Werts (beim :hover) mit Übergängen geändert und die Hintergrundposition des Containers mit keyframes animiert habe. Obwohl nicht für den praktischen Gebrauch anwendbar, sind beide Experimente auf allen drei Browsern gut verlaufen.

meter::-webkit-meter-optimum-value {
  -webkit-transition: width .5s;
}

meter::-webkit-meter-optimum-value:hover {
  /* Reset each sub-category to 20% */
  background-image: linear-gradient(
    90deg, 
    #8bcf69 20%, 
    #e6d450 20%,
    #e6d450 40%,
    #f28f68 40%,
    #f28f68 60%,
    #cf82bf 60%,
    #cf82bf 80%,
    #719fd1 80%,
    #719fd1 100%
  );
  transition: width .5s;
  width: 100% !important; /* !important required. to override the inline styles in WebKit. */
}

meter::-webkit-meter-bar {
  /* Let's animate this */
  animation: animate-stripes 5s linear infinite;
  background-image:
    linear-gradient(
      135deg,
      transparent,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    );
  background-size: 50px 25px;
}

@keyframes animate-stripes {
  to { background-position: -50px 0; }
}

Pseudoelemente

Zum Zeitpunkt der Erstellung unterstützen nur Webkit-Browser Pseudoelemente für das meter-Gauge. Für dieses Experiment konnten wir Pseudoelemente verwenden, um Metainformationen wie HD-Name und freien Speicherplatz direkt über dem meter-Gauge anzuzeigen.

meter {
  margin: 5em;
  position: relative;
}

meter::before {
  content: 'Macintosh HD';
  position: absolute;
  top: -100%;
}

meter::after {
  content: '64.54 GB free out of 120.47 GB';
  position: absolute;
  top: -100%;
  right: 0;
}

Abgesehen von WebKit gibt es keine Unterstützung für Pseudoelemente in anderen Browsern. Daher gibt es keinen guten Grund, Inhalte in Pseudoelementen einzubetten, zumindest für den Moment.

2. Firefox

Ähnlich wie WebKit verwendet Firefox -moz-appearence: meterbar, um das meter-Gauge zu malen. Wir können die Standard-Fase und -Prägung entfernen, indem wir sie auf none zurücksetzen.

meter {
  /* Reset the default appearence */
  -moz-appearance: none;
  width: 550px;
  height: 25px;
}

Firefox wird mit einer umfassenden Liste von Pseudoklassen geliefert, um verschiedene Zustände des meter-Gauges zu gestalten. Der folgende Schnappschuss wurde aus der Datei forms.css entnommen, die aus Firebug zugänglich ist.

Für dieses Experiment verwenden wir nur ::-moz-meter-bar, um den Hintergrund des meter-Gauge-Werts zu stylen.

meter::-moz-meter-bar {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient(
    90deg, 
    #8bcf69 5%, 
    #e6d450 5%,
    #e6d450 15%,
    #f28f68 15%,
    #f28f68 55%,
    #cf82bf 55%,
    #cf82bf 95%,
    #719fd1 95%,
    #719fd1 100%
  );
  background-size: 100% 100%;
}

Interessanterweise kann in Firefox der Hintergrund des Containers mit dem meter-Selektor selbst gestylt werden.

meter {
  /* Firefox */
  background: none; /* Required to get rid of the default background property */
  background-color: whiteSmoke;  
  box-shadow: 0 5px 5px -5px #333 inset;
}

Firefox unterstützt keine ::before- und ::after-Pseudoelemente für das meter-Gauge. Die Unterstützung für CSS3-Übergänge und -Animationen ist ebenfalls etwas wackelig. Daher gibt es keinen guten Grund, sie zu verwenden, bis das Verhalten browserübergreifend konsistent ist.

3. Internet Explorer

Meines Wissens unterstützt keine stabile Version von Internet Explorer das meter-Element. Sogar die Modernizr-Testsuite konnte meter in der IE11-Vorschau unter Windows 8.1 nicht erkennen. Dies lässt uns vielleicht nur mit den Fallback-Ansätzen, die im nächsten Abschnitt besprochen werden.

if ('value' in document.createElement('meter')) {
  alert("Meter element is supported");
} else {
  alert("Meter element Not supported");
}

Was ist mit Browsern, die meter nicht unterstützen?

Can I Use (und einfache Tests) berichten, dass das meter-Gauge nativ unterstützt wird in: Firefox 16+, Opera 11+, Chrome, Safari 6+. Internet Explorer bietet jedoch keinerlei Unterstützung für irgendeine Version. Wenn Sie das meter-Element in älteren Browsern funktionsfähig machen möchten, haben Sie zwei Optionen:

1. Polyfill

Randy Peterman hat einen Polyfill geschrieben, der das meter-Element in älteren Browsern (insbesondere IE) funktionsfähig macht. Bei meinen browserübergreifenden Tests habe ich festgestellt, dass der Polyfill für alle IE-Browser bis IE6! funktioniert, was ihn zu einem guten Kandidaten für den Einsatz in der Produktion macht.

2. HTML-Fallback

Dies ist mein bevorzugter (ohne JS) Ansatz. Er nutzt eine gängige Technik, die auch in meinem vorherigen Artikel für CSS-Tricks über das HTML5 progress-Element diskutiert wurde.

<meter value="55.93" min="0" max="120.47" title="GB">
  <div class="meter-gauge">
    <span style="width: 46.42%;">Disk Usage - 55.93GB out of 120GB</span>
  </div>
</meter>

Die Idee ist, das Aussehen eines meter-Gauges mit div und span innerhalb des meter-Tags zu simulieren. Moderne Browser, die meter unterstützen, ignorieren den Inhalt des Tags. Ältere Browser, die das meter-Element nicht rendern können, ignorieren den Tag und rendern das darin enthaltene Markup.

.meter-gauge {
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: whiteSmoke;
    box-shadow: 0 5px 5px -5px #333 inset;
    width: 550px;
    height: 25px;
    display: block;
}

.meter-gauge > span {
  height: inherit;  
  box-shadow: 0 5px 5px -5px #999 inset;
  background-color: blue;
  background-image: linear-gradient(
    90deg, 
    #8bcf69 5%, 
    #e6d450 5%,
    #e6d450 15%,
    #f28f68 15%,
    #f28f68 55%,
    #cf82bf 55%,
    #cf82bf 95%,
    #719fd1 95%,
    #719fd1 100%
  );
  background-size: 100% 100%;
  display: block;
  text-indent: -9999px;
}

Es ist üblich, beide Techniken zu kombinieren, und dies ist für den Einsatz in Produktionsseiten absolut sicher. Die Demo sollte in allen Browsern, einschließlich Internet Explorer (bis IE6!), einwandfrei laufen. Die Farbe des meter-Gauges ist in allen Versionen von Internet Explorer blau. Opera 11 und 12 erlauben keine Änderung der Farbe des meter-Gauges. Daher wird die Standard-Grünfarbe angezeigt. Die Demo verwendet auch zusätzliches Markup, um die Festplattennutzung der einzelnen Unterkategorien wie Apps, Filme, Fotos usw. anzuzeigen.

Siehe den Pen OSX-style Disk Usage von Pankaj Parashar (@pankajparashar) auf CodePen

Weitere Ressourcen

• Offizielle W3C-Spezifikation für meter
• MDN-Dokumente für meter
• HTMl5Doctor: Messen Sie mit dem meter-Tag