Relative Werte

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Durch die geschilderten Probleme mit absoluten Maßangaben sind relative Werte eindeutig die flexiblere Methode, Maßangaben in Stilregeln vorzunehmen. Als Einheiten dienen hier hauptsächlich em und %, obwohl manche Leute die etwas obskure Einheit ex vorziehen. em steht immer für das Verhältnis zur Höhe der Versalie »M« in der Ausgangsschrift (M-Höhe) und deckt sich mit der Maßangabe in font-size, ex steht für das Verhältnis zur Höhe des Kleinbuchstabens »x« (die so genannte x-Höhe), ist aber weniger gebräuchlich.

em- und %-Einheiten berechnen die Schriftgröße eines Elements im Verhältnis zur geerbten oder voreingestellten Größe. Sie sind 100%ig deckungsgleich. Die Größe 1em ist genau gleich groß wie 100%.

Doch wann bezieht sich ein Wert auf einen geerbten Ausgangswert und wann auf eine Voreinstellung im Browser? Die Antwort: Es kommt darauf an.

Vor dem Erscheinen von Opera 5 zeigten alle Browser sämtliche Schriften ausschließlich mit den Werten ihrer Standardeinstellungen an. Webdesigner überschrieben daraufhin die Standardgrößen nach Belieben mit eigenen Angaben. Der Benutzer musste hinnehmen, was ihm vorgesetzt wurde.

Erst mit CSS kam die Möglichkeit auf, auch auf der Clientseite individuelle Voreinstellungen für die Darstellung von Webseiten vorzunehmen. Opera 5 stellte dem Benutzer als erster Browser ein lokales Stylesheet zur Verfügung, an dem er über Benutzermenüs eigene Einstellungen vornehmen und abspeichern konnte.

Für die Benutzer war das eine große Hilfe. Die Webdesigner befanden sich jedoch fortan in einer Zwickmühle. Konnten sie bis dato voraussetzen, dass ein Browser sämtlichen Text in einer voreingestellten Schriftgröße (Anmerkung: Für den Fall, dass Sie sich hier wundern: Pixelgröße und Punktgröße sind nicht gleich und das Größenverhältnis zwischen beiden wechselt mit Browsern und Betriebssystemen. So wird zum Beispiel bei den meisten Browsern unter Windows eine 12-Punkt-Schrift mit 16 Pixeln dargestellt. 12pt ist somit gleich 16px.) von 12 Punkt darstellte, so konnte eine Webseite nun auf eine Stilregel im Browser treffen, die ihre Textteile zum Beispiel einfach um 1,25em vergrößerte und infolgedessen mit einer Schriftgröße von 15 Punkt darstellte.

Verfasst man heute eine Stilregel mit einer Schriftgröße von 1,25em, weist diese den Browser an, die Schrift um das 1,25-fache seiner in der Regel bei 12 Punkt liegenden Voreinstellung zu vergrößern. Hat der Benutzer jedoch seinen Browser auf eine Schriftgröße von 16 Punkt voreingestellt, werden die von der Stilregel betroffenen Textstellen mit 20 Punkt noch größer dargestellt.

Wenn Sie nicht mehr darüber nachdenken, ist das wahrscheinlich am besten. Ein Benutzer, der die Grundschrift vergrößert, braucht diese große Schrift vermutlich. Wenn Sie Text aus irgendeinem guten Grund von 12 auf 14 Punkt vergrößern, dann kann man vernünftigerweise erwarten, dass dieser neue Benutzer genauso einen Vorteil davon hat, wenn er in diesem besonderen Fall die Schrift anstatt in seinen voreingestellten 16 Punkt auf 20 Punkt vergrößert sieht.

Von allen Eigenschaften ist es die Schriftgröße, die die Benutzer am liebsten mit individuellen Voreinstellungen beeinflussen. Daher sollte man als Entwickler auch nicht damit herumpfuschen und sich in jedem Einzelfall genau überlegen, ob man die Schriftgröße wirklich vorschreiben will. In neun von zehn Fällen kann man darauf meiner Ansicht nach verzichten.

Der Vollständigkeit halber möchte ich noch darauf hinweisen, dass es auch bei der Verwendung von relativen Schriftgrößen ein paar Fallen gibt, die man beachten sollte. Unter bestimmten Umständen können relative Schriftwerte Kombinationen oder Multiplikationen miteinander eingehen und dabei ungewollte Ergebnisse im Browser hervorrufen.

In einer Stilregel werden zum Beispiel sowohl fett geschriebene als auch kursiv geschriebene Textstellen mit jeweils 1,5em definiert:

Beide Stilregeln werden zusammen und auf verschiedene Arten im Dokument verwendet:

Wenn Sie diese Stilregeln verschachteln (Anmerkung: Verschachteln heißt, ein Element in ein anderes zu legen, z.B. span in span), werden die Textstellen in 2.25em (1.5em x 1.5em) angezeigt. Die Werte der Schriftgrößen werden in diesem Fall multipliziert. Dieses Problem entsteht bei untergeordneten Elementen, die berechnete Werte aus den Stilregeln ihrer Elternelemente automatisch vererbt bekommen und nicht die relativen Werte. Solche Fehler lassen sich zwar leicht von vornherein vermeiden, werden im Code aber auch schnell übersehen, was zu Aufsehen erregenden Ergebnissen führen kann, wie die folgende Abbildung veranschaulicht.

Abbildung: Chaotische relative Schriftgrößen.