Publikationen
Webdesign und Webentwicklung:
Bericht von der Baustelle WWW (Jan. 2007)
1. Teil: Style Guide für eine Website
2. Teil: CSS-Code Organisation erleichtert Übersicht und Unterhalt
3. Teil: (X)HTML- und CSS-Richtlinien
CSS-Code Organisation erleichert Übersicht und Unterhalt
Die Problematik, nicht mehr benutzbar mit alten Browsern zu sein, taucht in manchen grossartig mit CSS gelayouteten, barrierefreien Websites auf. Man bedenke dass viele Menschen mit Behinderung oft veraltetes Equipment besitzen. Meine statistischen Messungen in einigen Websites ergeben immer noch durchschnittlich 4% Netscape 4er und 8% IEX 5er, also zu viele Benutzer um diese ganz auszuschliessen. Es geht aber nicht darum diesen exakt dasselbe Design zu liefern, sondern die Lesbarkeit des Inhaltes und die Bedienbarkeit zu gewährleisten, mehr wäre übertrieben.
Bereits die Organisation der Dateien kann einerseits die CSS-Eigenschaften optimal nutzen, andererseits Übersichtlichkeit schaffen. Die Musterseite "template.html" wurde mit der CSS-Datei "template.css" verknüpft, zudem wird die CSS-Datei "modernebrowser.css" dazu geladen:
<link href="/css/template.css" rel"="stylesheet" type="text/css" />
<style type="text/css">
@importurl("/css/modernebrowser.css")
-->
</style>
Diese Schreibweise und Organisation berücksichtigt, dass ältere Browser wie Netscape 4.x den @importurl Befehl nicht kennen und ganz einfach ignorieren. Die Definitionen in der CSS-Datei "template.css" sind sehr einfach gehalten und sorgen für lesbare Darstellung durch alte Browser, die beispielsweise mit Float-Positioning nur Unfug machen. Alles was für die gegenwärtigen Browser ist, wird in der Datei "modernebrowser.html" geliefert.
Diese Lösung ist bereits ziemlich gut, doch wegen einem Fehler von IEX 5/6 Windows leider nicht unproblematisch. Wenn CSS importiert werden fallen diese Browser solange in einen stylesheetlosen Quirks-Modus bis das importierte CSS vollständig geladen ist.
CSS Kaskade optimal nutzen
CSS-Dateien müssen nicht direkt in (X)HTML-Dateien importiert werden, sie können auch untereinander verlinkt sein. So würde für das oben abgebildete Organisationsschema in der Datei "template.css" dies notiert:
@importurl("/css/layout.css")
@importurl("/css/navigation.css")
@importurl("/css/inhalt.css")
@importurl("/css/tabellen.css")
@importurl("/css/formulare.css")
Dies hilft bereits, einiges an Umfang und Komplexität zu reduzieren. Die Import-Regeln müssen die ersten in einer CSS-Datei sein, sonst wirken sie nicht fehlerfrei. Nun muss weiter beachtet werden, dass die importieren Regeln vor den Regeln in der Datei "template.css" stehen und wie bekannt, können obenstehende Regeln durch nachfolgende überschrieben werden.
<html>
<head> ...
<link href="/css/template.css" rel"="stylesheet" type="text/css" />
...
Wenn das "template.css" also ganz einfach in die HTML-Datei gelinkt und nicht importiert wird, der Import der verschiedenen CSS-Dateien also erst dadrin erfolgt, wird der weiter oben erwähnte Fehler von IEX 5/6 Windows elegant umgangen.
CSS-Dateien kommentieren
Das erste was in einer CSS-Datei stehen sollte ist ein Blockkommentar, der aussagt wofür das Stylesheet ist, wann und von wem es erstellt wurde und ggf. auch wann und von wem es ergänzt wurde:
/*------------------------------------------------------------------ basis StyleSheet (fuer alte 4er Browser) datum: 2006-09-10 autor: Sven Jenzer, sven@zonicdesign.ch
changes: 2006-09-22 beat muster, b.muster@musterag.ch - tabellen um bg-farben erweitert - h1 und h2 Schriftgroesse kleiner gemacht im main Letzte Validierung: 2006-09-22 ------------------------------------------------------------------*/
Das gibt andern Entwicklern eine gute Übersicht und auch die Möglichkeit gezielt nachzufragen, wenn etwas keinen Sinn macht. Gerade die Datei "template.css" nutze ich gerne für dokumentarische Informationen, hier ist die Infozentrale. Deshalb benenne ich diese Datei auch mit einem projektbezogenen Namen und nicht mit einem generischen, wie etwa "layout.css". So habe ich selber eine bessere Übersicht, wenn ich mit vielen CSS-Dateien arbeite.
Im weiteren folgen nun die verschiedenen Regeln die möglichst sinnvoll gruppiert werden. Ich beginne meist mit den Layout-Boxen und die Reihenfolge entspricht dem Fluss im (X)HTML-Dokument. Man kann immer links den XHTML-Code lesen und rechts die Styles dazu. Die Bereiche erhalten sinnvolle, eindeutige Namen:
/*---- Kopfbereich ----------*/
Darunter folgen alle Layout-Definitionen für den Kopfbereich.
/*---- Hauptnavigation ----------*/
/*---- Inhalt ----------*/
/*---- Fusszeile ----------*/
usw.
Lieber im CSS notieren als lange studieren
Oft werden Hacks eingesetzt um Fehler gewisser Browser auszugleichen. Auch ich weiss nach einem halben Jahr selber nicht mehr wieso ich dies so gelöst hatte und woher ich den Trick habe. Viele Hacks sind kryptisch und nicht direkt nachvollziehbar, weshalb also nur beschreiben was der Hack macht, sondern nicht gleich noch den Link zur Erläuterung beipacken?
/* HACK korrigiert IE5 Win die Schriftgroesse dokumentiert unter:
http://www.explorerhacks.com/eqwfcq&eqwer6366.html
*/
* html body {
font-size: 80%;
}
Weitere Notationshilfen sind in der Software-Entwicklung schon lange in Gebrauch:
/* :TODO: Nicht vergessen diese Regel löschen bevor die site aufgeschaltet wird */
/* :BUG: Diese Regel versagt in Safari 2.x Mac, lass ich aber so stehen */
Kommentare entfernen, das CSS-File optimieren
Ich bin ein Anhänger davon, die kommentierten CSS live zu schalten. Zu oft musste ich direkt in aktiven Websites dringend etwas ändern und musste erst einmal Orientierung schaffen. Natürlich werden die ganzen überflüssigen Zeilen jedesmal geladen, gehen über die Leitung und verlangsamen den Aufbau der Page, bei verlinkten CSS umso mehr. Gemessen an den vielen Kilos der Grafik und Bilder und anderen Features, sind die paar Bytes meiner Meinung nach aber vertretbar.
Puristen entfernen vor der Live-Schaltung alle überflüssigen Leerzeichen und Zeilenschaltungen, denn auch diese machen einige Bytes aus und verzichten deswegen auch auf den Import, packen somit alles in eine lange, leerzeichenlose Datei.
Andy Budd führt im Buch «CSS MASTERY» verschiedene Möglichkeiten auf, dass etwa die CSS-Datei vor der Live-Schaltung mit Suchen & Ersetzen gereinigt werden kann oder dass der Apache Webserver serverseitig die Files komprimiert, denn die meisten modernen Browser können mit den mit GZIP komprimierten Files umgehen.
Weiter zum 3. Teil: XHTML und CSS-Code-Richtlinien
