Benutzbarkeit von HTML5-Elementen, aktueller Stand

0 | 1 Kommentar | 4674 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Benutzbarkeit von HTML5-Elementen, aktueller Stand" mit Ihrem Wissen!

Anzeige Hier werben

Viele der Elemente von HTML 5 wären auch für aktuelle Seiten interessant. Die Elemente zur Seiteneinteilung (<header>, <nav>, <article>) beispielsweise könnten schon jetzt als Ersatz für <div>-Blöcke mit entsprechender Klasse eingesetzt werden. Zusätzliche Elemente zur sauberen Formatierung von Texten (wie <figure>) können außerdem die Notwendigkeit eigener Kreationen nehmen oder zumindest als Vorlage dienen. Grundsätzlich ist die Unterstützung für die neuen Elemente bisher aber noch von keinem Browser wirklich gegeben, auch wenn daran gearbeitet wird.

Welche Elemente können überhaupt verwendet werden

Natürlich können ohne Browser-Unterstützung nur Elemente verwendet werden, die sich rein per CSS so umformatieren lassen, dass sie die gewünschte Funktion auch grafisch wiedergeben. Das ist bei einigen Elementen wie <audio>/<video> natürlich unmöglich, weshalb hier weiterhin <object> verwendet werden muss. Auch <meter>, <source> und <progress> können nicht ohne weiteres verwendet werden, da hier spezielle Unterstützung durch die Browser notwendig ist. Allein <canvas> hat schon Einzug in einige Browser gehalten.

Andere Elemente spiegeln nur die Struktur des Dokuments wieder (<header>, <section>, <article>, <figure>, ...). Diese Elemente benötigen teilweise keine besondere Formatierung. In HTML5 sind die Elemente als Block-Level-Elemente angelegt, was sich per CSS leicht nachrüsten lässt. Erst wenn kompliziertere Formatierung (Positionierung, Hintergrundbilder für <header>, ...) ins Spiel kommt müssen diese Elemente wirklich im Detail per CSS anpassbar sein.

Unbekannte Elemente, was macht der Browser?

Firefox2Fehlerhaft3Unterstützt3.1Unbekannt
IE6Fast7Fast8Unbekannt
Opera9Unterstützt9.5Unbekannt
Safari3Unterstützt3.1Unbekannt4Unbekannt
8%
Verwendbarkeit: HTML5 Struktur-Elemente

Die meisten HTML5-Elemente sind für Browser bisher unbekannt. Je nach Browser kann es deswegen zu Fehlinterpretationen der Elemente kommen oder einige Dinge nicht funktionieren.

Firefox

Firefox 2 hat Probleme mit HTML5-Block-Level-Elementen, die weitere Block-Level-Elemente enthalten. So wird folgender Code nicht funktionieren:

 
Dieses Beispiel ausprobieren
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        article { background-color: red; display: block; min-height: 10px; }
    </style>
</head>
<body>
    <article>
        <h1>Artikeltitel</h1>
        <p>Artikeltext</p>
    </article>
</body>
</html>

Firefox wird hier <article> intern vor dem <h1> wieder schließen, da das Element Block-Level-Elemente enthält. Im Live-DOM-Viewer kann man den Quelltext leicht variieren und den Fehler beobachten.

Im Firefox3 ist dieses Problem nun gelöst.

Der Fehler tritt nicht auf, wenn XHTML5 ausgeliefert wird, sprich mit dem MIME-Type application/xhtml+xml sind auch diese Elemente im Firefox nutzbar. Allerdings verhindert dieser MIME-Type die korrekte Funktionsweise im Internet Explorer, dieser bietet dann einen Download-Dialog an, die Seite ist hier also unbenutzbar.

Internet Explorer

Der Internet Explorer hat keine Probleme mit fremden Elementen, allerdings lassen sie sich nicht per CSS formatieren. Durch einen Zufall wurde von Sjoerd Visscher eine Ausnahme zu dieser Einschränkung entdeckt. Erstellt man per Javascript ein Element, so ist dieses per CSS formatierbar. Gleichzeitig werden alle Elemente des gleichen Typs formatierbar, unabhängig davon, ob das erstelle Element jemals in den DOM-Baum eingebunden wurde.

<article> per js formatierbar machen  
Dieses Beispiel ausprobieren
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        article { background-color: red; display: block; }
    </style>
    <script type="text/javascript">
        /* Ohne dieses Script ist das Element "article" nicht formatierbar */
        document.createElement('article');
    </script>
</head>
<body>
    <article>
        <h1>Artikeltitel</h1>
        <p>Artikeltext</p>
    </article>
</body>
</html>

Der nötige Javascript-Code lässt sich einfach über Conditional Comments einbinden.

Opera/Safari/...

Keine Probleme/Sonderheiten bekannt.

Fazit

Obwohl HTML5 selbst noch nicht fertig ist lassen sich einige Elemente bereits jetzt einsetzen. Hierbei muss allerdings auf Browser-Unterschiede geachtet werden. Damit die Seite auf allen Browsern funktioniert müssen aber derzeit wohl noch serverseitige Browserweichen (MIME-Type) oder clientseitige Workarounds (Elemente im IE) nötig.

Die Verwendung von HTML5-Elementen bleibt somit wohl bis auf weiteres privaten Webseiten oder Testseiten vorbehalten. Von einem produktiven HTML5-Einsatz ist derzeit noch abzuraten. Problematisch können die Elemente später werden, falls sie eine Standardformatierung bekommen, die vom eingesetzten CSS abweicht.

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "Benutzbarkeit von HTML5-Elementen, aktueller Stand" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Benutzbarkeit von HTML5-Elementen, aktueller Stand" hier bearbeiten.

Mitarbeiter

Kommentare: Benutzbarkeit von HTML5-Elementen, aktueller Stand

Neuen Kommentar schreiben
Sehr interessant
Beantworten

Das Problem mit den nicht stylebaren Elemente kannte ich, den Workaround nicht.

Eine weiter idee wäre es namespaces zu verwenden, dann kann man auch unbekannte im IE Elemente stylen.

Thomas H am 25.01.2008 um 19:50