Vererbung von Eigenschaften

[Hemme]

Hallo,
ich bin dabei, mich in HTML, CSS einzuarbeiten.
Da habe ich gelesen:
Verwende em oder % statt px im Hinblick auf Portabilität.
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?

Dann habe ich gelesen:
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.

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

[Matthias Apsel]

Om nah hoo pez nyeetz, Hemme!

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

Wenn die Rahmenbreite in Bezug auf den Inhalt vernachlässigbar sein soll, dann verwende ruhigen Gewissens 2px. Soll aber der Rahmen mit der Seitenbreite wachsen, musst du natürlich relative Werte verwenden.

Dann habe ich gelesen:
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 stimmt so in dieser Formulierung nicht, oder ich verstehe nicht was gemeint ist.

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

Indem du dir keine Angaben über die Schriftgrößen in den verschachtelten Elementen machst.

Du hast eine verschachtelte Liste, die äußere font-size: p%;

• Der Browser ermittelt die tatsächliche Schriftgröße in Pixel
• Diese ermittelte Größe in px bekommen auch alle Kinder

Erst wenn du jetzt der inneren Liste auch eine Angabe à la p% verpasst, werden es dann p% von p% sein, das, was man im Allgemeinen auch haben möchte.

Matthias

[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

[Gunnar Bittersmann]

@@molily:

nuqneH

Der Trend geht aber zu px- pder %-basierten Layoutgrößen sowie px-basierten Schriftgrößen.

Da gibt es andere Meinungen.

Das Gesamtlayout reagiert über Media Queries auf verschiedene Viewport-Größen.

Gerade bei Media-Queries bietet sich die Angabe in em anstatt px an.

Zumindest wenn man’s richtig™ macht und Breakpoints nicht anhand irgendwelcher heute gerade hipper Geräte setzt, sondern anhand des Inhalts. Bei 42em kann man die Breite abschätzen, bei 672px nicht.

Qapla'

[Gunnar Bittersmann]

@@Hemme:

nuqneH

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?

Kommt drauf an.

Manche Angaben will man vielleicht nicht auf die Schriftgröße beziehen. Ein Rahmen soll vielleicht immer 1px dick sein, unabhängig davon, ob die Basisschritfgröße 1em nun 16px oder 20px oder sonstwas ist.

Andere Angaben wie Abstände zwischen Elementen will man eher auf die Schriftgröße als auf Pixel beziehen, da ist eine Angabe wie 0.5em sinnvoller als 8px, denn bei geänderter Basisschritfgröße skaliert der Abstand mit.

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

Mit der Einheit rem, ggfs. mit Pixel-Fallback für ältere Browser. Mit CSS-Präprozessor ein Kinderspiel.

Qapla'

[Steel]

Hi!

Meistens muss man mischen. Grafiken sind z.B. so ein Ding. Mache Grafiken kann man z.b. froehlich mitskalieren, andere nicht. Einfache Grafiken, wie Logos kann man oft mit em Angaben versehen. Andere, detailiertere Grafiken oft nicht. Wenn Du dann sowas hast, musst Du oft Elemente die mit dieser Grafik zu tun haben, ebenfalls mit Pixelangaben versehen.

Gerade Raender sind typische Vertreter fuer Pixelangaben.