GELÖST: Wie findet man die Höhe eines Textes im Flex-Kontainer nur mit CSS zur Ausrichtung heraus?

[Gunnar Bittersmann]

@@MB

Um auf die Wege zu gelangen, müsste ich das Profi Wissen von CSS erlernen, […] um effektiven CSS Code schreiben zu können, welches den SPOT Anspruch genügt

Nö.

Ich würde auch sagen, dass viele Profis nicht das Wissen haben. (Profis in dem Sinne, dass sie das beruflich machen; nicht, dass sie das besonders gut machen.)

Profis verwenden oft CSS-Präprozessoren, da hat man dann mit

$size: 1em;
width: $size;
height: $size;

auch einen single point of truth. (Dass daraus width: 1em; height: 1em erzeugt wird, ist irrelevant.)

Ohne Präprozessor kriegt man das mit custom property auch hin:

--size: 1em;
width: var(--size);
height: var(--size);

Das geht aber besser:

aspect-ratio: 1;
width: 1em;

oder

aspect-ratio: 1;
height: 1em;

Fun fact: Das wird nach CSS counters, @counter-style und ::marker-Pseudoelement das nächste sein, was ich bei meiner nächsten Präsentation zeigen werde. Nur in rund: Zifferblatt.

Am Ende wird die Uhr auch Zeiger haben und gehen.

Der Anstoß dazu kam auch hier aus dem Forum.

🖖 Живіть довго і процвітайте