Was ist CSS3?

Trennung von Design und Inhalt

Websites gestalten mit Cascading Style Sheets
Websites gestalten mit CSS (© Diana Vogt)

Bei CSS (Cascading Style Sheets) handelt es sich um eine Gestaltungssprache, die in der Regel zusammen mit HTML– und XML-Dokumenten eingesetzt wird. Durch CSS hat man die Möglichkeit, Dokumente mit Form und Farbe zu versehen. Man kann z. B. die Größe und Schriftart des Textes anpassen, eine Hintergrundfarbe oder Rahmen einfügen und vieles mehr.

Die Grundidee von CSS war, das Gestalterische von Inhalt trennen zu können. Gefiel einem die graue Überschrift der Website nach einer Weile nicht mehr, musste man vor CSS jedes einzelne HTML-Dokument aufrufen und dort die Änderung vornehmen. Mit CSS kann man diese Gestaltungsanweisungen in eine separate Datei auslagern. Möchte man nun die Farbe der Überschrift ändern, ändert man die Anweisung in dieser einen Datei und fortan werden alle Überschriften, für die diese Anweisung gilt, in der anderen Farbe dargestellt.

Am 10. Oktober 1994 veröffentlichte der norwegische Informatiker Håkon Wium Lie den ersten Vorschlag für „Cascading HTML style sheets“. Schnell wurde das World Wide Web Consortium (W3C) auf CSS aufmerksam, und es bildete sich ein Entwicklerteam, das an CSS weiterarbeitete. Im Dezember 1996 wurde die CSS Level 1 Recommendation publiziert. Die Formatierungssprache wurde ständig optimiert, somit erschien am 7. Juni 2011 CSS in der Version 2.1 als fertige Empfehlung. Die meisten Webbrowser stellen CSS 2.1 inzwischen korrekt dar. Seit 2000 wird an CSS3 gearbeitet. (Quelle: wikipedia.org) Einzelne Teiltechniken von CSS3 sind bereits jetzt in modernen Browsern verfügbar. Über den Fortschritt der Entwicklung kann man sich hier (W3C) informieren.

Was kann CSS3?

Logo CSS3
Logo CSS3 (Quelle: www.w3.org)

Mit CSS in der Version 3 werden immer mehr Gestaltungsmöglichkeiten eröffnet. Es ist möglich, Texte mit einem Schatten zu versehen oder ganze Objekte zu drehen. Unter anderem kann man nette Überblend-Effekte generieren, Ecken abrunden, oder auch Verläufe vom Browser erzeugen lassen. Hierfür musste man früher erst eine passende Grafik erstellen und diese einbinden. Die Vorteile liegen auf der Hand: Rechenleistung und Arbeitszeit wird eingespart. Zudem sind diese Verläufe verlustfrei skalierbar, was in Zeiten von Responsive Webdesign immer wichtiger wird.

Dabei muss man sich nicht nur auf Verläufe beschränken. Mit CSS3 kann man eindrucksvolle Muster erstellen und z. B. als Hintergrund für die Website einbinden. Auf CSS3 Patterns Gallery kann man sich einige schöne Beispiele ansehen.

Media Queries – der Joker von CSS3

Mit CSS3 stehen uns nun auch Media Queries zur Verfügung. Damit kann man Anweisungen in den Stylesheets auf bestimmte Geräte oder Auflösungen beschränken. Möchte man eine Druckversion einer Website anbieten, kann man mit der Anweisung „@media print“ Formatierungen für den Drucker festlegen. Mit „@media (min-width: 800px)“ kann man für alle Geräte, die eine Auflösung größer als 800px haben, eigene Stylesheets festlegen.

Sinn dieser Media Queries ist, den Anforderungen des Responsive Webdesign gerecht zu werden. Der Inhalt bleibt gleich – mit den Media Queries wird er nur auf verschiedenen Geräten anders dargestellt. Wobei man hier auch wieder die verschiedenen Browser berücksichtigen muss: In den modernen Browsern sind sie bereits implementiert.

Und die Browser?

Da so mancher Browser-Hersteller sein eigenes Süppchen kocht, ist es generell nicht möglich, eine Website mit CSS3 in allen Browsern gleich aussehen zu lassen – oder nur mit erheblichem Mehraufwand. Dem kann man nur begegnen, indem man die Website in jedem Browser zwar gut, aber nicht unbedingt gleich aussehen lässt. Das es sich bei CSS(3) ja „nur“ um eine Formatierungssprache handelt, kann man auf bestimmte neue Effekte, die nicht der Strukturierung dienen, in älteren Browsern auch einfach verzichten.

Fazit

Media Queries
Responsive Web mit CSS3 (fotolia.de – © pizuttipics)

Durch CSS3 kann man eine Website nicht nur hübscher aussehen lassen, sondern auch Rechenleistung einsparen. Man kann den Besuchern des Webauftritts mehr fürs Auge bieten, ohne ein Skript einbinden zu müssen. Ein durch CSS3 generierter Hintergrund frisst lange nicht soviel Performance wie eine Grafik, die man zudem erst noch in einem Bildbearbeitungsprogramm erstellen und fürs Web abspeichern muss. Die verlustfreie Skalierung ist ein weiterer Vorteil, sollen doch Websites auf allen Endgeräten gut aussehen.

Der wichtigste Grund, sich als professioneller Webdesigner mit CSS3 zu beschäftigen, sind die Media Queries. Diese sind unabdingbar, wenn man Websites für mobile Endgeräte optimiert. Ist man bereits fit in CSS, kann man sich die neuen Anweisungen leicht aneignen.

Doch Vorsicht! Nicht in allen Browsern ist CSS3 bereits vollständig implementiert, und wenn, dann auch nur modulweise, da sich die Technologie noch in der Entwicklung befindet.
zurück zu FAQ