#vuecember2020 #css

Theming mit CSS Custom Properties

Wir bauen bei sum.cumo, eine Tochter des israelischen Softwarekonzerns Sapiens, Plattformen für Versicherungen und Lotterien. Das erfordert je nach Plattform neben markenspezifischer Corporate Identity oft auch spezifische Styles für einzelne Produkte oder Lotterie-Spiele.

Diese Anforderungen setzen wir mittlerweile – mit Blick auf moderne Browser – standardmäßig durch CSS Custom Properties um. Dabei haben sich ein paar Best Practices etabliert, die wir hier kurz ausführen wollen:

Fallbacks für ältere Browser

Um für Nutzer älterer Browser ein nutzbares Interface anzuzeigen, setzen wir für die wichtigsten Elemente simple Fallbacks ein – wir wiederholen den Wert, den wir für die Custom Properties eh als Fallback angeben:

.myAwesomeClass %7B
  background: rebeccapurple;
  background: var(--customBackground, rebeccapurple);
%7D

So ist sichergestellt, dass ältere Browser zumindest eine Farbe anzeigen, während neuere Browser das jeweilige Custom Property verarbeiten, falls es vorhanden ist.

Corporate Identity und lokales Theming vereinen

Oft gilt es, globale Corporate Identity mit lokalem Theming für einzelne Teile des Interfaces zu vereinen. Hier kombinieren wir mehrere Dinge:

Um das jeweilige Theme in den Seitenbereich zu laden, nutzen wir eine Vue-Komponente, die Themes importiert.

Ab dieser Komponente nutzen wir die CSS-Kaskade. Dadurch fallen die definierten Custom Properties an die entsprechenden Stellen.

Wir nutzen darüber hinaus die Möglichkeit, Fallbacks in Fallbacks zu definieren. Somit greifen nacheinander lokales Theming, globale Corporate Identity und notfalls der Fallback:

.myThemedContainer %7B
  background: rebeccapurple;
  background: var(
    --localContainerVariable,
    var(--globalBackgroundVariable, rebeccapurple)
  );
%7D

Dark mode

Das gesamte Setup bietet neben den hier beschriebenen Möglichkeiten natürlich auch die Gelegenheit, granular einen Dark Mode anzubieten, indem wir die entsprechende Farbgebung per Media Query anpassen:

.myTheme %7B
  --localContainerVariable: hotpink;
  --globalBackgroundVariable: fuchsia;
%7D

@media (prefers-color-scheme: dark) %7B
  .myTheme %7B
    --localContainerVariable: lime;
    --globalBackgroundVariable: teal;
  %7D
%7D

Einschränkungen

Dieser Ansatz funktioniert bisher sehr gut. Zwei Dinge müssen jedoch angemerkt werden:

Einerseits beschränken wir das Theming auf Farben, Bilder und im Notfall auch Schriften. Jegliche Änderungen an z.B. Spacings würden sehr hohen QA-Aufwand nach sich ziehen. Daher verzichten wir hierauf.

Andererseits ist der Punkt "Vertrauen in die CSS-Kaskade" natürlich nicht nur hilfreich, sondern birgt auch die Gefahr, Werte aus Versehen zu überschreiben. Durch gut gekapselte Komponenten konnten wir diese Problematik bisher jedoch vermeiden.

Fazit

Durch das Nutzen moderner Browser-Technologien gelingt es uns, unsere Frontends flexibel zu gestalten und ebenso flexibel neue Design-Entwürfe einzuarbeiten.