Einführung

Was ist CSS?

CSS steht für „Cascading Style Sheets“ und ist eine sog. Stylesheet-Sprache. Stylesheet-Sprachen werden zum Formatieren von Elementen verwendet. CSS ermöglicht die Trennung von Inhalt und Aussehen bei der Gestaltung von Webseiten. CSS ist neben HTML eine der wichtigsten Sprachen zur Erstellung und Gestaltung von Seiten im World Wide Web. Mit HTML werden die einzelnen Elemente einer Webseite erstellt und mit CSS deren Aussehen definiert.

 

CSS wird vom „World Wide Web Consortium“ (kurz W3C) kontinuierlich weiterentwickelt.

Entstehung und Versionen von CSS

Die erste Variante von CSS wurde von Håkon Wium Lie 1994 vorgestellt, der zu dieser Zeit ein Mitarbeiter von Tim Berners-Lee am CERN war. Tim Berners-Lee gilt als der Erfinder von HTML, das er 1989 vorstellte und aus dem das World Wide Web hervorging. Håkon Wium Lie nannte seine Stylesheet-Sprache „Cascading HTML Style Sheets“ kurz CHSS. Später arbeitet Håkon Wium Lie mit Bert Bos zusammen, der an der Entwicklung eines Browsers mit einer eigenen Stylesheet-Sprache arbeitete. 1995 wurde das W3C auf die Beiden und die Entwicklung von CSS aufmerksam. In Zusammenarbeit mit dem W3C wurde dann schließlich 1996 mit der „CSS Level 1 Recommendation“ die erste Variante von CSS veröffentlicht.

1998 wurde „CSS Level 2“ (CSS2) veröffentlicht, was jedoch kaum Anklang bei den Entwicklern von Browsern fand und somit kaum von Browsern unterstützt wurde. Daher fing das W3C ab 2002 an, den Standard zu überarbeiten und veröffentlichte 2011 CSS 2.1, was nach und nach von allen namhaften Browsern unterstützt wurde.

Bereits seit 2000 wird parallel auch an CSS3 gearbeitet und ist modular aufgebaut, wodurch einzelne Bereiche in eigenen Versionen entwickelt werden können. CSS3 ist bis heute (Nov. 2016) noch nicht vollständig verabschiedet. Viele einzelne Bereich von CSS3 sind jedoch schon umgesetzten und werden von den meisten Browsern unterstützt.

Wie funktioniert CSS?

Client-Server-Prinzip

Die Webseiten im World Wide Web bestehen i. d. R. aus HTML-, CSS- und JavaScript-Dateien, die von sog. Webservern bereitgestellt werden. Für das Anfragen, Empfangen und Darstellen von Webseiten werden Webbrowser verwendet. Für die Kommunikation zwischen Webserver und Webbrowser wird das Protokoll HTTP, bzw. die verschlüsselnde Variante HTTPS, verwendet.

Browser-Engine

Das Programm, das innerhalb eines Browsers den HTML-, CSS- und JavaScript-Code in eine darstellbare Webseite umwandelt, nennt sich Browser-Engine (auch Renderer oder Rendering-Engine). Die Stylesheets werden i. d. R. mit CSS beim Webdesign zusammen mit den HTML-Dokumenten erstellt. Wird keine CSS-Datei angegeben, verwenden Browser ihre eigenen Standard-Stylesheets. Eine Browser-Engine verwendet die Struktur und semantische Definitionen der Webseiten-Elemente aus dem HTML-Dokument und die Design-Definitionen aus der CSS-Datei und erstellt daraus die eigentliche Webseite.

Parser

Der Vorgang bei dem aus dem HTML-Dokument die Webseiten-Struktur entsteht wird als Parsen bezeichnet. Auch das Umsetzen der Definitionen aus dem CSS-Dokument wird als Parsen bezeichnet. Somit gibt es für die HTML-Dokumente und für die CSS-Dokumente in der Browser-Engine jeweils einen Parser.

Document Object Model

Beim HTML-Parsing wird basierend auf dem HTML-Dokument ein sog. „Document Objekt Model“ (kurz DOM) erstellt. Das DOM stellt die Webseiten-Struktur als hierarchischen Baum dar. Mit einer von Browsern unterstützten Programmiersprache (i. d. R. JavaScript), kann über das DOM auf die einzelnen Elemente einer Webseite zugegriffen und diese manipuliert werden.

Aufbau einer Browser-Engine

Eine Webseite besteht i. d. R. aus HTML-, CSS- und JavaScript-Dateien, die von einem Webserver an einen Webbrowser übertragen und von der Browser-Engine des Webbrowsers zur eigentlichen Webseite zusammengesetzt werden. Eine Browser-Engine besteht zusammenfassend mindestens aus einem HTML-Parser, einem CSS-Parser, einer JavaScript-Engine und einer Schnittstelle (API), über die der Browser auf die Browser-Engine zugreift. Durch diesen flexiblen Aufbau ist es auch möglich, dass verschiedene Browser die selbe Browser-Engine verwenden können.

Die bekanntesten Browser-Engines

Die folgende Tabelle zeigt die bekanntesten Browser-Engines und ihre hauptsächliche Verwendung:

Browser-Engine Verwendung Bemerkungen
WebKit  Safari, (Chrome bis Vers. 27)  
Blink Opera (ab Vers. 15), Chrome (ab Vers. 28) 2013 von Webkit abgespalten
Gecko  Firefox  
Trident  Internet-Explorer für Windows  
Tasman  Internet-Explorer für Macintosh  
EdgeHTML  Microsoft-Edge für Windows 10  

Quellen