Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 21

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.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden