Wie CSS funktioniert

CSS wird vom Browser (der Anwendung, welche der Darstellung von Webseiten dient, z.B. Internet Explorer oder Google Chrome) interpretiert und basierend darauf entschieden, wie die Webseite aussehen sollte. Das bedeutet, dass obwohl CSS im Detail spezifiziert wird, die vielen Browser auf unterschiedlichsten Geräten (Computer, Tablets, Smartphones, ...) dein CSS auf ihre eigene Art und Weise interpretieren. Dadurch wird deine Webseite zwar in großen Teilen aussehen und funktioniert wie sie soll, in manchen Browsern können dennoch Probleme entstehen, weil sie zum Teil von der Spezifikation abweichen.

Da CSS nur eine Spezifikation und kein Gesetz ist, können Browser nach Belieben ihre eigenen CSS-Eigenschaften hinzufügen, wodurch komplexere Gestaltungen vorgenommen werden können. Dies gilt dann jedoch leider nur für den spezifischen Browser, welcher diese Funktionsweise implementiert hat. Diese Methode wird oft von größeren Browsern benutzt, um das W3 (die Organisation, welche viele der Internet-relevanten Spezifikation handhabt, darunter HTML und CSS) dazu zu überreden, solche Funktionalitäten in die nächste CSS-Spezifikation zu übernehmen.

In der Vergangenheit waren die browserübergreifenden Unterschiede beim Rendering-Prozess ein größeres Problem als jetzt. Insbesondere Microsoft Internet Explorer hatte Probleme, der Spezifikation zu folgen, wobei IE6 die größten Probleme hatte. Die Konkurrenten von IE6 sind mit der Spezifikation besser umgegangen, doch aufgrund des großen Marktanteils von IE6 mussten Entwickler Wege finden, um auch diesen Browser und dessen eigensinniges Verhalten zu unterstützen. Glücklicherweise sind die Microsoft-Browser stetig auf dem Weg der Verbesserung.

Dennoch wirst du immer noch auf Unterschiede bei der Darstellung stoßen, insbesondere, wenn du in verschiedenen Browsern auf unterschiedlichen Geräten und Betriebssystemen testest. Deine Webseite könnte im Internet Explorer etwa anders aussehen als in Chrome, und es könnten sogar Unterschiede auftreten, wenn du dir die Seite in Chrome auf verschiedenen Betriebssystemen ansiehst. Genau aus diesem Grund solltest du deine Webseite immer in so vielen Browsern testen wie möglich und außerdem sicherstellen, dass dein CSS validiert (dazu später mehr).

Zusammenfassung

CSS wird mit jeder Anfrage (Request) vom Client interpretiert (in der Regel ein Webbrowser). Da verschiedene Browser verschiedene Parser verwenden, können Webseiten zwischen verschiedenen Geräten und Browsern (und Browser-Versionen) anders aussehen. Teste deine Seite immer in so vielen Browsern wie möglich, und reduziere die Menge der Probleme in deinem Code, indem du den W3-CSS-Validator verwendest.

In diesem Tutorial werden wir nur Eigenschaften und Techniken behandeln, welche gerade in den aktuellsten Versionen von den beliebtesten Browsern verwendet werden können: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox und Apples Safari. Trotzdem: die Tatsache, dass diese Eigenschaften und Techniken von Browsern verstanden werden bedeutet nicht, das sie browserübergreifend gleich interpretiert und verwendet werden. Also merke dir die goldene Regel des CSS: Teste deine Arbeit so viel wie möglich.