HTML-Tag <meter>
Das <meter>-Tag ist eines der HTML5-Elemente. Das Tag definiert eine skalare Messung in einem bekannten Bereich oder eine grafische Darstellung einer Bruchzahl. Das Tag kann verwendet werden, wenn es notwendig ist, beispielsweise den Ladezustand eines Akkus, die Speicherauslastung usw. anzuzeigen. Um das <meter>-Tag zu verwenden, müssen Sie den Maximalwert kennen.
Syntax
Das <meter>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<meter>) und dem schließenden (<​/meter>) Tag geschrieben.
Beispiel für das HTML-<meter>-Tag:
Beispiel für das HTML-Tag <meter>|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<meter value="4" min="0" max="10">4 out of 10</meter> 4 Out of 10<br />
<meter value="0.75">75%</meter> 75%
</body>
</html>Ergebnis
DANGER
Das <meter>-Tag wird nicht verwendet, um Fortschritt anzuzeigen. Verwenden Sie dafür das Tag <progress>.
TIP
Verwenden Sie die CSS-Eigenschaften background-color, box-shadow, width und height, um das <meter>-Element zu gestalten.
Beispiel für das HTML-<progress>-Tag, verwendet mit den CSS-Eigenschaften background-color, box-shadow, width und height:
Herunterladen und Fortschrittsbalken mit dem HTML-<progress>-Tag|Beispiel|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 220px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
box-shadow: 0 0 3px #666 inset;
}
progress[value]::-webkit-progress-value {
background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
-webkit-linear-gradient(top, #96f204, #8ebf42),
-webkit-linear-gradient(right, #96f204, #8ebf42);
background-size: 40px 20px, 100% 100%, 100% 100%;
}
</style>
</head>
<body>
<p>Downloading:
<progress value="35" max="100"></progress>
<span>35%</span>
</p>
<p>Progress bar:
<progress value="80" max="100"></progress>
<span>80%</span>
</p>
</body>
</html>Anzeige eines Zahlenbereichs
Die Attribute min und max definieren den Bereich für das Meter. Verwenden Sie das Attribut optimum, um die gewünschte Zahl zu definieren, zum Beispiel eine Bestehensgrenze in einem Test. Beachten Sie, dass die visuelle Gestaltung auf Grundlage des Attributs optimum je nach Browser variieren kann.
HTML-<meter>-Tag
<meter value="15" min="0" max="70" optimum="60"></meter>Anzeige eines Prozentsatzes
Anzeige eines Prozentsatzes
<meter value="0.8">80%</meter>Das HTML-<meter>-Tag gestalten
Zunächst legen Sie die Größe mit den Eigenschaften width und height fest.
Beispiel für das HTML-<meter>-Tag:
meter {
width: 300px;
height: 20px;
}Moderne Browser bieten keine zuverlässigen, browserübergreifenden Styling-Hooks für das native meter-Steuerelement. Die unten gezeigten herstellerspezifischen Pseudo-Elemente sind in aktuellen Browsern veraltet oder nicht unterstützt und sollten daher für das Styling in der Produktion nicht verwendet werden. Wenn Sie einen vollständig gestalteten, barrierefreien Indikator benötigen, sollten Sie eine benutzerdefinierte ARIA-konforme Komponente oder das Tag <progress> in Betracht ziehen, wenn der Wert Fortschritt darstellt.
Hier müssen Sie Fallbacks verwenden, da von den A-Grade-Browsern separate Pseudo-Klassen zum Gestalten des <meter>-Elements bereitgestellt werden. Wir verwenden den Webkit/Blink-Fallback. Er bietet die folgenden Pseudo-Klassen:
| Pseudo-Klasse | Beschreibung |
|---|---|
| -webkit-meter-inner-element | Zusätzliches Markup, das verwendet wird, um das Meter-Element schreibgeschützt darzustellen. |
| -webkit-meter-bar | Enthält die Meter-Anzeige, die den Wert hält. |
| -webkit-meter-optimum-value | Der aktuelle Wert des Meter-Elements, der standardmäßig grün ist, wenn das Attribut value innerhalb des Bereichs low-high liegt. |
| -webkit-meter-suboptimum-value | Das meter-Tag wird gelb, wenn der Wert außerhalb des Bereichs low-high liegt. |
| -webkit-meter-even-less-good-value | Das meter-Tag wird rot, wenn der Wert und das Attribut optimum außerhalb des Bereichs low-high liegen, aber in entgegengesetzten Zonen. Zum Beispiel: value high > low > optimum. |
Dann müssen wir die Standard-appearance der Meter-Anzeige auf "none" setzen.
Meter-Tag mit der Eigenschaft appearance gestaltet
meter {
-webkit-appearance: none;
}In unserem Beispiel verwenden wir die Pseudo-Klassen -webkit-meter-bar und -webkit-meter-optimum-value.
Das HTML-<meter>-Tag gestalten
meter::-webkit-meter-bar {
background: none;
background-color: lightgrey;
box-shadow: 0 3px 3px -3px #333 inset;
}
meter::-webkit-meter-optimum-value {
box-shadow: 0 3px 3px -3px #999 inset;
background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
background-size: 100% 100%;
}Jede Farbe im linearen Hintergrundverlauf stellt den von den Unterkategorien belegten Raum dar.
Das HTML-<meter>-Tag gestalten
meter::-webkit-meter-optimum-value {
-webkit-transition: width .5s;
}
meter::-webkit-meter-optimum-value:hover {
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%;
}Beispiel für das Gestalten des HTML-<meter>-Tags:
Beispiel für das Gestalten des HTML-<meter>-Tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
meter {
width: 300px;
height: 20px;
}
meter::-webkit-meter-bar {
background: none;
background-color: lightgrey;
box-shadow: 0 3px 3px -3px #333 inset;
}
meter::-webkit-meter-optimum-value {
box-shadow: 0 3px 3px -3px #999 inset;
background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
background-size: 100% 100%;
}
</style>
</head>
<body>
<meter value="30" min="0" max="70"></meter>
</body>
</html>Sowohl die Eigenschaften transition als auch animation des <meter>-Elements werden von Webkit-Browsern unterstützt. Ändern Sie die Breite des Werts (bei :hover) mithilfe von Übergängen und animieren Sie die background-position des Containers mit keyframes.
Beispiel für das Gestalten des HTML-<meter>-Tags mit der CSS-Eigenschaft transition:
Beispiel für das Gestalten des HTML-<meter>-Tags mit der CSS-Eigenschaft transition
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
meter {
width: 300px;
height: 20px;
}
meter::-webkit-meter-bar {
background: none;
background-color: lightgrey;
box-shadow: 0 3px 3px -3px #333 inset;
}
meter::-webkit-meter-optimum-value {
-webkit-transition: width .5s;
box-shadow: 0 5px 5px -5px #999 inset;
background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
background-size: 100% 100%;
}
meter::-webkit-meter-optimum-value:hover {
/* Reset each sub-category to 20% */
background-image: linear-gradient( 90deg, #2286c9 20%, #FF00FF 20%, #FF00FF 40%, #04C319 40%, #04C319 60%, #F1F70D 60%, #F1F70D 80%, #00FFCC 80%, #00FFCC 100%);
transition: width .5s;
width: 100% !important;
}
</style>
</head>
<body>
<meter value="25" min="0" max="70"></meter>
</body>
</html>Pseudo-Elemente an der Meter-Anzeige werden nur von Webkit-Browsern unterstützt. Die Pseudo-Elemente können verwendet werden, um die Metainformationen oberhalb der Meter-Anzeige anzuzeigen.
Das HTML-<meter>-Tag gestalten
meter {
margin: 2em;
position: relative;
}
meter::before {
content: 'Used storage';
position: absolute;
top: -100%;
}
meter::after {
content: 'Free storage';
position: absolute;
top: -100%;
right: 0;
}Beispiel für das HTML-<meter>-Tag, verwendet mit Pseudo-Elementen:
Beispiel für das HTML-<meter>-Tag, verwendet mit Pseudo-Elementen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
meter {
margin: 2em;
width: 400px;
height: 30px;
position: relative;
}
meter::before {
content: 'Used storage';
position: absolute;
top: -100%;
}
meter::after {
content: 'Free storage';
position: absolute;
top: -100%;
right: 0;
}
meter::-webkit-meter-bar {
background: none;
background-color: lightgray;
box-shadow: 0 5px 5px -5px #333 inset;
}
meter::-webkit-meter-optimum-value {
-webkit-transition: width .5s;
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%;
}
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. */
}
</style>
</head>
<body>
<meter value="25" min="0" max="70"></meter>
</body>
</html>Nun verwenden wir den Firefox-Fallback. Zeichnen Sie die Meter-Anzeige mit -moz-appearance: meterbar. Wenn Sie die standardmäßige Abschrägung und Prägung nicht benötigen, setzen Sie -moz-appearance auf "none".
Das HTML-<meter>-Tag gestalten
meter {
-moz-appearance: none;
width: 400px;
height: 30px;
}Firefox unterstützt das Gestalten der Meter-Anzeige über CSS-Pseudo-Elemente nicht mehr.
Hier gestalten wir den Hintergrund des Werts der Meter-Anzeige mit der Pseudo-Klasse ::-moz-meter-bar.
Das HTML-<meter>-Tag gestalten
meter::-moz-meter-bar {
box-shadow: 0 5px 5px -5px #999 inset;
background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
background-size: 100% 100%;
}In Firefox können Sie den meter-Selektor selbst verwenden, um den Hintergrund des Containers zu gestalten.
Das HTML-<meter>-Tag gestalten
meter {
background: none;
background-color: lightgray;
box-shadow: 0 5px 5px -5px #333 inset;
}Beispiel für das HTML-<meter>-Tag für Firefox:
Beispiel für das HTML-<meter>-Tag für Firefox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
meter {
width: 400px;
height: 30px;
background: none;
/* Required to get rid of the default background property */
background-color: lightgray;
box-shadow: 0 5px 5px -5px #333 inset;
}
meter::-moz-meter-bar {
box-shadow: 0 5px 5px -5px #999 inset;
background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
background-size: 100% 100%;
}
</style>
</head>
<body>
<meter value="30" min="0" max="70"></meter>
</body>
</html>Die Pseudo-Elemente ::before und ::after an der Meter-Anzeige werden von Firefox nicht unterstützt. Auch die Unterstützung für CSS3-Übergänge und Animationen ist schwach.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| form | form_id | Gibt das Formular bzw. die Formulare an, zu denen das <meter>-Tag gehört. |
| high | number | Gibt hohe Werte an (aber nicht die maximalen). Wenn der hohe Wert kleiner als der niedrige ist, dann gilt high = low. Wenn high größer als max gesetzt ist, dann gilt high = max. |
| low | number | Definiert niedrige Werte (aber nicht die minimalen). Dieser Wert muss kleiner als high sein. Wenn der niedrige Wert kleiner als min ist, dann gilt low = min. |
| max | number | Definiert den maximal möglichen Wert. Der Standardwert ist 1. |
| min | number | Definiert den minimal möglichen Wert. Der Standardwert ist 0. |
| optimum | number | Definiert die optimale Zahl, die innerhalb des durch die Attribute min und max definierten Bereichs liegen muss. Sie kann größer als der hohe Wert sein. |
| value | number | Setzt den aktuellen Wert. Wenn weggelassen, ist der Standardwert 0.5. |
Das <meter>-Tag unterstützt die Global Attributes und die Event Attributes.
Practice
Was ist die Funktion des HTML-`<meter>`-Tags?