CSS: Form folgt Funktion.

Egal, ob man eine Website in statischem HTML entwickelt oder ein CMS verwendet, man sollte immer auf eine Trennung von Inhalt und Design achten. Ein Grundsatz, der nicht selten ausgerechnet von “Mediengestaltern” mißachtet wird, um eine Website rein nach Design-Kriterien in ein unzerstörbares Layout zu gießen (z. B. mit Tabellen und festen Breiten, Blind GIF oder Schriftgrafiken). Ursache sind dabei auch grafische Entwicklungsprogramme, die unbequemes technisches Hintergrundwissen aus “Komfortgründen” vom Benutzer fernhalten. Das Ergebnis ist nicht selten umfangreicher, behäbiger Code und kaum barrierefrei.

Dabei hat eine barrierarme Gestaltung nicht nur enorme Vorteile bei Pflege und Weiterentwicklung der Homepage, sondern kommt auch der Suchmaschinen-Freundlichkeit zu Gute. Weil solche Seiten besser analysiert werden können, erreichen sie i. d. R. ein besseres Ranking ganz ohne Tricks. Eine Schlüsselfunktion haben dabei “cascading style sheets“, kurz CSS. — Wie funktionieren CSS und wie kann man sie nutzen?


Template, HTML & CSS

Wenn auf einer CMS-basierten Website ein Text angezeigt werden soll, holt ein PHP-Skript (z. B. WordPress oder Joomla) die Daten – im Prinzip den “reinen Text” – aus einer Datenbank (SQL). Dieser Text (Content) wird dann auf Grund von Regeln, die im Template (HTML & CSS) definiert sind, zu einer Seite zusammengebaut. Das betrifft nicht nur die Anordnung von Inhalten und Bedienelementen, sondern auch deren Aussehen in Farbe, Schriftgröße oder Zeichensatz. Das sorgt nicht nur für eine einfache Handhabung umfangreicher und vieler Texte, sondern auch für ein einheitliches Erscheinungsbild – das man durch Wechsel des Templates auf Knopfdruck komplett umstellen kann.

Je mehr Designfunktionen wie Schriftgröße, Schriftschnitt, Farbe usw. man unmittelbar in der HTML-Datei oder über einen “wysiwyg”-TinyMCE festgelegt werden, desto mehr unterläuft man das Prinzip der Templates, da sich solche Formatanweisungen “hartkodiert” dem Template entziehen. — In der Praxis heißt dies: Bitte sich erstmal alle Design-Spielereien besonders im Editor zu verkneifen (notfalls nur fett und kursiv verwenden). Dazu gehört beispielsweise auch, sich beim Einbau einer Tabelle sich nicht vom merkwürdigen Aussehen irritieren zu lassen. Stur lächeln und winken und dran denken: Form folgt Funktion.

Wer auf Design – zum Beispiel für ein spezielles Corporate Design – Wert legt, muß sich mit Template-Entwicklung und CSS befassen, nicht mit dem Editor. Das ganze ist bis zu einem gewissen Grad mit Formatvorlagen in Word vergleichbar (die dort ebenfalls nur von wenigen Nutzern konsequent verwendet werden). Bei der Erläuterung insbesondere von Editor-Funktionen rate ich deshalb immer dazu, auf die vielen schönen bunten Knöpfe möglichst zu verzichten. Begründung: Das ist Aufgabe des Templates.

Die praktische Seite

Wenn man einen neuen Beitrag im Texteingabefeld eine Editors schreibt, wird er prinzipiell folgendermaßen dargestellt (Annahme, tatsächliche Werte sind nicht wichtig):

  • linksbündig
  • Schrift “Times”
  • Größe 8 Punkt

Man möchte aber, weil man es schön findet oder ein Corporate Design hat, lieber folgende Werte – eigentlich weniger im Editor als auf der Website:

  • Blocksatz
  • Schrift “Helvetica”
  • Größe 9 Punkt

Außerdem sollen längere Texte Zwischenüberschriften bekommen (blau, 11 Punkt), Bilder eine Bildunterschrift (kursiv).

Der Schnellklicker, der sich für Zusammenhänge nicht interessiert und Konzepte für überflüssig hält, nimmt nun mit Hilfe der Funktionen im Editor diese Einstellungen vor (sofern sie so detailliert überhaupt zur Verfügung stehen). Das hört sich Dank Wysiwyg ja ganz einfach an, erfordert aber doch eine gewisse Konzentration, vor allem wenn mehrere Texte zu bearbeiten sind. Ich bin sicher, daß sich trotzdem Fehler einschleichen, erst recht, wenn es mehrere Autoren gibt…

Eines Tages soll nun das Erscheinungsbild geändert werden: Die Texte sollen zwar Helvetica bleiben, aber 10 Punkt groß und wieder in Flattersatz ausgerichtet werden (linksbündig). Der Schnellklicker öffnet nun jeden Beitrag der Website und könnte mit STRG-A jeweils den kompletten Texte auswählen und mit zwei Klicks im Editor das neue Format zuweisen. Speichern. Mühsam, wenn es um zehn oder zwanzig Beiträge geht, praktisch unmöglich, wenn es inzwischen Hunderte sind. Verwendet man außerdem Zwischenüberschriften, muß man sogar die Absätze im Text einzeln markieren und bearbeiten. Da muß dann ein Praktikant oder eine Aushilfe ran. – Und dann wird über das umständliche CMS geschimpft…

Wer den Sinn von Templates verstanden hat, sich ein wenig in CSS einarbeitet (oder notfalls jemanden damit beauftragt), ändert lediglich zwei Einträge in seiner CSS-Datei als Teil des Templates und hat die gesamte Umstellung in fünf Minuten erledigt – und zwar ohne einen einzigen Fehler auch bei tausend Dateien.

Was technisch dahintersteckt

Wenn man einen Text vom Design her völlig unbearbeitet in einen Editor ohne irgendwelche Verschönerungsambitionen tippt, wird er in einer Webseite in etwa folgendermaßen dargestellt:

<h1>Ich bin die Überschrift</h1>
<p>Der Text beginnt mit dem ersten Absatz, der durch das Absatz-Tag "p" gekennzeichnet ist.</p>
<h2>Zwischenüberschrift</h2>
<p>Dies ist ein neuer Absatz. Er kann natürlich über mehrere Zeilen gehen, der Zeilenumbruch erfolgt automatisch.</p>
<p>Dies ist der letzte Absatz.</p>

So ungefähr hat das vor mehr als zwanzig Jahren mit dem WWW angefangen. Die konkrete Darstellung auf dem Bildschirm hat allein der Browser vorgenommen (meist schwarze Times vor grauem Hintergrund und Links immer blau und unterstrichen hervorgehoben). Nach mehreren Zwischenschritten hat sich inzwischen das Prinzip von CSS durchgesetzt.

<h1>, h2>, <h3 usw. stellen keine Reihenfolge dar, sondern Hierarchieebenen von Überschriften, ähnlich 1), 1.1), 1.1.1) usw. Bei vielen CMS ist die <h1> allerdings schon für den Namen der Website vergeben, so daß sich die nachfolgenden Ebenen um eine Stufe verschieben, also die Überschrift (“Titel”) eines Beitrages ist <h2> und Zwischenüberschriften folgen mit <h3>.

Eine einfache CSS-Beschreibung mit o. g. Vorgaben könnte so aussehen (sie ist in der Praxis natürlich deutlich ausgefeilter):

p {
font-family: Helvetica;
color: black;
font-size: 9pt;
text-align: justify;
}
h1 {
font-size: 16pt;
}
h2 {
font-size: 11pt;
color: blue;
}

Diese CSS-Beschreibung kann entweder direkt in die HTML-Datei mit dem Text kopiert werden oder – bei sehr umfangreichen Definitionen wie einem Template – in eine Datei ausgelagert werden. Das macht man auch, wenn die CSS-Beschreibung für mehrere HTML-Dateien gelten soll, denn sonst müßte man ja wieder mehrere Dateien anfassen.

Wie beides zusammenkommt

Wenn nun ein Browser eine HTML-Datei darstellen will, vergleicht er die HTML-Tags mit den CSS-Beschreibungen. Stößt er beispielsweise auf <h2>, weiß er, daß die Schrift in 11 Punkt und blau dargestellt werden soll. Bei <p> wird auf 9 Punkt und schwarz umgeschaltet usw.
Wenn man als Webmaster nun seine Meinung über das beste Erscheinungsbild ändert, muß man nur die entsprechende Beschreibung in der CSS-Datei ändern.

  • font-size: 10pt;
  • text-align: left;

Es müssen also nur wenige Zeichen in der Beschreibung geändert werden, um sämtliche(!) Texte fehlerfrei(!) anzupassen. — Ein Theme/Template ist zwar mehr als eine CSS-Datei, doch ein Großteil der optischen Gestaltung basiert auch hier auf CSS. Wenn man allerdings mit einem Wysiwyg-Editor Formatierungsbefehle direkt in den Text einbaut, funktioniert dieses Prinzip nicht mehr! Bezogen auf den praktischen Einsatz ist es also sinnvoll, auf direkte Formatierung zu verzichten, sich mit fertigen Templates möglichst nah an das gewünschte Ergebnis heranzupirschen und dann behutsam die CSS-Dateien des Templates anzupassen.

Comments

comments

Leave a Reply

Your email address will not be published.