Einem neu erzeugtem Button eine bestimmte Position zuweisen

[Rolf B]

Hallo Lars,

zum &-Zeichen
Gunnar verwendet das relativ neue Konzept des CSS Nesting. Schau in meinen Self-Blog Beitrag, den ich daraufhin geschrieben habe und der auf den zugehörigen Self-Wiki Eintrag verweist, da wird das erklärt (hoffentlich verstehbar 😉).

zur Frage 1
Ja. Maximal N Buttons ⇒ genau 2×N :has()-Regeln (N Stück für --count und nochmal N Stück für --index)

zur Frage 2
Genauuuu

zur Frage 3
Der circle Container verwendet Grid-Layout. Und zwar ein Grid mit einer Zeile und einer Spalte, also einer einzigen Zelle, die genauso groß wie der Container. Klingt doof? Ja, aber ist es nicht, denn Du bekommst damit zwei Dinge geschenkt:

• Alle Buttons können in dieser Zelle platziert werden und liegen damit übereinander
• Du kannst die Buttons bequem in der Zelle zentrieren, mit place-self: center.

Die Alternative wäre absolute Positionierung und ein Herumrechnen mit der Position, oder ein Fummeln mit dem Padding. So ist's viel klarer, was passiert. Solange man das Grid-Layoutmodell kennt…

Ausgehend von dieser Zentrierung werden die Kreise nun um den berechneten Radiuswert nach außen geschoben. Hier kommt ein weiterer Trick ins Spiel: 50cqw. Das ist eine Einheit aus dem CSS Containermodell und bedeutet: 50% der Breite meines Containers. Die CSS Eigenschaft container-type: inline-size macht aus dem .button-circle-Element einen Größencontainer, deswegen ist die Einheit anwendbar. Und warum nicht einfach var(--size) / 2? Der Container ist responsiv, er ist 20em groß, wenn Platz ist, andernfalls verkleinert er sich so, dass er maximal so breit und hoch ist wie der Bildschirm. Das erreicht Gunnar durch eine Begrenzung der Containerbreite auf das Minimum von var(--size), 100% (Breite des Body) und 100vh - 16px. 100vh ist 100% Viewporthöhe, und 16px sind die 8px Margin, die der Body browserseitig oben und unten bekommt. Pfui, Gunnar, eine magische Zahl!1!!elf! Jedenfalls bedeutet die Responsivität, dass var(--size) nicht unbedingt die wahre Größe des Containers enthält. 50cqw hingegen schon.

Die Richtung, um die verschoben wird, berechnet sich dann standardmäßig mit Sinus und Cosinus. In der Mathematik haben wir zwar gelernt, dass der Cosinus für die X-Richtung und der Sinus für die Y-Richtung zuständig ist, aber dort zeigt der 0°-Winkel auch nach rechts, der Winkelwert steigt gegen den Uhrzeigersinn und die y-Koordinate zeigt nach oben. Im Browser zeigt die y-Koordinate nach unten und Gunnars Modell lässt den 0°-Winkel nach oben zeigen und den Winkelwert im Uhrzeigersinn ansteigen, deswegen die abweichende Verwendung von sin und cos und der Faktor -1 für die y-Koordinate.

Tatsächlich steckt in diesen unschuldigen Zeilen also eine Menge CSS-Knowhow drin, das einem Einsteiger nicht unbedingt offensichtlich ist, deshalb habe ich mir jetzt die Mühe dieser langen Antwort gemacht.

Es ist zwar nett, eine CSS-only Lösung zu haben. Aber ich hätte mir vermutlich doch die Mühe gemacht, mit JavaScript die Werte von --count und --index zu bestimmen. An dieser Stelle fehlen CSS noch Features, aber die Diskussion läuft schon und wenn Tab Atkins und Jake Archibald da die Finger dran haben, könnte auch was passieren.

Rolf