Für eine optimale Darstellung dieser Website benötigen Sie einen modernen Webbrowser wie Mozilla Firefox, Apple Safari, Opera oder den Internet Explorer 8.


datagrid-Element aus HTML5 in Webkit

Update: Das datagrid-Element wurde inzwischen aus der HTML5-Spezifikation entfernt.

Laut ihrem Bugtracker scheint das Webkit-Team momentan ein weiteres der geplanten HTML5-Elemente in ihre Engine zu implementieren. Nach den Elementen audio, video und dem Offline-Support hält nun mit datagrid ein ebenfalls spannendes Element aus dem HTML5-Entwurf bereits vor Verabschiedung des Standards Einzug in einen Browser.

Das neue Element ist durchaus interessant. Zu vergleichen ist es am ehesten mit dem aus älteren HTML-Versionen bekannten table-Element. Das neue Element kann aber Interaktivität enthalten und würde so beispielsweise das Ein- und Ausblenden, Verschieben oder Sortieren zulassen. Funktionen, welche die herkömmliche Tabelle nicht bietet und nur über JavaScript ergänzt werden konnten.

Look Ma – No Scripts!

Zusammen mit der CSS3-Pseudoklasse :nth-child, welche das Ansprechen von beispielsweise jeder 2. Tabellenzeile erlaubt, würde sich der Einsatz von JavaScript zur Steigerung von Funktionalität und Aussehen in Tabellen wahrscheinlich in den meisten Fällen erübrigen. Auch das funktioniert übrigens bereits in den neuesten Webkit-/Opera-User Agents und dem kommenden Firefox 3.5.

Dieser CSS3-Schnippsel würde jede 2. Tabellezeile mit einer roten Hintergrundfarbe versehen. Auch das musste bisher manuell oder über JavaScript gelöst werden:


table tr:nth-child(odd) {
	background-color: red;
	}

Einen Kommentar schreiben