CSS-Variablen

[marctrix]

Hej Microsoft,

macht bitte eure Hausaufgaben. Jetzt!

Sorry, das musste mal raus...

Und wer mehr lesen möchte:Hier klicken für "CSS-Variablen auf CSS-Tricks" (den Link am Ende zu Lea Verou nicht übersehen!)

Marc

[Gunnar Bittersmann]

@@marctrix

Hej Microsoft,

macht bitte eure Hausaufgaben. Jetzt!

No, no, no my friend!

“Do we have problems with implementations still? Yes, and I’d also tell you to guess what, we always will.” —Molly Holzschlag, Web Browsers No Longer At Fault

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Hej Microsoft,

macht bitte eure Hausaufgaben. Jetzt!

No, no, no my friend!

No, no, no my friends! Web #Browsers are not to blame for majority of current #webdev issues. Overdue epic Mols rant

Ich habe mal den wichtigen Teil des Zitates hervorgehoben.

In diesem speziellen Fall würde ich mich über CSS-Variablen im aktuellen Edge sehr freuen!

Ansonsten bin ich ja sehr dafür, dass du das leidige und unbegründete IE-/MS-Bashing so oft unterbindest.

ABER DOCH BITTE NCIHT BEI MIR!!! ;-)

Marc

[Gunnar Bittersmann]

@@marctrix

In diesem speziellen Fall würde ich mich über CSS-Variablen im aktuellen Edge sehr freuen!

Ich auch.

Ich hatte letztens einen Fall, wo ich CSS-Variablen gebraucht hätte. Und zwar echte; CSS-Postprozessor ging nicht.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Ich hatte letztens einen Fall, wo ich CSS-Variablen gebraucht hätte. Und zwar echte; CSS-Postprozessor ging nicht.

Und Präprozessor? ;-)

Nein im Ernst, könntest du den Fall mal schildern?

Marc

[Gunnar Bittersmann]

@@marctrix

Ich hatte letztens einen Fall, wo ich CSS-Variablen gebraucht hätte. Und zwar echte; CSS-Postprozessor ging nicht.

Und Präprozessor? ;-)

Nein im Ernst, könntest du den Fall mal schildern?

Plattform für recht viele Kunden, wo sich jeder von denen das Aussehen (Logo, Farben etc.) für sich selbst bestimmen konnte.

Präprozessor war im Einsatz:

kunde1.scss (wird kompiliert zu kunde1.css):

$background-color: white;
$text-color: black;
$logo-url: https://example.com/logos/kunde1.png;

@import "styles";

kunde2.scss (wird kompiliert zu kunde2.css):

$background-color: black;
$text-color: white;
$logo-url: https://example.com/logos/kunde2.png;

@import "styles";

