Verwenden von benutzerdefinierten CSS-Eigenschaften für bessere UX

Zuletzt aktualisiert - 8. Juli 2021

CSS3 brachte eine der größten Ergänzungen mit sich, die die CSS-Spezifikation seit langem hatte. Es sorgte für viel Aufsehen, weil es ein Schlüsselproblem ansprach, das Entwickler jahrelang geplagt hatte, und war der Hauptgrund dafür, dass die Leute die Verwendung von Präprozessoren wie SASS bevorzugten: die Möglichkeit, Variablen zu verwenden.

Durch das Hinzufügen von CSS-Variablen ist ein Großteil des Codes, der geschrieben werden musste, um grundlegende Funktionen wie Theming zu unterstützen, nicht mehr erforderlich. Es ist eine nützliche Funktion, die verwendet werden kann, um Wiederholungen zu vermeiden und noch mehr Anwendungsfälle wie dynamische Schriftgrößen und Einfachheit bei der Hinzufügung von Reaktionsfähigkeit in einer Web-App zu ermöglichen.

Unordnung mit CSS-Variablen beseitigen

Ein gemeinsames Merkmal der meisten Apps sind Markenfarben, die in der gesamten App gleich und konsistent bleiben müssen. Niemand denkt daran, zehn verschiedene Hex-Werte für spätere Referenzzwecke in seinem Kopf zu speichern, und das Hin- und Hergehen zwischen Dateien zum Kopieren von Werten ist nicht nur umständlich, sondern auch der Produktivität abträglich. Stellen Sie sich nun vor, wie viel Arbeit getan werden muss, wenn diese Farben geändert werden müssen.

Die Verwendung von CSS-Präprozessoren mit WordPress ist die häufigste Methode, um mit dem Problem umzugehen. Diese bieten Unterstützung für eine ganze Reihe von Funktionen wie Mixins, verschachtelte Deklarationen und natürlich Variablen, die die Produktivität erheblich steigern.

Alles, was Sie tun müssen, ist, Ihren Code einmal zu schreiben, und er wird zu CSS kompiliert, auf das Sie frei zugreifen und das Sie ändern können, wenn Sie dies wünschen. Die Unfähigkeit, diese Werte zur Laufzeit zu finden und zu ändern, um beispielsweise Ihrer Web-App ein dunkles Design hinzuzufügen, ist ihr größter Nachteil. Es ist ein großes Problem, nicht nur, weil SASS es nicht unterstützt, sondern es wahrscheinlich nie tun wird.

Das Hinzufügen benutzerdefinierter integrierter Variablen zu CSS-Öffnungen hatte einen großen Einfluss darauf, wie wir Anwendungen schreiben, insbesondere im Hinblick auf Theming und responsives Design.

Wie sieht die Browserunterstützung für CSS-Variablen aus?

Dies ist die häufigste Frage, die gestellt wird, wenn CSS-Variablen in eine Diskussion eingebracht werden. Laut Caniuse liegt die Browserunterstützung für CSS-Variablen bei 93,16 %. Es wird in allen modernen Browsern unterstützt (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ und Edge 16+). Wie immer fehlt IE in der Show und hat einen überraschenden Marktanteil von 6,47 % . Für die armen Entwickler, die alte Browser unterstützen müssen, keine Sorge. Polyfills oder genauer gesagt Ponyfills sind hier, um den Tag zu retten.

Eine formelle Einführung in CSS-Variablen

Wenn Sie mit CSS-Variablen vertraut sind, sollten Sie keine Probleme mit CSS-Variablen haben.

SASS-Variablen werden wie folgt deklariert:

<vor>

$facebook-blau: #4267B2;

</pre>

Während CSS-Variablen etwas anders deklariert werden:

<vor>

:Wurzel {

–Markenfarbe: #4267B2;

}

.brand-navbar {

Hintergrund: var(- -Markenfarbe);

}

</pre>

Beachten Sie einige Unterschiede zwischen den beiden Syntaxen:

• CSS-Variablen müssen zwei Bindestriche vorangestellt werden
• CSS-Variablen werden normalerweise innerhalb von „:root“ deklariert, können aber jederzeit neu deklariert werden.
• CSS-Eigenschaften werden mit der Funktion „var()“ abgerufen.

CSS-Variablen bieten auch Zugriff auf mehrere zusätzliche Funktionen.

Kaskadierende Werte

CSS-Eigenschaften werden nach normalen Kaskadierungsregeln kaskadiert. Mit anderen Worten, die unten stehenden Neudeklarationen wirken sich nicht auf die oben genannten aus.

<vor>

:root { –farbe: gelb; }

div { –farbe: blau; }

#great { –farbe: grün; }

* { Farbe: var(–Farbe); }

<p>Ich werde gelb sein, geerbt von root!</p>

<div>Ich bin blau!</div>

