Die überraschenden Details von CSS-Variablen – Verwendung von var() und coolen Beispielen

Dies ist die zweite Hälfte meines CSS-Variablen-Beitrags, die erste Hälfte ist da.
In diesem Artikel werden wir uns die Details von var() ansehen. Und zwei coole Beispiele:

• Animation mit CSS-Variablen
• Umschalten des reinen CSS-Dunkelmodus mit Systemeinstellungserkennung

Verwendung von var()

Var() greift auf benutzerdefinierte Eigenschaftswerte (CSS-Variablen) zu. Die Syntax lautet wie folgt:

var( <custom-property-name>, <fallback-value>? )

Grundregeln

1. Der erste Parameter muss eine CSS-Variable sein: Direkte Werte wie var(20px) führen zu einem Fehler, da var() nur benutzerdefinierte Eigenschaftsnamen akzeptiert.

2. var() kann Eigenschaftsnamen nicht ersetzen: Mit anderen Worten, Sie können nicht so etwas schreiben wie var(--prop-name): 20px; weil var() nur auf die Verwendung in Eigenschaftswerten beschränkt ist.
   

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

Detaillierte Verhaltensweisen

1. var(--b, fallback_value) Fallbacks: Der zweite Parameter fungiert als Fallback-Wert, der verwendet wird, wenn --b ungültig ist.

2. var(--c,) Syntax mit einem leeren Fallback: Wenn der Fallback-Wert leer bleibt, bleibt die Syntax gültig und wird standardmäßig auf einen leeren Wert gesetzt, wenn --c ungültig ist .

3. Mehrfaches Komma: In var(--d, var(--e), var(--f), var(--g)) ist alles nach dem ersten Komma Wird als Fallback behandelt. Wenn also --d ungültig ist, wertet der var()-Ausdruck var(--e), var(--f), var(--g) als einen Fallback aus, um die zu bestimmen Ergebnis.

4. var() als vollständiges CSS-Token: Die Funktion fungiert als vollständiges CSS-Token, wie es 20px tun würde. Daher erstellt var(--size)var(--unit) keine 20 Pixel und wird als ungültig betrachtet.

5. Verwendung von „initial“ mit CSS-Variablen: Die Zuweisung von „initial“ zu einer CSS-Variablen bedeutet, dass diese ungültig ist. Um initial als Wert anzuzeigen, muss es im Fallback platziert werden.

6. url() und var() Verwendung: Da url() als vollständiges CSS-Token behandelt wird, müssen Sie die vollständige url() innerhalb der Variablen definieren.
   

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

Variable Auflösung und Umfang

CSS-Variablen folgen wie andere CSS-Eigenschaften CSS-spezifischen Regeln für Umfang und Spezifität. Das Verständnis, wie sich diese Faktoren auf CSS-Variablen auswirken, ermöglicht eine präzisere Steuerung.

Globale und bereichsbezogene Variablen:
In :root definierte Variablen werden global angewendet, während die in Selektoren definierten Variablen einen eingeschränkteren Geltungsbereich haben.

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

Priorität nach Spezifität:
Eine höhere Spezifität überschreibt eine niedrigere Spezifität für CSS-Variablen.

var( <custom-property-name>, <fallback-value>? )

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

In diesem Beispiel bleibt die Hintergrundfarbe von .box weiß, da --background in rgb(255, 255, 255) aufgelöst wurde, bevor .box neu definiert wurde --green: 0.

Variablen mit Pseudoklassen neu bewerten:
Variablen ändern sich basierend auf Pseudoklassenzuständen, wenn sie auf derselben Ebene definiert werden.

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

Als nächstes untersuchen wir einige erweiterte Anwendungsfälle für CSS-Variablen:

Anwendungsbeispiel A: Animationen

CSS-Variablen können nicht direkt animiert werden, da der Browser den Datentyp nicht ableiten kann. Um dieses Problem zu beheben, definieren Sie mit @property den Typ und den Anfangswert der Variablen, damit der Browser verstehen kann, wie die Variable animiert wird.

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

   :root {
     --main-color: blue;
   }

   .section {
     --main-color: green; /* Overrides :root definition */
   }

   .section p {
     color: var(--main-color); /* Shows green */
   }

   p {
     color: var(--main-color); /* Shows blue */
   }

Hinzufügen eines manuellen Umschalters, der mit den Systemeinstellungen übereinstimmt

Während die Systemeinstellung das Design standardmäßig steuert, möchten wir Benutzern möglicherweise die Möglichkeit geben, manuell zwischen hellen und dunklen Designs zu wechseln. Um dies zu erreichen, können wir ein Kontrollkästchen hinzufügen, um den Status umzuschalten. Wenn das Kontrollkästchen aktiviert ist, zeigt es im Idealfall den Dunkelmodus an, und wenn es nicht aktiviert ist, stellt es den Hellmodus dar.

