Vererbung von %- und em-Werten

[molily]

Hallo!

ich bin dabei, mich in HTML, CSS einzuarbeiten.
Da habe ich gelesen:
Verwende em oder % statt px im Hinblick auf Portabilität.

Das ist in Bezug auf Schritgrößen eine veraltete Regel. Vor längerer Zeit konnten Browser px-Angaben nicht vernünftig skalieren und sie haben nur relative Schriftgrößen, nicht das gesamte Layout skaliert. Heutzutage macht es für den Nutzer in aller Regel keinen Unterschied, ob dein CSS Prozent- oder Pixelwerte verwendet. Die Website wird automatisch skaliert oder der Nutzer kann sie komplett skalieren.

em- bzw. %-Werte können sich auf die im Browser eingestellte Schriftgröße beziehen. Das ist ein möglicher Vorteil. Allerdings ändern die wenigsten Nutzer diese Standardeinstellung (bei Desktop-Browsern häufig 16px). Für die Mehrheit ergibt sich daher kein Vorteil, wenn du % oder em verwendest.

Die Nutzung von em für das Layout ist weiterhin sinnvoll, im Zuge dessen gegebenenfalls auch für font-size, damit Proportionen beibehalten werden. Der Trend geht aber zu px- pder %-basierten Layoutgrößen sowie px-basierten Schriftgrößen. Das Gesamtlayout reagiert über Media Queries auf verschiedene Viewport-Größen.

Jetzt sehe ich des öfteren - vor allem bei Rahmenangaben 1px oder 2px.

1. Ist es da wirklich angebracht, 0.06em bezw. 0.125em oder 6.25% bzw. 12.5% anzugeben oder was ist sinnvoll?

Diese Angaben können zu inkonsistenten Umrechnungen in px führen. Wenn du ein komplett skalierbares Layout samt Rahmen haben willst und mit ein, zwei Pixeln Unterschied leben kannst, ist das okay. Ansonsten solltest du px-Werte anstatt diese unleserlichen Bruchzahlen verwenden.

Randnotiz: Browser rendern heutzutage subpixelbasiert sowie mit logischen anstatt physikalischen px-Werten, daher erfolgt nicht unbedingt eine Rundung auf volle Device-Pixel. Auf vielen Geräten entspricht ein CSS-Pixel nicht einem Hardware-Pixel und viele Websites werden sowieso skaliert angezeigt.

Außerdem solltest du bei der Arbeit mit em oder Prozent-Werten noch beachten, dass die Werte eines Eltern-Elements auf die Kind-Elemente übertragen werden.

Das Problem betrifft hauptsächlich Schriftgrößen – deswegen nutzt keine komplexe Site konsequent Schriftgrößen in den Einheiten % bzw. em. Diese waren nur ernsthaft im Gespräch, als gewisse verbreitete Browser Websites noch nicht vernünftig skalieren konnten. px ist immer noch Standard.

2. Wie kann ich erreichen, dass in allen Ebenen einer Verschachtelung die Schriftgröße gleich bleibt (ohne wieder auf px auszuweichen)?

Es gibt die Einheit rem, welche insbesondere für font-size sinnvoller ist als % und em. Bei rem bezieht sich der Werte immer auf die Ausgangs-Schriftgröße beim obersten html-Element (= 1rem, oftmals = 16px). Diese Einheit hat die beschriebene Schwäche nicht: Zwei verschachtelte Elemente mit 0.8rem haben dieselbe Schriftgröße.

Allerdings unterstützen nur neuere Browser die rem-Einheit und für ältere müsstest du weiterhin mit px, % oder em arbeiten. Du müsstest also eine Fallback-Lösung bereitstellen und kämest somit nicht über die Probleme von em hinweg.

Grüße,
Mathias