CSS3 und die neuen Browser: Was ist möglich?

Vor wenigen Wochen konnte der gemeine Webworker ein seltenes Naturschauspiel beobachten: Die Browser aus dem Hause Microsoft, Mozilla und Google erhielten fast zeitgleich ein großes Update auf die nächste Version.

Was für normale Internetnutzer wahrscheinlich wenig bemerkenswert ist und kaum wahrgenommen wird, ist für Webentwickler ein wichtiges Event. Schließlich geht es hier um ihr Werkzeug, ihre Arbeit und ihren Erfolg zu gleichen Teilen. Wo der Maler durch die Leinwand oder der Bildhauer durch die Schwerkraft eingeschränkt wird, so werden die Grenzen des Webdesigner oder Webentwicklers durch den Browser definiert. Das Problem an der Sache: Jeder Browserhersteller definiert andere Grenzen.

Das Browser-Update im Detail

Wie bereits gesagt, gab es in den letzten Wochen gleich drei Updates der bekanntesten Browser. Google Chrome aktualisierte von der Versionsnummer 9 auf die 10 und führte einige kleinere Änderungen durch. Zugegeben, bei meinem Lieblingsbrowser fiel die Aktualisierung am kleinsten aus und war für viele deshalb wohl etwas unspektakulärer. Hier muss man aber dazusagen, dass Chrome verschiedene bei den beiden Mitbewerbern hinzugekommen Funktionen schon seit etlichen Vorversionen beherrschte. Geschwindigkeit, Unterstützung der Webstandards und Oberfläche waren und sind hier einfach vorbildlich.

Nach dem Chrome war der Internet Explorer von Microsoft an der Reihe. Hier fand mit Abstand die wichtigste Veränderung statt. Das lag aber nicht daran, dass der neue Internet Explorer 9 so viel besser ist als die Konkurrenz, sondern das der alte IE8 so unglaublich mies war. Beim IE9 hat Microsoft zum ersten Mal einiges richtig gemacht, aber lange nicht alles: Die Unterstützung von Webstandards und HTML5/CSS3 ist unter den Dreien immer noch am schlechtesten.

Der dritte Kandidat, welcher erst vor anderthalb Wochen geupdatet wurde, ist der Mozilla Firefox. Beim Open-Source-Browser gab es einen Versionssprung von der 3 auf die 4. Obwohl das Update hier nicht so wichtig war wie beim Internet Explorer, empfand ich es persönlich trotzdem als notwendig. Gerade gegenüber dem Google Chrome zeigte der Firefox 3 immer wieder Schwächen in Bezug auf Geschwindigkeit und Webstandards.

CSS3 und das Browser-Update

Für mich persönlich, der bei seinen Webprojekten schon jetzt strikt HTML5 und CSS3 verwendet, war das Browser-Update unglaublich wichtig. Endlich kann ich lauter native CSS3-Befehle nutzen, ohne Weichen für Firefox oder Internet Explorer bereitstellen zu müssen.

Darum soll es auch im heutigen Artikel gehen. Ich möchte kurz anreißen, an welchen Stellen die Verwendung von CSS3 ab sofort Sinn macht und wie schnell sich auf diesem Wege Layouts umsetzen lassen, für die man vor wenigen Wochen noch komplexe png-Grafiken benötigt hätte.

Fangen wir mit einer generellen Sache an. Auch vor dem Browser-Update war die Verwendung von CSS3 bereits möglich. Jedoch musste man den einfachsten Befehlen bestimmte Zeichenketten voranstellen, um ein Ergebnis in allen Browsern zu erreichen. Das dumme daran war, dass keiner der wichtigen Browser die native Schreibweise berücksichtige und man jedem eine eigene Fall-Back-Lösung zuordnen musste. Meistens war das -moz- oder -webkit-. Wollte man browserübergreifend eine abgerundete Box realisieren, so benötigte man drei Zeilen fast identischen CSS-Quellcode:

Runde Ecken mit CSS3

Wo wir auch schon bei der ersten Aufgabe wären, die sich ab sofort mit CSS3 kinderleicht realisieren lässt: Einen Container mit runden Ecken!

Ich kann mich noch an Tage erinnern, also man drei Grafiken (Kopf, Mitte, Fuß) benötige, um einen div-Container mit runden Ecken zu versehen. Die Hintergrundfarbe oder Randfarbe konnte man im Nachhinein natürlich nicht mehr so leicht verändern und wenn man den Container in der Breite flexibel halten wollte, benötigte man sogar neun verschiedene Grafiken.

