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!