Cascading Stylesheets (CSS)
Was ist CSS
CSS ist eine Stylesheet-Sprache die meist in Zusammenhang mit HTML und XML Verwendung findet.
CSS Level 1 wurde erstmalig 1996 von W3C vorgestellt, konnte sich jedoch einige Jahre im Web nicht wirklich durchsetzen, was unter anderem auch der mangelnden Kompatibilität gängiger Browser zuzuschreiben war. 1998 folgte die Version 2.0, bald setze sich CSS dann auch bei den gängigen Browsern durch. Der heute verwendete Standard ist CSS Level 2.1.
Die Zeit vor CSS:
Danke dem HTML Attrbut "border=0" ist es möglich mit Tables ein unsichtbares Raster über eine Seite zu ziehen, um die Inhalte daran auszurichten. Doch das zieht mehrere große Nachteile mit sich. Zum einen wird eine nachträgliche Änderung dadurch oft aufwendig, zum anderen wird dadurch der Quelltext einer Seite, den der Client eines Besuchers ja bei jedem Aufruf neu herunterladen muss, unnötig groß.
Einsatz von CSS:
Und da sind wir auch schon beim Grundgedanken von CSS, den Quellcode des Contents vom Quellcode des Layouts zu trennen. Das HTML Dokument soll also nur Daten wie Texte, Links, Bilder und sonstige Medien sowie deren Gliederung enthalten. So werden nur Grundlegende HTML Tags verwendet. Beispielsweise enthält das HTML Dokument Div Container für Header, Contentbereich, die Navigation und der Footer. Der Seitentitel erhalten den h1 Tag, Überschriften einzelner Artikel im Contentbereich den h2 Tag, einzelne Container sind in CSS über das HTML Attribut "class" identifizierbar. Zusätzliche Attribute werden so sparsam wie möglich verwendet. Im Seitenkopf wird dann ein externes CSS File eingebunden, dass die Eigenschaften der einzelnen Elemente enthält.
Vorteile:
Bei den Vorteilen kann ich weder sagen, wo ich anfangen, noch wo ich aufhören soll.
- Der Funktionsumfang geht weit über den von HTML hinaus.
- Positionierung von Elementen pixelgenau möglich.
- Schöner übersichtlicher Quellcode, was sich u.a. auch auf die Positionierung bei Suchmaschinen auswirken wird.
- Schnellere Ladezeiten.
- Komplette Designänderung möglich ohne den HTML Code ändern zu müssen.
- Es ist einfach das Design über mehrere Unterseiten hinweg beizubehalten.
- Besucher können eigene Stylesheets verwenden.
Außerdem kann ein Webmaster mehrere Stylesheets für verschiedene Medientypen zur Verfügung stellen. Beispielsweise können verschiedene Stylesheets für Handhelds, Druckversionen und Ausgabegeräte für Blindenschrift eingebettet werden.
<link href="bildschirm.css" rel="stylesheet" type="text/css" media="print"
Wie ihr sehen könnt, wurde mit dem Attribut "media" der Medientyp für dieses Stylesheet festgelegt.
Hier ein paar Medientypen:
- all - Für alle Geräte geeignet
- braille - Geräte für Braille-Schrift (Blindenschrift)
- embossed - Braille Drucker
- handheld - Zur Ausgabe auf Geräten mit kleinen Bildschirmen
- screen - Normaler PC Bildschirm
- projection - Zur Ausgabe auf einem Projektor/Beamer
- print - Druckversion
- ...
Im Firefox kann der Besucher unter dem Menüpunkt "Ansicht => Webseiten Stil" einen der zur Verfügung stehenden Stylesheets auswählen.
CSS in HTML einbetten
Es gibt mehrere Möglichkeiten CSS zu benutzen.
Zum einen gibt es die Möglichkeit den CSS Code in HTML über <style> einzubinden
<style type="text/css">
<!-- CSS Code -->
</style>
Zum anderen gibt es die Möglichkeit den CSS Code für ein einzelnes Element über das style Attribut einzubinden
<p style="font size: 10px">Beispiel</p>
Aber wir wollen ja den Grundgedanken bei der Sache nicht aus den Augen verlieren, ich würde empfehlen ein externes Stylesheet einzubinden um die Übersicht beizubehalten:
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
Alternative Stylesheets einbinden:
<link rel="alternate stylesheet" href="stylesheet1.css" type="text/css" title="Style 1" media="screen">
<link rel="alternate stylesheet" href="stylesheet2.css" type="text/css" title="Style 2" media="screen">
<link rel="alternate stylesheet" href="stylesheet3.css" type="text/css" title="Style 3" media="screen">
Bei diesem Beispiel würden im Firefox unter dem Menüpunkt "Ansicht => Webseiten-Stil" die Styles mit den Titeln "Style 1" bis "Style 3" zur Verfügung stehen.
Doctype-Switch
Zu früheren Zeiten hielten sich die Entwickler der Browser selten an die von W3C vorgegebenen Standards. Das führte dazu dass sie so ihre Eigenarten bei der Darstellung hatten. Ein gutes Beispiel dafür ist der berühmte Box-Modell Fehler, laut W3C Standards zählen Rahmen und Abstände nicht zur Breite und Höhe von Boxen.
Die neueren Versionen der Browser richteten sich nun immer mehr an die Standards, dabei gab es nur ein Problem. Die Millionen von an die alten "Eigenarten" angepassten Webseiten im Netz.
Die Lösung war ganz einfach. Die meisten Browser unterstützten mehrere Darstellungsvarianten.
Seit CSS Level 2 parallel zu HTML 4 veröffentlicht wurde sieht W3C vor, die erste Zeile eines HTML Dokuments mit einem gültigen Doctype zu versehen. Dank dieser Neuerung war es möglich, Abwärtskompatibilität gewährleisten zu können. Falls kein oder ein falscher Doctype deklariert wurde, schaltet der Browser in den so genannten "Quirksmodus". Ist der Quirksmodus aktiv, interpretiert der Browser die Seite wie in älteren Versionen.
Die Unterschiede zwischen dem Quirks und dem Standardmodus können große Auswirkungen auf die Darstellung einer Seite nehmen, auf Details werde ich erst mal nicht weiter eingehen. Ein Beispiel wurde ja schon mit dem Box-Modell Fehler gezeigt.
In welchem Modus sich der Browser gerade befindet, lässt sich mit einem einfachen Javascript anzeigen:
javascript:alert(document.compatMode)
Im Firefox ist die Rückgabe im Quirksmodus == BackCompat.
Im Standartmodus hingegen == CSS1Compat.
Der Quirksmodus ist heute weitestgehend überflüssig. Wird aber noch oft von Ahnungslosen Webmastern benutzt die ihr HTML Dokument mit <HTML> beginnen.
Weil mein Kopf schon raucht ist an dieser Stelle ERSTMAL Ende. Hier noch ein paar Linkempfehlungen:
Informationen zum CSS Level 2 Rev 1 Standart des W3-Konsortiums:
http://www.w3.org/TR/CSS2/
RFC 2318 - text/css
ftp://ftp.rfc-editor.org/in-notes/rfc2318.txt
CSS-Validator:
http://jigsaw.w3.org/css-validator/check/referer
SelfHTML Dokumentation zum Thema CSS:
http://de.selfhtml.org/css/