<div id="great">

Es funktionierte! Ich bin grün!

<p>Ich bin auch grün! Von oben geerbt!</p>

</div>

</pre>

Fallback-Werte

Die Funktion 'var()' akzeptiert mehrere Parameter. Der zweite kann als Fallback-Wert verwendet werden, falls die benutzerdefinierte CSS-Eigenschaft nicht definiert ist. Dies ist eine nützliche Funktion für alle, die über JavaScript auf die CSS-Variablen zugreifen müssen.

Seine Signatur sieht aus wie „var(<Name der benutzerdefinierten Eigenschaft> [, <Deklarationswert> ]?)“ und kann wie folgt verwendet werden

<vor>

.brand-navbar {

Hintergrund: var(–Markenfarbe, „#4267B2“);

}

</pre>

Wenn „–brand-color“ nicht definiert ist, wird stattdessen „#4267B2“ verwendet,

Zugriff über JavaScript

Einer der besten Gründe, CSS-Variablen über einen Präprozessor zu verwenden, ist die Möglichkeit, über JavaScript auf benutzerdefinierte Variablen zuzugreifen. Präprozessorvariablen leben nicht im Browser. Sie werden ausgewertet, wenn der Code kompiliert wird. Auf diese Weise kann im Browser nicht auf Präprozessorvariablen zugegriffen werden. Bei CSS-Variablen befindet sich die Eigenschaft im Browser, wodurch die Möglichkeit besteht, Werte im Handumdrehen zu bearbeiten.

Stellen Sie sich ein Dashboard vor, das es dem Benutzer ermöglicht, benutzerdefinierte Farben über ein Popup oder ähnliches auszuwählen.

<vor>

.brand-navbar {

Hintergrund: var(–Markenfarbe, „#4267B2“);

}

//Um den aktuellen Wert zu erhalten

getComputedStyle(document.documentElement).getPropertyValue('–brand-color');

//Um den Wert einzustellen

document.documentElement.style.setProperty('–brand-color', 'red');

//Sie können sogar eine CSS-Eigenschaft einer anderen zuweisen

document.documentElement.style.setProperty('–brand-color','var(–secondary-color)');

</pre>

Globaler und lokaler Geltungsbereich

Wenn Sie mit JavaScript (oder eigentlich jeder anderen Programmiersprache) vertraut sind, verstehen Sie wahrscheinlich das Konzept des Bereichs. Variablen können normalerweise so definiert werden, dass sie nur für bestimmte Teile des Codes zugänglich sind, der als lokaler Bereich bezeichnet wird, oder zur Verwendung in der gesamten App verfügbar gemacht werden, der als globaler Bereich bezeichnet wird.

CSS-Variablen funktionieren ähnlich. Einige Variablen sollten zur einfacheren Bezugnahme global sein, z. B. Markenfarben und vertikale Abstände. Diese bleiben in der Regel in der gesamten App gleich und sollten sich bei einer Änderung überall widerspiegeln. Im Gegensatz dazu umfassen Variablen, die möglicherweise eine lokale Bereichsdefinition erfordern, Schaltflächen mit unterschiedlich großen und kleinen Varianten. Wenn Sie die Auffüllung einer bestimmten Schaltfläche ändern möchten, möchten Sie nicht, dass die Änderungen das gesamte DOM durchlaufen. Es muss an nur einem einzigen Punkt in der App geändert werden.

Standardmäßig sind CSS-Eigenschaften lokal begrenzt. Und wenn Sie entweder mit JavaScript oder einer anderen Programmiersprache gearbeitet haben, hat das Scoping seine eigenen Probleme. Da sie vererbt werden können, verhalten sie sich auch wie lokale Variablen, was einige interessante Auswirkungen haben kann, wenn Sie nicht aufpassen, wie sie verwendet werden. Da Werte kaskadieren, müssen Sie darauf achten, wie Sie sie ändern, insbesondere wenn es um JavaScript geht.

Verwenden von benutzerdefinierten Eigenschaften mit Medienabfragen

Genau wie bei Präprozessoren besteht ein großer Nachteil bei der Verwendung von CSS-Eigenschaften darin, dass sie nicht in Medienabfragen verwendet werden können. Das wird zum Beispiel nicht funktionieren.

<vor>

@media (Mindestbreite: var(–breakpoint)){

Polsterung: 1rem;

}

</pre>

Stattdessen können Sie benutzerdefinierte Eigenschaften in Medienabfragen neu definieren. Wenn Sie die Schriftgröße ändern müssen, wenn der Browser herunterskaliert, haben Sie Glück. Mit CSS-Variablen können Sie Browseränderungen mit JavaScript abhören und alle Größen ändern, die nur einmal herunterskaliert werden müssen.

Was sind einige praktische Anwendungen von benutzerdefinierten CSS-Eigenschaften?

„Neben der Verwendung von CDN-Diensten zur Verbesserung der Websiteleistung ist die Verwendung von benutzerdefinierten CSS-Eigenschaften heute eine der schnellsten Möglichkeiten, die Produktivität zu steigern“, rät Colby Stuart, ein Webdesigner für kundenspezifische Schreibdienste .

Abgesehen von den gut hervorgehobenen Vorteilen trägt es zur Produktivität bei. Gibt es Beispiele aus der Praxis, wie sie in einer Web-App verwendet werden können?

Dunkelmodus hinzugefügt

Ein neuer Trend, der den Verbrauchermarkt erobert hat, ist die Forderung nach Dunkelmodus in allen modernen Softwareprogrammen – einschließlich Web-Apps. Es kann etwas komplizierter sein, als eine dunkle Hintergrundfarbe hinzuzufügen. Andere Dinge, die berücksichtigt werden müssen, sind, wie sich die Textfarben ändern und wie Bilder mit weißem Hintergrund beeinflusst werden.

All dies wird ermöglicht, indem zunächst Variablen in Ihrer gesamten App deklariert werden. Wenn der Benutzer den Schalter auslöst, um das Website-Design dunkel zu machen, lösen Sie eine JavaScript-Funktion aus, die die CSS-Variablen ändert. Wenn Ihre Web-App komplizierter ist, könnte dies auch das Ersetzen der aktuellen Bilder durch Dark-Mode-freundliche Bilder beinhalten.

Dunklen Modus in WordPress hinzufügen

CSS-Variablen waren so einflussreich, dass sie die Welt von WordPress erreicht haben. Heutzutage ist das Erstellen eines dunklen Modus (oder allgemeiner des Themas) einer WordPress-App ziemlich trivial.

Die meisten WordPress-Entwickler verlassen sich auf den Customizer, um das Erscheinungsbild und die Funktionalität ihrer Websites zu ändern. Es bietet Zugriff auf Dinge wie Farben, Schriftarten, Hintergrundbilder usw., indem es auf das CSS Ihrer Website zugreift. Das Hauptproblem dabei ist, dass eine solche CSS-Änderung PHP dazu zwingt, Ihren HTML-Code neu zu rendern, und dadurch den Server veranlasst, die gesamte Datei erneut an den Browser zu senden. Ihre App stellt eine unnötige Anfrage und verbraucht mehr Daten als nötig.

„Wenn eine solche App verbraucherorientiert wäre, würden Sie wahrscheinlich viele Beschwerden erhalten. Wenn Sie keine dedizierten CSS-Dateien für die Variablen haben, die Sie ändern möchten, wird die Sache noch viel schlimmer.“ Helena Newman, leitende Entwicklerin bei papersowl review und Herausgeberin von Diensten zum Verfassen von Lebensläufen, hält dies für eine notwendige Ergänzung der CSS-Spezifikation.

Über CSS-Variablen werden alle Farben im Browser per JavaScript geändert. Die einzige Anforderung, die gestellt wird, besteht darin, das aktuelle Design bei Bedarf auf dem Server beizubehalten. Und selbst dann kann eine solche Variable im Browser gespeichert werden.

Hinzufügen eines responsiven Designs zu einer Website

Mit mehr Mobiltelefonen im Internet als je zuvor war die Notwendigkeit reaktionsschneller Websites so offensichtlich wie nie zuvor. Der wichtigste Aspekt des responsiven Designs, der Entwickler aus den Socken haut, ist die Änderung der Schriftgröße. Für eine App, die mehrere Schriftarten oder dynamische Schriftarten verwendet, ist es eine lästige Pflicht, sie zu verfolgen und für verschiedene Browser zu ändern.

Stattdessen können Sie mit benutzerdefinierten CSS-Eigenschaften eine universelle Schriftgröße definieren, die auf Ihrer gesamten Website verwendet und wiederverwendet werden kann. Falls es geändert werden muss, müssen Sie nur eine JavaScript-Funktion aufrufen und alles funktioniert.

Wenn Sie keine alten Browser unterstützen müssen, können benutzerdefinierte CSS-Variablen in Verbindung mit dem (relativ) neuen Grid-CSS-System verwendet werden, um die Notwendigkeit von Medienabfragen insgesamt zu beseitigen.

Andererseits können immer noch Medienabfragen erforderlich sein, wenn Sie auf Breitenänderungen innerhalb des CSS selbst hören müssen. Nur so können Sie Browser unterstützen, die die Ausführung von JavaScript nicht zulassen.

Fazit

Benutzerdefinierte CSS-Variablen sind einige der bedeutendsten Ergänzungen der Spezifikation seit geraumer Zeit. Sie können Ihren Designprozess vereinfachen, indem sie Unordnung aus Ihren CSS-Dateien entfernen und unnötige zusätzliche Anfragen überflüssig machen.