Struktur von der Darstellung trennen: CSS nicht mächtig genug?

[Kai345]

[latex]Mae  govannen![/latex]

Ich habe mich gefragt, wie man denn einem <div>-Block ein hübsches Aussehen mit einem Rahmen und runden ecken verleiht. CSS2 scheint dafür nicht mächtig genug zu sein. Erst bei CSS3 soll es dafür eine Lösung geben.

Ja, so sieht es aus.

Dank Google bin ich meistens auf folgende Lösungen gestoßen:

1. den eigentlichen Inhalt mit vielen unsinnigen <div>-blöcken umgeben
2. den eigentlichen Inhalt mit einer ebenso sinnfreien tabelle umgeben
   1&2) in beiden Fällen die gesamte Konstruktion mit CSS ausmalen.

was mir daran nicht passt ist die Tatsache, dass ich dafür Änderungen an der XHTML datei vornehmen muss, die ja eigentlich für den "Inhalt" steht, und dabei die logische Struktur des Dokumentes ruiniere.

Wenn du das Markup nicht an vielen Stellen verändern willst, bleiben dir mehrere Wege:

a) Du siehst die Sache pragmatisch und fügst die entsprechenden CSS3-Regeln in dein Stylesheet ein. Browser, die das verstehen, stellen die Elemente entsprechend dar, alle Anderen ignorieren es.

b) Du veränderst den Elementbaum durch entsprechendes Javascript, z.B. aus
<div class="abgerundet">....</div>  (@all: ja, ich weiß, unpassender Klassennname)
macht das Javascript dann eine entsprechende verschachtelte Struktur wie z.B.

<div class="abgerundet">  
  <div class="ro">  
    <div class="lo">  
      <div class="lu">  
        <div class="ru">  
          ....  
        </div>  
      </div>  
    </div>  
  </div>  
</div>

Dann mußt du nur allen zu ändernden Elementen diese Klasse verpassen. Änderungen nur im Script notwendig.
Nachteil: Ohne JS wird es wie bisher eckig dargestellt.

c) im Prinzip ähnlich wie b), allerdings schon auf dem Server (php, perl oder was auch immer für eine Scriptsprache dort läuft) mit einer Art Template-System, die die entsprechenden Element-Strukturen ersetzt/generiert. Dann mußt du nur dort eingreifen, um überall die Darstellung zu ändern.

Cü,

Kai