CSS irgendwie zuweisen/übernehmen/vererben

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Beispiel: Schriftgrößen

body { font-size: var(--font-size-medium) }
h1 { font-size: var(--font-size-x-large) }
h2 { font-size: var(--font-size-large) }
blockquote { font-size: var(--font-size-large) }
blockquote footer { font-size: var(--font-size-medium) }

Um auch Browser zu unterstützen, die keine custom properties unterstützen:

body { font-size: 1.1rem; font-size: var(--font-size-medium) }
h1 { font-size: 3rem; font-size: var(--font-size-x-large) }
h2 { font-size: 1.7rem; font-size: var(--font-size-large) }
blockquote { font-size: 1.7rem; font-size: var(--font-size-large) }
blockquote footer { font-size: 1.1rem; font-size: var(--font-size-medium) }

In veralteten Browsern passen sich die Schriftgrößen nicht der Viewportgröße an. Das kann man durchaus verschmerzen, da diese Browser vorwiegend auf Desktop-Geräten mit größeren Monitoren zu finden sind.

Um seine Schäfchen ins Trockene (DRY) zu kriegen, kann ein Präprozessor dienlich sein. Beispiel in Sass

Und auf die Art möchte man sicher nicht nur die Schriftgrößen festlegen, sondern auch die zugehörigen Zeilenabstände. Beispiel in Stylus

LLAP 🖖