HTML5 erste Versuche
HTML 5 bewegt sich mit großen Schritten vorwärts - Zeit einen ersten Blick drauf zu werfen und seinen Funktionalitätsumfang in der Praxis zu testen. Gerade die semantisch bedeutungsvollen Elemente interessieren mich im Hinblick auf die praktische Zugänglichkeit und meiner Arbeit mit Joomla sehr.
Hier fallen mir sofort Elemente wie <nav> für die Navigation,<header>, <footer>,<aside> für Zusatzinformation, <section> für Bereiche und <article> für Inhalte auf. Allein diese Elemente stellen eine große Bereicherung dar. Das Element <article> scheint mir zu Beginn von seiner Bedeutung her klar zu sein. Nach einiger Zeit der Recherche lande ich auf der Seite von W3Cschools und lese, dass dieses Element nur für extern eingebundene Artikel zu Verfügung steht. Ich frage mich, ob ich etwas falsch verstanden habe. Nach einiger Recherche stosse ich auf die entsprechende Dokumentation und es wird klar, es handelt sich nicht um externe Artikel, sondern um in sich abgeschlossene Inhalte und somit war meine anfängliche Vermutung genau richtig. Ich freue mich und kann dieses Element wunderbar für die Artikelübersichten in Joomla einsetzen.
Auch das neue Element <figure> zum auszeichnen von multimedialen Inhalten samt Grafiken finde ich prima. Jedes <figure> Element kann eine beschreibende legend haben. Es fragt sich also, ob HTML 5 schon jetzt einsetzbar ist. Aus diesem Grunde habe ich damit herumexperimentiert und bin auf die ersten Hindernisse gestossen. Während Opera, Firefox, Safari (jeweils in der aktuellen Version) und der Internet Explorer 8 wunderbar mit den Elementen umgehen können, stellen sich IE6 und 7 quer. Die Elemente lassen sich nicht per CSS ansprechen und stylen, da sie ihnen unbekannt sind.
Zur Lösung dieses Problems gibt es aktuell 2 Möglichkeiten. Entweder werden um diese Elemente alt hergebrachte <div> Elemente eingefügt und entsprechend gestylt oder man fügt per Javascript die unbekannten Elemente ins DOM des Browsers hinzu. Der Nachteil dieser Methode dürfte bekannt sein.
<!--[if lt IE 8]>
<script type="text/javascript">
document.createElement('section');
document.createElement('nav');
document.createElement('article');
document.createElement('header');
document.createElement('footer');
document.createElement('aside');
document.createElement('figure');
document.createElement('legend');
</script>
<![endif]-->
Aber gut, es funktioniert zumindestens mit Einschränkung.
In Zukunft ist zu überlegen, ob man den zusätzlichen Quelltext beim Einfügen von <div> - Elementen in Kauf nimmt oder auf die Javascriptmethode zurückgreift.
Aber auch der Firefox hat seine Probleme. In meinen Testbeispiel füge ich innerhalb eines <figure> elements
eine legend ein, das Resultat - meine Seite fiel völlig auseinander.
Firefox fügt, wenn er auf <legend> trifft, automatisch ein fieldset in seinem DOM ein, schließt es aber nicht entsprechend.
Die Lösung war relativ simpel: ein <div> um das <figure> Element löst das Problem schnell und einfach.
Mein Ergebnis kann man sich unter http://www.der-auftritt.de/kunden/html5/beezhtml5.html ansehen. Viel Spaß