Entwicklung & Design

HTML5 und CSS3 heute schon nutzen: Hilfskonstruktionen für Helden

HTML5 und CSS sind in aller Munde, denn die beiden neuen Webstandards bieten Entwicklern spannende technologische Möglichkeiten. Da sie sich aber noch im Entwicklungsstadium befinden, ist die Implementierung in den Browsern bisher noch lückenhaft – auch bei den Teilen, die bereits als vollständig gelten. Wir zeigen, wie man sie dennoch heute schon flächendeckend einsetzen kann.

Da aktuelle Browser sowohl HTML5 als auch CSS3 bisher nur lückenhaft unterstützen, sind beide Technologien mit Bedacht einzusetzen. Man sollte darüber hinaus stets bedenken, dass ältere Browser sie noch gar nicht verstehen.

CSS-Vendor-Prefixes

Ein gutes Beispiel dafür sind CSS-Vendor-Prefixes, also kurze Kennzeichnungen vor CSS-Eigenschaften, die auf den Hersteller des Browsers hinweisen. Zur Standard-Angabe „border-radius“ gehören „-webkit-border-radius“, um Webkit-Browser (also Safari, Chrome) anzusprechen, sowie „-moz-border-radius“, um Mozilla-Browser wie Firefox anzusprechen.

Beide Implementationen unterscheiden sich etwas und wurden daher entsprechend gekennzeichnet. Das W3C empfiehlt dieses Vorgehen, solange Eigenschaften noch nicht komplett besprochen und finalisiert sind. Opera sieht die Arbeit der Boxes- und Borders-Arbeitsgruppe für weitgehend beendet an, sodass der neue Opera 10.5 die Eigenschaft bereits ohne Prefix interpretiert.

Es ist gar nicht so einfach, immer an alle Prefixe zu denken. Oft fällt erst auf, dass einige fehlen, wenn die Qualitätskontrolle in verschiedenen Browsern ansteht. Im schlimmsten Fall muss der Entwickler aufwändige Nachbesserungsarbeiten vornehmen. Abhilfe schaffen CSS3-Generatoren wie css3generator.com oder css3please.com. Sie zeigen anhand von Beispielen, wie die verschiedenen CSS3-Bestandteile zusammengestellt werden sollten, um einheitliche Ergebnisse zu erzielen. Bei „CSS3, please!“ tippt man beispielsweise zwei Farben ein, um einen Verlauf im Hintergrund des Elements zu definieren; dynamisch werden auch die anderen Werte angepasst, einschließlich der Angaben für den Internet Explorer.

So klar liegt der Fall bei HTML5 nicht. Hier ist das Wissen um die Fähigkeiten der Browser Trumpf, doch einige Tools helfen auch hier, den Alltag etwas erträglicher zu gestalten.

Semantische HTML5-Elemente nutzen

HTML5 bringt eine Reihe neuer Elemente mit, die man aber mit dem Internet Explorer und Firefox 2 nicht mit CSS gestalten kann. Das liegt an deren Parsern, die nicht so funktionieren wie in anderen Browsern, die die Elemente intakt lassen und erstmal als Inline-Elemente darstellen.

Aus „<article>Text</article>“ wird im DOM der Browser mit falschem Algorithmus:
„<article></article>Text</article><//article>“. Das heißt, dass man das Wort „Test“ per CSS zumindest mit dem Selektor „article {}“ nicht mehr ansprechen kann. Firefox 2 kann mittlerweile zwar vernachlässigt werden, falls man die neuen Elemente aber auch in diesem Browser nutzen will, kommt man nicht umhin, die Webseiten als XML ausliefern zu lassen, allerdings mit entsprechenden Problemen wie Fehlerintoleranz [1].

„CSS3, please!“ hilft dabei, CSS-Angaben browserübergreifend zu formulieren.

„CSS3, please!“ hilft dabei, CSS-Angaben browserübergreifend zu formulieren.

Auch der Internet Explorer benötigt eine Extrawurst: Elemente, die er nicht kennt, muss man ihm erst per JavaScript ankündigen:

JavaScript
document.createElement('article');

Listing 1

Im Kopfbereich führt das dazu, dass der Parser des IE kein Problem mit dem Element mehr hat. Zum Glück gibt es bei Google Code eine JavaScript-Bibliothek [2], die Entwicklern diese Arbeit für alle HTML5-Elemente abnimmt und die auch an aktuelle Entwicklungen angepasst wird. Die Bibliothek ist schnell eingebunden:

JavaScript
<!--[if lt IE 9]>
<script xsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Listing 2

Als Resultat hängt die Darstellung der Seite von aktiviertem JavaScript ab. Ohne JavaScript stellt der Browser die Seite linearisiert dar.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.