Das CSS3-Attribut border-radius ist dagegen ein echter Segen. Und seit dem großen Browser-Update können wir auf die drei Zeilen aus dem obigen Beispiel verzichten und kommen mit einer einzigen aus. Die folgende Lösung funktioniert genau wie alle folgenden im neuen Internet Explorer, Firefox und Chrome.

Schlagschatten mit CSS3

Auch beim Schlagschatten lassen sich mit sehr wenig Quellcode optisch tolle Ergebnisse erzielen. Dank CSS3 und dem box-shadow-Attribut kann man eine schlichte graue Box mit runden Ecken und etwas Schatten viel moderner präsentieren.

Musste man vor dem Browser-Update auch hier mit mindestens drei Zeilen Quellcode arbeiten, kommt man nun mit einer aus. Schauen wir uns den Schlagschatten im Detail an:

Zwei Hintergründe mit CSS3

Ich will ehrlich zu euch sein: Im Hinterkopf hatte ich zwar noch, dass es mit CSS3 möglich sein soll, mehrere Hintergründe für ein Element zu definieren. Das erste Mal ausprobiert habe ich es aber auch gerade erst im Zuge der Recherche für diesen Artikel.

Mein Fazit: Ich bin begeistert. Diese Funktion werde ich in Zukunft sehr häufig nutzen, habe ich sie mir doch schon etliche Male herbeigesehnt. Die Syntax ist sogar recht simpel, es kommt nicht einmal ein neues CSS3-Attribut zum Einsatz, sondern die gewohnte background-Eigenschaft. Schaut selbst:

Hintergrundbild-Größe ändern mit CSS3

Ebenfalls neu in CSS3 ist die Möglichkeit, die Dimensionen eines Hintergrundbildes zu ändern. Dadurch erschließen sich wiederrum vollkommen neue Einsatzmöglichkeiten.

Auch die Syntax ist wieder sehr einfach gehalten: Für das Ändern der Größe eines Hintergrundbildes ist die CSS-Eigenschaft background-size neu dazugekommen. Schauen wir uns das Beispiel an, in dem wir das definierte background-image auf 150 Pixel in der Breite und 50 Pixel in der Höhe skalieren.

Text-Schatten mit CSS3

Zugegeben, das Attribut text-shadow ist keine CSS3-Eigenschaft. Dieses Attribut gibt es bereits in den CSS2-Spezifikationen und die Webkit-Browserengine (Safari & Chrome) unterstützt es bereits seit der ersten Version.

Und noch einen Wehrmutstropfen gibt es zu beachten, wenn man per CSS3 einen Text-Schatten vergeben möchte. Diese Eigenschaft funktioniert noch NICHT im Internet Explorer 9. In diese Liste möchte ich text-shadow trotzdem mit aufnehmen. Vor allem um zu zeigen, dass der IE9, trotz der ganzen positiven Presse-Kritik, eben doch noch etliche Schwächen in Sachen Webstandards hat.

Weitere CSS3-Eigenschaften

In den komplexen CSS-Spezifikationen des W3C schlummern noch viele weitere tolle Eigenschaften. Einige davon lassen sich bereits heute nutzen – jedoch nur mit diversen Browserweichen und unterschiedlichen Ergebnissen in den Browsern.

Darum sollte es in diesem Beitrag nicht gehen. Ich wollte aufzeigen, was heute bereits mit CSS3 möglich ist und sich vor allem praktisch schon einsetzen lässt. Bis auf das letzte Beispiel funktionieren alle CSS-Eigenschaften in den neuesten Browser-Versionen. Zumindest den Einsatz von box-shadow und border-radius kann ich mittlerweile mit bestem Gewissen empfehlen.

Für Webworker war das „Naturschauspiel“ Browser-Update also eine echte Erleichterung. Viele tägliche Aufgaben lassen sich nun endlich ohne den Einsatz von Grafiken und somit weitaus performanter und schneller lösen.

Trotzdem habe ich beim Gedanken an den Internet Explorer weiterhin Bauchschmerzen. Es ist zu verkraften, wenn einige CSS3-Eigenschaften im Google Chrome nativ noch keiner Unterstützung erfahren. Hier ist es nämlich so, dass fast jeden Monat eine neue Version erscheint, die wieder weitere Eigenschaften unterstützt. Wenn ich nun aber an Microsoft denke, die bis zum Internet Explorer 10 erst wieder über ein Jahr verstreichen lasse und bereits jetzt mit der Unterstützung von CSS3-Standards nachhängen, so habe ich Angst, dass der IE9 der neue Internet Explorer 6 werden könnte.