HTML5 - Allgemeine Neuerungen - Optische Elemente
1. Ein Hinweis
Ich zeige euch hier nur die neuen Elemente, die zumindest in einem(!) Browser funktionieren. Ansonsten hätte ich ja nicht mal Screenshots für euch. Außerdem müsst ihr wissen, dass die Darstellung browserabhängig ist und sich somit voneinander unterscheidet. In wie weit man das per CSS angleichen kann, zeig ich euch in den kommenden Tutorials.
Ein Hinweis
Alle folgenden HTML-Tags gehören zu den Inline-Elementen. Auch wenn euch bei später der CSS-Formatierung eine Überraschung erwartet.
2. <details>
- 22.0
Dieses neue Tag wäre eine echte Bereicherung, wenn ... ja wenn denn die gängigen Browser es unterstützen würden. Leider ist derzeit nur der Chrome dazu in der Lage. Zum Testen müsst ihr also den nehmen, denn nur dort funktioniert das Praxisbeispiel.
Beispiel
Text ein/ausblenden
Hier kommt jetzt Text.
<details>
<summary>Text ein/ausblenden</summary>
<p>Hier kommt jetzt Text.</p>
</details>
Erläuterung
Bei dem <details>
-Element handelt es sich um eine Aus- und Einklappfunktion für untergeordenete Elemente. Wenn man dort als Attribut
kein open
angibt, so wird alles außer der <summary>
ausgeblendet. Wenn man Letzteres weglässt, so soll(!) der Browser
einen eigenen Text vorgeben. Damit die Nicht-Chrome-Nutzer das auch sehen, gibt es dazu ein kleines Bildchen.
Der Pfeil für die Klappfunktion kommt vom Browser. Leider auch dieser komische gelbe Rahmen, den man ums Verrecken nicht wegbekommt. Da werden die Designer aufheulen, wenn sie den mal zu Gesicht bekommen. Ach ja, die Geschwindigkeit kann man ebenfalls nicht beeinflussen. Auch eine Animation per JavaScript ist meines Wissens nicht möglich.
3. <mark>
- 16.0
- 12.0
- 5.1
- 22.0
- 9.0/10.0
Damit kann man einen Textabschnitt farblich markieren. Der Standardwert ist gelb, aber das kann man wunderbar mit CSS formatieren.
Beispiel
Hier kommt Text mit einem farblich markierten Bereich.
<p>
Hier kommt Text mit einem <mark>farblich markierten</mark> Bereich.
</p>
4. <meter>
- 16.0
- 12.0
- 22.0
Dieses Tag stellt eine Messung innerhalb eines Bereichs dar. Es handelt sich dabei also um einen prozentualen Anteil.
Beispiel
<meter min="128" max="352" value="240">50%</meter>
Erläuterung
<meter>
benötigt drei Attribute. min
für den Anfangs- und max
für den Endwert. value
stellt dabei den aktuellen Stand dar. Für Browser, die damit nicht klarkommen, kann man den Prozentwert angeben.
Für alle Fälle gibt es noch ein Bildchen dazu.
Die Berechung
... erfolgt ausgehend vom min
-Wert. Also (value - min) / (max - min)
.
Eine Anmerkung
Zu den Attributen min
und max
werde ich mich später ausführlich auslassen. Also habt ein klein wenig Geduld.
5. <progress>
- 16.0
- 12.0
- 5.1
- 22.0
- 9.0/10.0
Im Gegensatz zu <meter>
handelt es sich hier um eine Fortschrittsanzeige. Darum gibt es hier auch keinen min
-Wert.
Beispiel
<progress id="progressBar" max="100" value="63">63%</progress>
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt