HTML5 erste Versuche
Geschrieben von: Angie Radtke in Ungetagged am Apr 28, 2009
HTML 5 bewegt sich mit großen Schritten vorwärts - Zeit eine 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 diese 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 ungekannten 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 die 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 relative 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ß
Artikelinformationen
- Trackback(1)
- TrackBack URI für diesen Eintrag
-
Artikel aus anderen Blogs
1. Erste Experimente mit HTML 5
Von HTML 5 ist am 23.April 2009 eine neue Working Draft (Entwurf in Arbeit) veröffentlicht worden. Es ist eine grosse Überarbeitung der Codiersprache Hypertext Markup Language (HTML) mit welcher man Webseiten baut. In der... - Kommentare (2)
- RSS feed Kommentare