CSS kann jedoch Systemeinstellungen nicht automatisch erkennen und den Kontrollkästchenstatus entsprechend ändern, insbesondere im Dunkelmodus. Um diese Einschränkung zu umgehen, können wir CSS-Variablen und den :has()-Selektor verwenden, um den Themenwechsel basierend auf dem Kontrollkästchenstatus zu steuern.

Ich wollte versuchen, dies vollständig mit CSS zu erreichen, aber da das System eines Benutzers möglicherweise entweder auf den hellen oder den dunklen Modus eingestellt ist, kann CSS allein das Kontrollkästchen im dunklen Modus nicht automatisch aktivieren.

Wenn wir den Berg nicht versetzen können, legen wir den Weg fest. Hier ist die Problemumgehung:

• Wir werden CSS verwenden, um einen Kippschalter zu erstellen, bei dem der visuelle „AUS“-Zustand den Hellmodus und „EIN“ den Dunkelmodus darstellt.

• Wenn das System auf den Lichtmodus wechselt: Wenn das Kontrollkästchen deaktiviert ist, entspricht es dem „AUS“-Zustand (Lichtmodus). Wenn es ausgewählt ist, entspricht es dem „EIN“-Zustand (Dunkelmodus).

• Wenn das System in den Dunkelmodus wechselt: Da die Systempräferenz umgekehrt wird, kehrt sich auch der visuelle Zustand um. Wenn das Kontrollkästchen deaktiviert ist, entspricht es „EIN“ (Dunkelmodus). Wenn ausgewählt, entspricht es „AUS“ (Lichtmodus).

Um diesen Effekt zu erzielen, benötigen wir zwei Hauptelemente:

Erstens: Variablen, die sich je nach Systemeinstellung und Kontrollkästchenstatus ändern

var( <custom-property-name>, <fallback-value>? )

Zweitens: Umschalten des Verhaltens basierend auf den Systemeinstellungen für den aktivierten Status und die EIN/AUS-Darstellung

Die CSS-Eigenschaften des Hell- und Dunkelmodus sind je nach Systemeinstellung umgekehrt.

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

Variablen-Setup mit CSS-Variablen-Tricks vereinfachen

Hier verwenden wir die Space Toggle-Technik, um die Variableneinstellungen zu vereinfachen. Hier ist der Code, gefolgt von einer Erklärung seiner Funktionsweise:

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

Der Schlüssel liegt hier in der Zeile --background-color: var(--light, #fbfbfb) var(--dark, #121212);. Hier hängt die Hintergrundfarbe von den Werten von --light und --dark ab und simuliert so effektiv ein If/Else in der Eigenschaft.

Wie funktioniert es? Zunächst --light: var(--ON); und --ON: initial; Machen Sie --ON zu einem ungültigen Zustand. Inzwischen ist --OFF als leere Zeichenfolge festgelegt. Bei Anwendung auf var(--light, #fbfbfb) var(--dark, #121212) wird die ungültige Variable --light standardmäßig auf #fbfbfb gesetzt, und die gültige Variable --dark (leer) lässt --background-color zu gleich #fbfbfb.

Alle anderen Farbvariablen folgen der gleichen Logik und passen sich basierend auf dem Zustand von --light und --dark an. Auf diese Weise muss jede Farbvariable nur einmal definiert werden.

Das Wechseln des Status wird einfacher. Wenn der Dunkelmodus aktiv ist, verwenden Sie --light: var(--OFF); und --dark: var(--ON);. Im Lichtmodus kehren Sie sie um. Obwohl diese Methode nicht sofort intuitiv ist, ist sie mit CSS derzeit die effektivste. Wenn es bessere Lösungen gibt, lohnt es sich, sie zu erkunden.

Vollständiges Beispiel: CodePen-Beispiel

Zusammenfassung

CSS entwickelt sich ständig weiter, seit 2016 sind CSS-Variablen in den wichtigsten Browsern verfügbar. Neue Funktionen wie @property und :has() erweitern die Flexibilität von CSS-Variablen noch weiter. In Kombination mit anderen neuen Tools werden CSS-Variablen immer leistungsfähiger – beispielsweise können sie jetzt scrollgesteuerte Animationen verbessern, um visuell dynamische Effekte zu erzeugen. Als Kernelement für die Zustandsspeicherung in CSS, ähnlich wie Variablen in jeder Programmiersprache, wird sich ein solides Verständnis von CSS-Variablen für anspruchsvolleres Styling und Design in der Zukunft als unschätzbar wertvoll erweisen.

Referenzen

• https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url/42331003#42331003
• https://kizu.dev/symmetric-toggles/#was-this-always-possible
• https://dev.to/afif/what-no-one-told-you-about-css-variables-553o
• https://hackernoon.com/cool-css-variable-tricks-to-try-uyu35e9
• https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

Das obige ist der detaillierte Inhalt vonDie überraschenden Details von CSS-Variablen – Verwendung von var() und coolen Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!