SVG und custom properties

[Rolf B]

Hallo Matthias,

mit counter geht es nicht, daran bin ich in meinem 51 auch gescheitert. Einen Counter kann man nur in contents verwenden, vermutlich, weil andernfalls die CSS Berechnungen zu inperformant werden.

Man kann leider auch nicht einen custom-property Wert aus dem Wert eines Nachbarn berechnen, nur aus dem Elternwert.

Der Versuch, einen Counter --n zu nennen, funktioniert zwar insoweit, als dass der Counter als solcher funktioniert, aber var(--n) ist trotzdem leer.

Der Schmerz ist durchaus verbreitet, hier ist ein Issue und hier ein Alternativvorschlag. Aber das reift noch.

Ich hab's deshalb so umgesetzt:

.hand .card:nth-of-type(1) { --n: 1; }
.hand .card:nth-of-type(2) { --n: 2; }
.hand .card:nth-of-type(3) { --n: 3; }
.hand .card:nth-of-type(4) { --n: 4; }
.hand .card:nth-of-type(5) { --n: 5; }

In der Hand geht's noch, die hat nicht mehr als 5 Karten. Aber im Nachziehstapel - uiuiui, da sind es 32.

Hier bieten sich Tools wie Less, Sass oder Stylus an, die CSS in der Developer-Toolchain generieren.

Rolf