CSS mit Variablen, aber ohne PHP, JS und Co.

Mike Rofon

Erfahrenes Mitglied
Es gab das Thema Variablen in CSS schonmal, aber das war 2012...

Ich möchte eine CSS Definition mit einem sich ändernden Background-Image bauen.
Dabei hab ich weder PHP noch JS noch sonstwas zur Verfügung.
Das eigentliche CSS zeigt ein Overlay für eine Simulationssoftware
Bisher bin ich so weit daß man folgendes machen kann:
.overlay {
--header-logo: url(http://www.domain.net/media/bildname.png);
}
und dann an passender Stelle
.logo { background-image: var(--ticker-logo);

Jetzt stellt die Software style-Attribute bereit wie --serien-id
aber so Sachen wie zB.
.overlay { --header-logo: url('https://myserver.com/mylogos/series/' var(--series-id) '.png');
}
in verschiedenen syntaktischen Versionen, scheint nicht zu klappen....
Oder vielleicht doch?

VG
Mike
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Nach allem, was ich dazu finde, z. B. dieses:
Is there a way to interpolate CSS variables with url()?
und nach dem, was ich selber teste, geht das nicht mit dem Inhalt von url().
Getestet habe ich dieses:
CSS:
        :root {
            --bg-idx: '1';
        }

        #test-css-concat {
            /* funktioniert nicht, die Variable wird nicht eingesetzt
            sondern die URL, so wie sie notiert wurde, geladen: */
            background-image: url(images/diavar\(--bg-idx\).jpg);

            /* funktioniert ebenfalls nicht, VS-Code meldet Fehler,
            der Browser nicht aber das Bild wird nicht geladen: */
            background-image: url('images/dia'var(--bg-idx)'.jpg');
        }

        /* dies funktioniert: */
        #test-css-concat::before {
            content: 'x''y';
        }

        /* dies funktioniert: */
        #test-css-concat::after {
            content: 'x'var(--bg-idx);
        }
D. h. man muss wohl auf Javascript oder PHP zurück greifen.
 

Mike Rofon

Erfahrenes Mitglied
@Sempervivum die "Webseite" oder präziser das Game-Overlay wird von einer Software produziert, auf die ich weder Zugriff noch Einfluß habe. Ich kann nur das Design ändern. Und damit werd ich mir einen anderen Weg suchen müssen. Danke für Deine Zeit.
 

Andreas-B

Mitglied
--header-logo: url('https://myserver.com/mylogos/series/' var(--series-id) '.png');
Das ist leider nicht möglich.

Der Wert einer CSS Variable kann nur einen sogenannten "declaration-value" typ enthalten und dieser darf nur aus einem oder mehreren Tokens bestehen.
ein URL-Token enthält lauf definition die komplette URL (inclusive der öffnenden und schließenden Klammer).

Da ein CSS Variablen-Wert nur aus kompletten Tokens bestehen kann, kann er nicht aus Teilen eines URL-Tokens bestehen.


@Mike Rofon Wenn es dir auch nicht zur Lösung verhilft, ist das doch hoffentlich eine Erklärung dafür, warum deine Idee nicht funktionieren wird.
 
Zuletzt bearbeitet: