CSS, HTML und Javascript mit {stil}

HTML time, details, dialog, output – Textelemente

HTML dialog-Tag, details, progress-Tag, meter, mark

HTML time umfasst die Angabe einer Zeit im Klartext mit einem optionalen maschinenlesbaren Attribut datetime für maschinenlesbare Zeitangaben.

details verbirgt zusätzliche Informationen, die sich der Besucher mit einem Klick auf das summery-Tag anzeigen lassen kann.

HTML5 hat eine Reihe neuer Tags für den Text wie time, dialog und mark mitgebracht und bringt i und b aus HTML4 zurück.

HTML time

time kommt und geht: Das Tag für Zeitangaben wurde zugunsten des unhandlichen data aus dem Standard genommen, weil es u.a. keine vagen Zeitangaben und keine Dauer wiedergeben konnte. Dann wurde das time-Tag wieder freundlich aufgenommen – nicht zuletzt, weil es auch von WordPress und Drupal verwendet wurde.

27.2.2017 ab 19Uhr STRE TDANCE E
Streetdance 27.2.2017 Einlass 19:00 Uhr

Für die Suchmaschinen und für Scripte ist 27.2.2017 nur eine Folge von Ziffern und Punkten. Mit der maschinenlesbaren Zeit im Markup können die Suchmaschinen das Event besser einordnen. Ein Script könnte alle Events auf einer Webseite zu einem Veranstaltungskalender zusammenfassen.

time hat ein eigenes Attribut datetime, das die maschinenlesbare Darstellung des Datums enthält.

Streetdance <time datetime="2017-02-27 19:00">17.2.2016 Einlass 19 Uhr</time>
Der Littard-Markt im <time datetime="2013-11">November 2013</time>
Nacht der Filmemacher <time datetime="2016-02-17T20:00">17 Feb 2016</time>

details und summery

HTML details umschließt Informationen, die der Benutzer einsehen oder verbergen kann – ein Klappmenü. Browser, die details unterstützen, zeigen ein Dreieck als Zeichen, dass weitere Informationen vorhanden sind.

Das summery-Tag ist der sichtbare Kopf – die Überschrift des details-Tag und zeigt bzw. verbirgt die Details.

Neue HTML5-Tags – details

Informationen, die der Benutzer aufklapen kann

HTML5 details und summery sind für kleine Zusammenfassungen gedacht, die der Benutzer anzeigen oder verbergen kann.

details hat ein individuelles HTML-Attribut: open gibt an, ob details geöffnet oder geschlossen an den Benutzer übertragen wird.

Mit dem open-Attribut weist details den Browser an, den Inhalt zunächst geöffnet zu zeigen und dem Benutzer eine Chance zu geben, das details-Tag zu schließen

details { display: block}
   …
<details>
    <summary>Neue HTML5-Tags – details</summary>
    <p>Informationen, die der Benutzer aufklapen kann</p>
    <p>section</p>
    <p>header</p>
    <p>footer</p>
</details>

Von Chrome, Safari, Opera unterstützt, nicht IE, nicht Firefox. Browser, die details nicht unterstützen, zeigen den details-Bereich geöffnet an.

HTML mark

mark hebt einen Text hervor, ähnlich wie strong, aber gelb hinterlegt (highlight) und auffallender.

HTML menu Tag

menu enthält eine Reihe von Menüpunkten – ähnlich den kontext-sensitiven Menüs von Desktop-Anwendungen (wo kontext-sensitive Menüs mit der rechten Maustaste geöffnet werden). Sie sollen nicht wie die Punkte eines Navigationsmenüs (nav) auf andere Seiten führen, sondern den Benutzer Aufgaben durchführen.

Rechtsklick für das Contextmenü
Das Contextmenü wird angezeigt
<menu type="context" id="mymenu" onshow="menuShow()">
	<menuitem label="Neu laden" icon="circle-3.png"></menuitem>
	<menuitem label="Weitergeben" icon="circle-4.png"></menuitem>
	<menuitem label="Mitmachen" icon="circle-5.png"></menuitem>
</menu>

Das Menü könnte dann wie folgt aussehen:

Neu ladenWeitergebenMitmachenSeite speichern unter …Hintergrundgrafik anzeigenAlles markierenSeitenquelltext anzeigenSeiteninformationen anzeigenElement untersuchen

Zurzeit zeigt nur Firefox die drei zusätzlichen Einträge im Kontextmenü.

dialog-Tag

Für viele Aufgaben öffnen Webseiten modale Fenster innerhalb des Browserfensters mit der Hilfe von Javascript und CSS.

Was zu sagen? Nein, allem Anschein nach unterstützt kein Browser außer Chrome Canary den HTML-Dialog bislang.

Oktober
Gans und Wild

Ob nun ein Browser dialog unterstützt oder nicht – dank einiger Zeilen Javascript öffnen alle Browser das dialog-Element. Chrome und Opera (mit der Chrome-Rendering Machine) zeigen das Dialog-Element in einem schwarzen Rahmen als Overlay über dem folgenden Inhalt, ohne den folgenden Inhalt zu verdrängen. Ohne dialog-Unterstützung zeigen die Browser einfach den Inhalt und schieben den folgenden Inhalt nach unten.

Das Dialog-Fenster kann mit CSS aufbereitet werden werden.