15.07.09

CSS darf kein Skriptsprachen-Elemente-freier Raum sein!

Das CSS-Boxmodel ist erbärmlich unintuitiv und unpraktisch. Bei dem ganzen Geschimpfe muss man zugeben, dass Microsoft mit dem IE-Boxmodel ein gutes Stück voraus war; sei es nun aus Durchblick und Kompetenz oder aus der Unfähigkeit, Standards zu befolgen.

Das größte technische Problem mit dem eigentlichen CSS-Boxmodel tritt auf, wenn man Prozent- und Pixelwerte kombinieren möchte. Eine 60% hohe Box soll einen Text beinhalten, welcher nur 60% minus 20 Pixel hoch ist; mit CSS < Version 3 unmöglich, nicht unmöglich aber für den Internet Explorer.

Abhilfe für das Problem mit den Außenabständen, Rändern und Innenabständen schafft box-sizing (CSS3), was schon heute von allen Browsern unterstützt wird.

Einen viel weitreichenderen Ansatz bietet die Funktion calc(). Bei einer Formulierung wie der obigen (60% minus 20 Pixel) denkt man zuerst an eine Rechenoperation. Genau solche einfachen Rechenschritte erlaubt calc().

#testbox {
height: calc(60% - 20px);
padding: 10px;
}

Natürlich lässt sich diese längst überfällige Funktion nicht nur verwenden, um das kaputte Boxmodel zu behandeln. So lässt sich damit z.B. auch eine Box in drei Teile unterteilen, ohne dass man, wie bisher, ein 33.3333% verbrechen muss.

Vierlerorts wird man mit der Prophezeiung des Weltuntergangs konfrontiert, wenn man etwas wie calc() anspricht. CSS verkäme dadurch zu einer Skriptsprache. CSS solle beschreibend bleiben und überhaupt könne man CSS bald in JavaScript umbenennen. Ja ne, is klar!

HTML ist eine Markup-, CSS eine Formatierungs- und JavaScript eine Skriptsprache. Daran wird sich nichts ändern, auch nicht mit der Einführung von Funktionen wie calc(). Denn eine Skriptsprache arbeitet mit Input und Output, solange man CSS nicht erlaubt auf Formularwerte zuzugreifen oder auf Events zu reagieren, sehe ich keine Gefahr, dass man CSS bald JavaScript nennen könnte.

Sehr kontrovers verlaufen auch die Diskussionen um CSS-Variablen. Während man auf der einen Seite versucht, Variablen mit PHP, Python oder Ruby zu simulieren, wettert man auf der anderen Seite heftig gegen die Einführung echter CSS-Variablen. Denn Variablen, so scheint es, sind der Inbegriff einer Skriptsprache und damit Gift für CSS.

Am krassesten aber teilen sich die Meinungen bei CSS Transitions. Auf den ersten Blick handelt es sich bei einer Zeitangabe von JavaScript-gesteuerten Ereignissen in CSS um eine Vermischung von Aussehen und Verhalten. Ist Zeit etwas, das mit Interaktion zu tun hat, oder ist es ein Style-Element? Meiner Meinung nach ist hier der fließende Übergang vor dem man sich immer fürchtet.

Warum sollte man aber auf so nützliche Funktionen wie Rechenoperationen freiwillig verzichten? Für mich scheinen die Buh-Rufe von der Angst, CSS würde zu einfach werden, getrieben zu sein. Wenn man auf einmal Werte miteinander verrechnen kann, muss man keine komplizierten Div-Verschachtelungen mehr anlegen und das Gefrickel entfällt. Ottonormaldesigner kann jetzt plötzlich Webseiten mit CSS stylen, nein, das wollen wir nicht.

Kommentare [2]

Stefan Münz am 15.07.2009 um 20:31

Guter Artikel wider die Trennkost-Fundis, die nicht ertragen können, dass mit so einfachen Sachen wie calc() — MS kennt übrigens schon seit Urzeiten expression() — auch Sprachen wie CSS in gewissen Umfang so was wie “Ausdrücke” enthalten können. “Ausdrücke” gelten nämlich als wichtiger Bestandteil von Turing-fähigen Programmiersprachen, und Trennkost-Fundis können es wahrscheinlich deshalb überhaupt nicht leiden, wenn Beschreibungssprachen so was auch können sollen.

Pernox am 18.07.2009 um 15:42

Auch bei Netscape 4 ging es mit JSSS recht komfortabel zu, der Ansatz war gar nicht schlecht.

Selbstverständlich möchte ich Variablen in CSS nutzen, etwa um im einfachsten Fall Farben an einer zentralen Stelle festlegen zu können, ohne die Stylesheet-Struktur darauf ausrichten zu müssen.

Oder um Beziehungen von Elementen zueinander besser bestimmen zu können, falls beispielsweise float beim Positionieren nicht ausreicht.

Kommentar verfassen

Textile-Hilfe

  • *stark*
  • _betont_
  • "Link":http://url.com/
  • bq. Zitatkasten
  • bc. Code-Block
Der Kommentar kann erst abgeschickt werden, wenn man mindestens einmal die Vorschaufunktion aktiviert hat.

Meine Position

Ich bin ein junger Webdesigner und werde mich deshalb auch noch eine Weile mit Webstandards herumschlagen müssen. Zukunftssichere Technologien liegen mir deshalb besonders am Herzen. Das kann auch der Grund sein, warum ich mit HTML5 nicht so recht warm werde. Trotzdem versuche ich jede Entwicklung positiv zu sehen oder zumindest zum Positiven hin zu lenken.

Diskussionen sind mir besonders wichtig, ich lade deshalb jeden Leser herzlich ein, zu kommentieren und auch zu widersprechen.

Gastbeiträge

Fachartikel

Themenserien