CSS3

Was ist CSS3?

Bei CSS3 (Cascading Style Sheets 3) handelt es sich um die aktuelle Version der Stylesheet-Sprache CSS. Grundsätzlich bezeichnet der Begriff CSS Formatvorlagen für Webseiten. Dazu zählen beispielsweise Schriftarten, Farben oder Zeilenabstände. Gegenüber dem Vorgänger CSS2.1 zeigt CSS3 einige Neuerungen, von denen Schatten, Verläufe und neuartige Layouts nur einige sind. Bei der Verwendung gilt es zu beachten, welche Browser, welche konkreten CSS3-Layouts, Eigenschaften und Module unterstützen.

Überblick und Allgemeines

CSS (aus dem Englischen: Cascading Style Sheets: gestufte Gestaltungsbögen ist eine Sprache, die häufige Anwendung zur Gestaltung einer Webseite erfährt. Als aktuellste Version der Sprache Cascading Style Sheets erweitert CSS3 die Vorgängerversion CSS2.1 um einige Neuheiten. Abgerundete Ecken, erweiterte RGB-Farben, Transparenz oder verschiedene Verläufe und Übergänge sowie Animationen sind einige der Kennzeichen der neueren Version.

Grundsätzlich bezeichnet CSS verschiedene Formatvorlagen für die Gestaltung von Webseiten. Die Seiteninhalte werden typischerweise in HTML entworfen und strukturiert, bevor sie anschließend in CSS ihre Formatierung erhalten. Hierbei lässt sich das gleiche mit CSS erstellte Layout mehreren Seiten zuordnen, ohne dass es für jede einzelne Webseite separat zu definieren wäre. CSS3 ermöglicht somit eine moderne Form des Webdesigns, die Entwicklern einiges an Arbeit erspart. Grafiken, die bisher separat zu erstellen waren, sind in einigen Fällen nicht mehr erforderlich. Ebenso lassen sich Schriften, Verläufe und Schatten mit wenigen Klicks erstellen und einfügen. Auch Animationen und verschiedene Designs lassen sich in CSS3 generieren. Hierbei sind unterschiedliche Auflösungen möglich, sodass die Elemente auch für die Darstellung auf mobilen Endgeräten optimiert werden können.

Neben dem Design unterstützt CSS3 die Entwickler damit auch in der Ausrichtung der Inhalte auf verschiedene Arten von Geräten. Auch die Erstellung von Web-Apps erfährt mit CSS3 neue Möglichkeiten und Auflösungen.

CSS und seine Grundlagen

CSS stellt ähnlich wie HTML keine Programmiersprache im engeren Sinne dar. Ebenso handelt es sich nicht um eine Markup-Sprache. CSS gehört in die Kategorie Stylesheet-Sprache. Diese ermöglicht es, das konkrete Aussehen der Elemente auf einer Seite zu definieren. Beispielsweise lassen sich Inhalte an bestimmten Stellen anzeigen. Hintergründe lassen sich für Webseiten und Unterseiten festlegen und mit Farben anreichern und die Art und Farbe der Webseitentexte lassen sich nach Belieben verändern.

CSS befindet sich seit Jahren im Entwicklungsstadium und basiert auf mehreren Modulen. CSS2 wurde von 2002 bis 2011 entwickelt, bis es vom W3C (World Wide Web Consortium) empfohlen wurde. Es existiert eine spezielle CSS Working Group im W3C, deren Hauptaufgabe es ist, die Sprache in mehrere Module (Bausteine) zu untergliedern. Hierbei stellt jedes Modul eine Art eigenständigen Teil innerhalb von CSS dar und wird eigenständig der Standardisierung zugeführt. Sobald neue Funktionen erforderlich sind, werden neue Module hinzugefügt. Einige der Module erfreuen sich bereits einer Empfehlung durch das W3C, während sich andere noch in einem früheren Entwicklungsstadium befinden.

CSS und seine Funktionsweise

Cascading Style Sheets funktionieren gemäß ihres Namens als aufeinander folgende beziehungsweise hintereinander geschaltete Gestaltungsvorlagen. Ihre Aufgabe ist die Gestaltung einer Website. Dies geschieht unabhängig von der Seitenstruktur, deren Erstellung via HTML erfolgt. CSS eignet sich, sämtliche Elemente einer Webseite zentral zu verwalten und zu steuern. Parameter wie Schriftgrößen, Abstände zwischen Zeilen oder Abschnitten oder auch Hintergrundbilder und Animationen lassen sich festlegen und modifizieren oder anpassen.

Cascading Style Sheets dienen weiterhin dazu, Inhalte responsiv für unterschiedliche Ausgabe-Geräte zu optimieren. Auf diese Weise lassen sie sich sowohl auf einem PC als auch auf Smartphones, Tablets oder Druckern gut lesbar darstellen. Grundsätzlich kann ein und dieselbe Webseite allein durch unterschiedliche CSS-Operationen oder Designvorlagen ein unterschiedliches Erscheinungsbild annehmen.

Neuerungen in CSS3 gegenüber den Vorgängern

Die gegenüber CSS2.1 vorgenommenen Neuerungen beinhalten im wesentlichen Features, die Webdesignern die Arbeit erleichtern. Die meisten Protokolle, Standards und Sprachen im Internet haben heute einen anderen Stellenwert sowie eine andere Verwendung als ursprünglich angedacht. Dies betrifft auch CSS sowie HTML. Die Eigenschaften dienen dazu, das Aussehen der Webseite komfortabel zentral zu verwalten. Vormals stellten Elemente wie hervorgehobene Tabellenzeilen oder abgerundete Ecken größere Herausforderungen dar, an denen Webdesigner längere Zeit zu arbeiten hatten. Mittels CSS3 lassen sich solche Parameter problemlos realisieren.

Eine weitere hilfreiche Neuerung in CSS betrifft Media Queries. Diese dienen der Darstellung der Seite auf dem Bildschirm nach Maßgabe des Betrachters. Zwar ist es bereits seit Längerem möglich, medienbezogene Stylesheets über CSS festzulegen, doch waren diese bis dato nicht auf die Ausgabe auf Smartphones und anderen mobilen Endgeräten ausgelegt. Media Queries ermöglichen eine Ermittlung der Auflösung, der Ausmaße des Wiedergabegeräts sowie der Ausrichtung des genutzten Bildschirms oder Browserfensters. Bei Bedarf sind mit Media Queries auch Anpassungen an diese Faktoren möglich.

Hilfreich ist die Neuerung der mehrspaltigen Layouts. Bis dato war es in CSS vergleichsweise kompliziert, neue Layouts zu entwickeln, wenn sich sämtliche Spalten an die längsten Inhalte anpassen sollten. Dies ließ sich nur über Tabellen sowie diverse Tricks realisieren. CSS3 bietet hingegen eine einfachere Möglichkeit. Die Option CSS Tables ermöglicht es den Anwendern, die Vorzüge eines Tabellen-Layouts mit der Umgebung und Flexibilität von Cascading Style Sheets zu verbinden.

Was die Verwaltung der Schriftarten betrifft, wird es mittels @font-face möglich, eine Reihe neuer Schriftarten innerhalb von Webseiten anzuwenden. Dies betrifft auch solche Schriftarten, die bislang nicht auf dem PC des Besuchers oder Betrachters installiert sind. Auch solche Schriftarten werden dem Betrachter bei Aufruf der Webseite angezeigt. Hierbei sollte die entsprechende Schriftart im Format TrueType auf den Web-Server geladen werden.

Als erste CSS-Version unterstützt CSS3 auch Animationen. Während Animationen bisher im Wesentlichen via JavaScript zu implementieren waren, ändert sich dies unter CSS3. Somit lassen sich Änderungen zwischen unterschiedlichen Einstellungen in CSS nicht nur auf abrupte Weise, sondern angereichert mit Animationen ausführen. Weitere neuere Entwicklungen in CSS3 umfassen die Möglichkeit, Schlagschatten anzuwenden und Farbverläufe zu steuern. Ebenso sind Rotationen sowie (halb-)transparente Farben für Rahmen und Hintergründe in CSS3 möglich.

Vorteile und Stellenwert von CSS3 im Online-Marketing

Im Zusammenhang mit der Suchmaschinenoptimierung sowie im Online-Marketing spielt CSS aufgrund der Trennung von Inhalt und Design eine herausragende Rolle. Das Ranking in den Suchergebnislisten profitiert von dieser klaren Trennung, da sie zur Reduktion des Umfangs des HTML-Quellcodes beiträgt. Die Formatierung sowie das Layout werden in eine spezielle .css-Datei ausgelagert, sodass diese nicht mehr Gegenstand des HTML-Codes ist. Der schlankere Quellcode trägt zur Optimierung der Ladezeit bei.

Ein schneller Aufruf der entsprechenden Webseite erhöht die Usability beziehungsweise die Nutzererfahrung, die ein wesentlicher Rankingfaktor für Suchmaschinen ist. Die User Experience profitiert weiterhin vom einheitlichen Webauftritt, den der CSS-Einsatz ermöglicht. Ganz gleich, über welche Kanäle oder welches Endgerät ein Besucher auf die Webseite gelangt, präsentiert sich die Webpräsenz schlüssig. Daher zählt die Arbeit mit Cascading Style Sheets zu einem der wesentlichen Faktoren der Onpage-Optimierung.

Die Flexibilität in der Seitengestaltung mit Cascading Style Sheets ist ein weiterer Vorzug von CSS3. Die Optimierung der Seite für sämtliche Ausgabegeräte bedingt, dass große Monitore am PC die Webseite ebenso gut darstellen können wie kleinere Displays mobiler Endgeräte wie Smartphones und Tablets.

Im Rahmen der Suchmaschinenoptimierung ist es weiterhin von Relevanz, einen durchgängig validen Programmcode zu haben. Das Cascading Style Sheet gehört zu den etablierten Standards, womit es sämtliche Voraussetzungen für einen validen Code erfüllt. Suchmaschinen überprüfen die Entsprechung des Codes mit formalen Richtlinien. Hierbei werden unter anderem die Standards des W3C herangezogen. Weiterhin wird der HTML-Code auf Fehler überprüft.

Weitere Entwicklung

Die Entwicklung des CSS-Standards ist ein fortlaufender Prozess. Selbst einige Elemente älterer CSS-Standards werden von einigen Browsern nicht vollumfänglich unterstützt oder korrekt interpretiert. Im Gegensatz zu seinen Vorgängern ist CSS3 modular aufgebaut. Nur für einige der Module liegt eine Recommendation (Empfehlung) durch das World Wide Web Consortium vor. Gleichermaßen unterstützen die meisten modernen Browser die meisten der CSS3-Module. Weitgehend unterstützte Standards umfassen CSS Color Level 3 sowie die Media Queries.

Im Hinblick auf die zukünftige Entwicklung hat die CSS-Arbeitsgruppe des W3C bereits im Jahr 2012 klargestellt, dass es kein CSS der Version 4 geben wird. Stattdessen wird der Standard fortentwickelt, indem die einzelnen Module in CSS separat optimiert werden. Der übergeordnete Standard behält den Namen CSS3.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte