Die Grenzen von Cascading Style sheets (CSS)

Wozu CSS gut ist und wozu nicht

Ich habe mich nun endlich mal ein paar Tage mit CSS auseinandergesetzt. In meinem Hirnkasten klingen die Begeisterungsrufe der Proponenten dieses Ästhetik-Werkzeug nach:

• "Saubere Trennung von Inhalt und Gestaltung"
• "Zentrale Einstellung von stilbildenden Elementen"
• "schlankerer, übersichtlicherer Code"
• "mehr gestalterische Möglichkeiten als mit bloßem HTML"
• "bessere Möglichkeiten, barrierefreie Seiten zu gestalten"

Vorab sei gesagt, dass ich vom Nutzen von CSS überzeugt bin. Ich sehe aber einige Einschränkungen. Über diese möchte ich in diesem Artikel ein paar Zeilen los werden. Vielleicht hilft es auch dem einen oder anderen, sich ein nüchterneres Bild von den Einsatz-Möglichkeiten zu machen.

Ich dachte früher, dass CSS so etwas, wie eine Programmiersprache sei - weit gefehlt! Es ist nicht mehr als die Möglichkeit, ein paar Regeln zur durchgängigen Format-Einstellug aufzustellen, die man in Form von Klassen und Einstellungen zu Standard-Typen wie Überschriften (H1, H2..) zusammenfassend ablegen kann. Dabei sind auch ansatzweise Verschachtelungen möglich.
Der Ausdruck Klasse ist es, der mich wohl am meisten irritierte; hiermit sind eben nicht jene Klassen gemeint, die in der objektorientierten Programmierung so etwas wie Baupläne zur Konstruktion von beliebig vielen Objekten darstellen.

Was mit CSS nicht möglich ist:

• Konstruktion von eigenen Typen als Kombination aus bestehenden HTML-Tags (Überschriften, Links, Images)
  
  Ich kann z.B. nicht als Style-Anweiung einen Typ Menü erzeugen, der aus einem Div-Container mit Überschriftszeile in gewünschter Größe und Farbe, einer ungeordneten Liste (UL) mit einer beliebigen Anzahl an Elementen, die Links mit Icons enthalten sollen und einer Zeile für eine abschließende Fußnote besteht. Ich kann lediglich eine Regel aufstellen für eine oder mehrere bestimmte DIV-ID's, die besagt, dass z.B. alle Links in meinem Div-Container gelb unterlegt sein sollen und dass die 'normalen' Texte darin zentriert werden und 80% der Normal-Schrift-Größe erreichen sollen; aber ich kann nicht anweisen, dass der Container immer erst mit solch einer Überschrift beginnt und dann die Link-Liste folgt und dann die Fußnoten-Zeilen.
  
• Es gibt keine Variablen und erst recht keine Variablenfelder (Arrays)
  
  Man kann also nicht seine 6 immer wiederkehrenden Farben (Corporate Identity) durch allgemeine Ausdrücke wie "MyBackground3" oder "meineFußnotenFarbe" oder "meineNormalTextFarbe" etc. ersetzen.
  Man kann aber statt dessen mit Classes arbeiten wie zB ".MyBg3 {Background-Color:#AABBE0}" usw. Man kann auch nicht alle 5 Menüpunkte als Array oder Liste oder CSV-String an einen Container übergeben, sondern muss im HTML-Quelltext jeden einzelnen an Ort und Stelle verdrahten.
• HTML-Tags können nicht die Eigenschaften eines anderen HTML-Tags ändern.
  
  Z.B. möchte ich gerne, dass man nur per CSS und ohne Javascript per Mouse-Move-Over-Effekt (A:HOVER) den Text eines InlineFrames durch einen anderen Text ersetzt; quasi als unverbindliche Vorschau, ohne dass der User sich zu einem Click auf den betreffenden Link entschließen muss; denn Clicks auf Links könnten ja Warte-Zeiten oder Desorientierung durch ungewollt aufpoppende Fenster etc. nach sich ziehen. Ich möchte also, dass er spielerisch einfach die ersten Schlagzeilen eines Artikels in einem IFRAME angezeigt sieht und wenn er mit der Maus über einen adneren Link huscht, soll am selben Ort ein anderer Text eingeblendet werden.
  Ich krieg das aber nur hin, wenn der User auf den Link klickt oder aber indem ich eben Javascript einsetze, was wiederum den einen oder anderen davon abhalten könnte, sich weiter mit meiner WebSite zu befassen, denn JS soll ja Teufelszeugs sein wie ungeschützter Verkehr...
  Beispiele dafür, wie schön man das Objekt selbst, über da man mit der Maus fährt, verändern kann, gibt es ja zu Tausenden - nicht aber dafür, wie man damit ein anderes Objekt (hier iFrame-Src) ändern kann.
• Man kann den Fließtext gar nicht so frei von Formatierungsanweisungen halten, wie man das vielleicht nach den oben zitierten Ankündigungen erwarten könnte.
  
  Man kann ja nicht alles bis aufs Kleinste vorplanen; man kann nicht im Stylesheet planen, dass im 3.Absatz eine Textstelle besonders hervorzuheben sein wird - und selbst wenn man das könnte, wäre eine solche Trennung so wenig wünschenswert wie der Vortrag eines Redners, der schon vorher weiß, dass er genau nach 3 Sätzen zum Thema Staastsfinanzen kommen wird und sich dann beim Stichwort "Steuererhöhung" ganz fürchterlich aufregen wird!
  Man muss also direkt vor Ort anbringen, welche Class hier anzuwenden ist, um eine Passage hervorzuheben. Man muss auch nach wie das Ziel von Links an Ort und Stelle angeben und durch weitere Struktur-Anweisungens trennen zwischen dem eigentlichen Link und dem Text oder dem Bild, das anklickbar sein soll.

Man sollte sich also nicht wie ich in meinen Anfängen vorstellen, dass man einen fließenden, reinen, druckbaren Text auf der einen Seite und die Formatierungen dazu komplett im Stylesheet enthalten sind. Oder anders ausgedrückt: Fomatierungen können zwar komplett ins Stylesheet geschrieben werden, aber die Punkte im Text, an denen diese Formatierungen angebracht werden sollen (Struktur-Elemenente wie HTML-Tags), müssen natürlich immer noch direkt dort angegeben werden:

  <H2> Mein Titel </H2>
  <P class = "myVeryImportant">bla... </P>
  <A href= "../myLink.html">MyLink"</A>
  ...usw...

Nur die Dinge, die an eine allgemeine Regel gehalten werden können (wie zb mache alle H1-Titel dunkeblau mit gelber Schrift) brauchen dann tatsächlich nicht mehr im Fließtext aufzutauchen; dass hier aber eine Überschrift stehen soll, muss natürlich weiter direkt an der betreffenden Textstelle bekanntgegen werden.
Ein solcher Quelltext mag dann zwar keine direkten Formatierungsanweisungen mehr enthalten, wird aber ständig durch HTML-Tags für die Art des Elements und einigen Zusatz-Angaben wie Link-Ziel und Class-Angaben für Formatierungsausnahmen unterbrochen.

Oder um im Beispiel unseres Redners zu bleiben: DASS er sich an der Text-Stelle mit der Steuererhöhung ganz fürchterlich aufregen wird, das markiert er in seinem Rede-Manuskript mit 3 Ausrufezeichen bzw. mit dem strong-Tag - WIE er seine Wut zum Ausdruck bringen wird, das hat er schom dutzende Male bei anderen Versammlungen geübt und muss nicht mehr im einzelnen ausgeführt werden (auf Papier könnte man das vielleicht mit roter, fetter, anwachsender Schrift auf gelb-grünem Hintergrund auszeichnen). Er wird dies noch einige Male am selben Abend in seiner unnachahmlichen Art zur Freude seiner Anhänger zum besten geben, denn er hat sich selbst auf diese Weise zu einem Markenzeichen stilisiert.

Was CSS handlich macht:

• ist zB. die Möglichkeit, Reihen von Objekten zu benennen, für die eine bestimmte Formatierung definiert werden soll, zB:

   H1,H2,A {Color:red} 

  oder z.B:

   #myBox1, myBox2 {font-size:0.8em; color:yellow} 

• und die Möglichkeit, für Unter-Ebenen Formatierungen zu definieren,
  wie zB. nur Links, die in Absätzen enthalten, sind in roter Schriftfarbe darzustellen:

   P A {color:red} 

• oder die Möglichkeit, für eine bestimmte Style-Class die Egenschaften von HTML-Tags einzustellen
  (hier zB. um für alle aktive Links von Class1 die Schrift zu vergrößern):

  .class1 {background-color:aqua}
  A:active.class1 {font-size:1.333em}
  

Also: Es ist schon recht nützlich, CSS einzusetzen - ja, es macht sogar Freude, die Unterschiede am Erscheinungsbild des Artikels mit wenigen Handgriffen radikal und durchgängig - somit stilbildend - umzustellen, aber man sollte nicht mehr davon erwarten, als seine Erfinder beabsichtigten:

Formate zentral zu definieren.