Skalierbare CSS-Layouts

Inspiriert von einslive.de habe ich endlich die Zeit gefunden, mich ausgiebiger mit der Umsetzung von vollständig skalierbaren CSS-Layouts und relativen Größenangaben (em & Prozentangaben) zu beschäftigen.

Auch wenn Christian es als “Wackersdorf-Yuppie-Design” bezeichnet, ist die “technische” Umsetzung vom “neuen 1LIVE” verdammt cool. Schon mal mit der Textgrößeneinstellung im Browser gespielt? (Und ich meine nicht diese grauenvolle Zoom-Funktion im IE7). Unter “universell skalierbar” verstehe ich genau die Umsetzung, wie es bei einslive.de gemacht wurde und kann hier nichts anderes als Lob an die Designer aussprechen. Bekannt war es mir ja, aber es fanden sich bisher immer noch auch bei den Größenangaben von Block-Elementen Pixelwerte.

Der Grundgedanke ist, dass man alle Maßangaben für Elemente in umgerechneten relativen Einheiten angibt - ich bevorzuge die Angabe in em. Ein div mit der CSS-Eigenschaft width: 180px; erhält umgerechnet width: 11.25em;, wodurch die Breite relativ zur Schriftgröße mitskaliert wird. Dies lässt sich genauso auf andere Elemente, also Bilder, Rahmen bis hin zu padding- und margin-Werten übertragen. Der Vorteil: Die Webseite wird nicht nur im Vorgegeben fixen Rahmen durch die Änderung der Schriftgröße verkleinert oder vergrößert, sondern im Ganzen. Der Vorteil bei dieser Lösung ist, dass dabei das gesamte Layout mitskaliert wird und in der Gestaltung zu 99% nicht verändert wird, sondern eben nur vergrößert oder verkleinert. Ähnlich der Zoom-Funktion im IE7, aber browserübergreifend.

Das Problem hierbei ist die Abhängigkeit bzw. “Rekursivität”, was relative Textgrößen in Prozent im Verhältnis zur Haupteinstellungs des Webbrowsers angeht. Im Regelfall sind 100% also 16px Schriftgröße (Einstellt im Firefox unter Extras - Einstellungen - Inhalt). Wenn ein Element oder ein übergeordnetes Element also mit font-size: 80%; eine kleiner Schriftgröße zugewiesen bekommt, wirkt sich dies auch auf alle anderen relativen Größeneinheiten aus. Es reicht also nicht, überall pauschal ausgehend von 16px Standard-Schriftgröße die Pixel-Werte in em-Werte umzurechnen.

Sehr geholfen hat hierbei der “Em Calculator” unter http://riddle.pl/emcalc/, der einem viel Rechenarbeit abnimmt. Durch Angabe der “Default browser font size” als Wert für die 100%-Standardvorgabe durch den Browser und Angabe des Pixel-Werts berechnet das mit JavaScript umgesetzte Script die em-Werte sehr komfortabel, vor allem direkt mit Punkten statt Kommata, die in der CSS-Definition gerade bei der Schreibvariante margin: 1px 2px 3px 4px; nicht akzeptiert werden.

Den Wert für die 100%-Angabe der Schriftgröße erhält man, indem man den Standardwert (16px) mit der Prozentangabe des aktuellen Elements multipliziert (bei einem div-Blockelement mit font-size: 80%; also 16*0.8 = 12.8 (das Script unter riddle.pl/emcalc kann nur Punkte benutzen, keine Kommata).
Auf der Basis erhält man sehr leicht den entsprechenden em-Wert.

Ich habe das direkt an einer Kundenseite ausprobiert und bin mit dem ersten Ergebnis recht zufrieden, wenn auch ich Manuel zustimmen muss, dass meine Bilder nicht so schön skalieren, wie bei einlive.de. Aber daran arbeite ich noch.