Schriftgröße mit rem statt em oder px? So geht’s…
Oftmals streiten sich Gelehrten, ob die Größenangaben in absoluter oder relativer Form getroffen werden sollen — in px oder em. In den vergangen Jahren war diese Entscheidung oftmals auf die em-Variante gefallen. Seit kurzer Zeit habe ich persönlich den Eindruck, dass dieser wieder Trend rückgäng wird. Das find ich eigentlich gut, da ich schon immer ein Verfechter der absoluten Größenangabe war.
Nachteil bei der Verwendung von em: das Elternelement vererbt die Größenangabe nach unten (also an die Kindelemente) weiter. Beispiel:
<body style="font-size: 62.5%;">
<div style="font-size: 1.4em;">
<p>Paragraph 1</p>
<p style="font-size: 1.2em;">Paragraph 2</p>
</div>
</body>
Erläuterung / Problemstellung
Wir wissen, dass die Standardschriftgröße der meisten Browser auf 16px voreingestellt. Damit ist im body eine Schriftgröße 62.5% = 10px, im div–Element 10px x 1.4 = 14px und im zweiten p–Element 10px x 1.2 = 12px. Falsch!
Die Schriftgröße vom div-Element wird an das zweite p-Element mit durchgereicht. Das bedeutet dort ist keine Schriftgröße von 12px, sondern von 10 x 1.4 x 1.2 = 16,8px. Das kann ein Problem großes Problem bei komplexen Layouts werden. Bei absoluten Größenangabe passiert sowas nicht.
Die Alternative: Angabe mit rem
rem soll hierzu Abhilfe schaffen. Demnach soll rem (“root em”) sich grundsätzlich auf das oberste Root Element beziehen. Bezogen auf unsere Beispiel von oben würde dann die Rechnung aufgehen, dass das zweite p–Element tatsächlich eine Schriftgröße von 12px hätte, da das Root Element (hier: body) eine Größe von 62.5% (entspr. 10px) hätte -> 10 x 1.2 = 12px.
What’s the catch dude?
Bis hierhin eigentlich genial. Warum zum Murphy benutze ich das noch nicht?! Hmm … ich habe bis hier her einen wichtigen Punkt vergessen zu erwähnen: das gibt’s nur bei der Verwendung von CSS3.
Daraus ergibt sich wieder welche Problematik? Genau, damit ist die Cross Browser-Fähigkeit unserer tollen seite im … naja da, wo sie nicht hingehört 
Der IE bis einschließlich Version 8 kann damit nicht viel anfangen. Der Opera angeblich auch nicht — bin leider noch nicht selbst zum Testen gekommen. Aber man kann ja eine Art Fallback bauen…
body {
font-size: 62.5%; /* entspr. 10px (meistens) */
}
div {
font-size: 14px; /* erstmal auf Nummer sicher gehen */
font-size: 1.4rem; /* auf 14px */
}
div p:last-child { /* Achtung: auch CSS3, fuer CSS 2 p.last verwenden */
font-size: 12px;
font-size: 1.2rem;
}
Damit kann sich der Browser aussuchen mit welcher Angabe er umgehen kann. Er greift sich erst die px–Angabe. Kennt er die rem–Einheit, nimmt er den diesen Wert und überschreibt die px–Angabe. Wie beim Militär: der letzte Befehl zählt
In diesem Sinne … happy coding
One Response to Schriftgröße mit rem statt em oder px? So geht’s…
Hinterlasse eine Antwort
5% Rabatt — Raedan Handytaschen
Einfach den Gutscheincode GUARDIAN eingeben und 5% Rabatt abstauben.
Schön geschrieben. Die rem Variante hätte ja auch schon mal eher kommen können