_styles.scss (erzeugt keine Datei, sondern wird in alle kunde#.css eingebunden):

html
{
  background-color: $background-color;
  color: $text-color;
}

body > header
{
  background-image: url($logo-url);
}

So wurde für jeden Kunden sein Stylesheet generiert: kunde1.css, kunde2.css, … Es waren aber nicht nur 2, sondern eher so im dreistelligen Bereich. Und das Stylesheet natürlich viel umfangreicher. Das Generieren von hunderten Stylesheets dauerte dann schon eine knappe Minute, und das bei jeder klitzekleinen Änderung.

Mit CSS-Variablen wär alles besser gewesen:

kunde1.css:

:root
{
  --background-color: white;
  --text-color: black;
  --logo-url: "https://example.com/logos/kunde1.png";
}

kunde2.css:

:root
{
  --background-color: black;
  --text-color: white;
  --logo-url: "https://example.com/logos/kunde2.png";
}

styles.scss (wird kompiliert zu styles.css):

html
{
  background-color: var(--background-color);
  color: var(--text-color);
}

body > header
{
  background-image: url(var(--logo-url));
}

Aus style.scss wird lediglich style.css kompiliert, was ruckuck geht. Für jeden Kunden wird seine kunde#.css und die style.css ausgeliefert.

LLAP 🖖

[marctrix]

Hej Gunnar,

Präprozessor war im Einsatz:

kunde1.scss (wird kompiliert zu kunde1.css):

D. h. Jeder Kunde kann sich selber Vorder- und Hintergrundfarbe wählen. So als ob er das in seinen Browser-Einstellungen macht?

Hätte man das nicht besser erklärt? Ich meine ein Par hundert Nurzer klingt nach einem internen Werkzeug, dem man eine Beschreibung beilegen kann.

Wie hast du es dann gelöst? Ich hätte an dieser Seite dann doch mal JavaScript eingesetzt...

Marc

[Gunnar Bittersmann]

@@marctrix

D. h. Jeder Kunde kann sich selber Vorder- und Hintergrundfarbe wählen. So als ob er das in seinen Browser-Einstellungen macht?

Das hab ich wohl zu vereinfacht erklärt. Es ist so: Jeder Kunde hat auf der Plattform seinen eigenen Bereich (Subdomain), den dessen Kunden als dessen Webanwendung wahrnehmen.

Wie hast du es dann gelöst?

Gar nicht. Status quo forever …

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wie hast du es dann gelöst?

Gar nicht. Status quo forever …

Meine Idee wäre gewesen, während der Entwicklung CSS-Variablen wie beschrieben einzusetzen – funktioniert ja in den Browsern, mit denen man entwickelt. Beim Ausrollen aufs Livesystem erst werden die ganzen kunde#.css generiert und die CSS-Variablen durch die entsprechenden festen Werte ersetzt.

Ich bin aber nicht mehr an diesem Projekt.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Meine Idee wäre gewesen, während der Entwicklung CSS-Variablen wie beschrieben einzusetzen – funktioniert ja in den Browsern, mit denen man entwickelt. Beim Ausrollen aufs Livesystem erst werden die ganzen kunde#.css generiert und die CSS-Variablen durch die entsprechenden festen Werte ersetzt.

s/Livesystem/Testsystem.

Man will ja mal in IE/Edge testen, bevor’s live geht.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Gunnar Bittersmann

Meine Idee wäre gewesen, während der Entwicklung CSS-Variablen wie beschrieben einzusetzen – funktioniert ja in den Browsern, mit denen man entwickelt. Beim Ausrollen aufs Livesystem erst werden die ganzen kunde#.css generiert und die CSS-Variablen durch die entsprechenden festen Werte ersetzt.

s/Livesystem/Testsystem.

Man will ja mal in IE/Edge testen, bevor’s live geht.

;-)

Jedenfalls ein interessantes Problem. - Ich hätte es spontan wie gesagt dem Client aufs Auge gedrückt.

Schöne Kopfnuss! - Danke fürs Teilen!

Marc

[Mitleser]

Das Generieren von hunderten Stylesheets dauerte dann schon eine knappe Minute, und das bei jeder klitzekleinen Änderung.

Zur Laufzeit (z.B. mittels node.js) kompilieren und bei Bedarf einen Cache vorschalten?

[Rolf b]

Ich habe mal sowas ähnliches machen müssen; allerdings nicht um Kundenvariabilität zu ermöglichen, sondern um fehlende CSS Variablen und ein in dem Fall fehlendes LESS oder SASS zu ersetzen (konnte ich nicht verwenden weil ein anderer Entwickler sich stur geweigert hat, statische CSS Präprozessoren auch nur anzugucken).

Also habe ich ein style.php gemacht und die Styles per style.php?css=hugo.css geladen. Im style.php habe ich das hugo.css geladen und die Variablen per PHP replaced. Mit einem entsprechenden expires-Header wird es auch brav vom Browser gecached. Damit war's dann selbstgebaut und der Toolstack für Entwickler blieb auf "Texteditor" beschränkt. Äh nein, das war keine professionelle Umgebung, und ich weiß genau, wie schräg diese Sichtweise ist. Das einzige Argument des anderen ist: Mir gehört der Webspace und die PHP App eigentlich auch... Da muss man dann die Nasenklemme aufsetzen und den Kompromist schlucken. Und ja, es hätte sicher eine fertige Library gegeben. Ich hab's aber so simpel gehalten, dass ich nichts weiter tun muss als die Variablen und den expires-Header im PHP zu setzen und dann das CSS zu includen. Im Css steht dann <%=$hugo>^[1]. Dafür brauche ich keine Lib.

Der einzige Nachteil ist, dass mir NetBeans jetzt immer fette rote Ausrufezeichen vor die CSS Datei malt, weil er meint, dass der Inhalt Schrott wäre :D

Rolf

---

1. Ups - sehe gerade: Das ist in PHP7 rausgeflogen?! ↩︎

[dedlfix]

Tach!

Im Css steht dann <%=$hugo>.

Wenn dann eher <%=$hugo%>.

Ups - sehe gerade: Das ist in PHP7 rausgeflogen?!

Aber <?=$hugo?> ist problemlos verwendbar.

dedlfix.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

was ruckuck geht.

Sie meinten: „Kuckuck“?

LLAP 🖖