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