Les détails surprenants des variables CSS - Utilisation de var() et d'exemples sympas

Voici la seconde moitié de mon article sur les variables CSS, la première moitié est ici.
Dans cet article, nous examinerons les détails de var(). Et deux exemples sympas :

• Animation utilisant des variables CSS
• Basculement du mode sombre CSS pur avec détection des paramètres du système

Utiliser var()

Le var() accède aux valeurs des propriétés personnalisées (variables CSS). Sa syntaxe est la suivante :

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

Règles de base

1. Le premier paramètre doit être une variable CSS : Les valeurs directes, telles que var(20px), entraîneront une erreur, car var() n'accepte que les noms de propriétés personnalisés.

2. var() ne peut pas remplacer les noms de propriété : En d'autres termes, vous ne pouvez pas écrire quelque chose comme var(--prop-name): 20px; car var() est limité à une utilisation dans les valeurs de propriété uniquement.
   

.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 */
}

Comportements détaillés

1. var(--b, fallback_value) Fallbacks : Le deuxième paramètre agit comme une valeur de repli, utilisée lorsque --b n'est pas valide.

2. var(--c,) Syntaxe avec une valeur de secours vide : Si la valeur de secours est laissée vide, la syntaxe reste valide et prendra par défaut une valeur vide si --c n'est pas valide .

3. Virgules multiples : Dans var(--d, var(--e), var(--f), var(--g)), tout ce qui suit la première virgule est traité comme une solution de secours, donc si --d n'est pas valide, l'expression var() évalue var(--e), var(--f), var(--g) comme une solution de secours, pour déterminer la solution de secours. résultat.

4. var() comme jeton CSS complet : La fonction agit comme un jeton CSS complet, comme le ferait 20px. Par conséquent, var(--size)var(--unit) ne créera pas 20px et est considéré comme invalide.

5. Utiliser initial avec des variables CSS : Attribuer initial à une variable CSS signifie qu'elle n'est pas valide. Pour afficher initial comme valeur, il faut le placer en repli.

6. url() et var() Utilisation : Puisque url() est traité comme un jeton CSS complet, vous devez définir l'url() complète dans la variable.
   

: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 */
}

Résolution et portée variables

Les variables CSS, comme les autres propriétés CSS, suivent les règles spécifiques au CSS en matière de portée et de spécificité. Comprendre comment ces facteurs affectent les variables CSS permet un contrôle plus précis.

Variables globales et étendues :
Les variables définies dans :root sont appliquées globalement, tandis que celles définies dans les sélecteurs ont une portée plus limitée.

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

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

Priorité par spécificité :
Une spécificité plus élevée remplacera une spécificité plus faible pour les variables CSS.

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 */
}

Dans cet exemple, la couleur d'arrière-plan de .box reste blanche, car --background a été résolu en rgb(255, 255, 255) avant que .box ne soit redéfini --green : 0.

Réévaluation des variables avec des pseudo-classes :
Les variables changent en fonction des états de pseudo-classe lorsqu'elles sont définies au même niveau.

: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 */
}

Ensuite, explorons quelques cas d'utilisation avancés des variables CSS :

Exemple d'utilisation A : Animations

Les variables CSS ne peuvent pas être directement animées car le navigateur ne peut pas déduire le type de données. Pour résoudre ce problème, utilisez @property pour définir le type et la valeur initiale de la variable, permettant ainsi au navigateur de comprendre comment animer la variable.

   :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 */
   }

Ajout d'une bascule manuelle qui s'aligne sur les préférences système

Bien que les paramètres système contrôlent le thème par défaut, nous souhaiterons peut-être donner aux utilisateurs la possibilité de basculer manuellement entre les thèmes clairs et sombres. Pour y parvenir, nous pouvons ajouter une case à cocher pour basculer l'état. Idéalement, lorsque la case est cochée, elle indique le mode sombre, et lorsqu'elle n'est pas cochée, elle représente le mode clair.

Cependant, CSS ne peut pas détecter automatiquement les paramètres du système et modifier l'état de la case à cocher en conséquence, en particulier en mode sombre. Pour gérer cette limitation, nous pouvons utiliser des variables CSS et le sélecteur :has() pour contrôler le changement de thème en fonction de l'état de la case à cocher.

Je voulais essayer d'y parvenir entièrement avec CSS, mais comme le système d'un utilisateur peut être réglé en mode clair ou sombre, CSS seul ne peut pas cocher automatiquement la case en mode sombre.

Si nous ne pouvons pas déplacer la montagne, nous tracerons le chemin. Voici la solution de contournement :

• Nous utiliserons CSS pour créer un interrupteur à bascule, où l'état visuel « OFF » représente le mode clair et « ON » représente le mode sombre.

• Lorsque le système passe en mode éclairage : Lorsque la case est décochée, elle correspond à l'état « OFF » (mode éclairage). Lorsqu'il est sélectionné, il correspond à l'état « ON » (mode sombre).

• Lorsque le système passe en mode sombre : Étant donné que la préférence système est inversée, l'état visuel s'inverse également. Lorsque la case est décochée, elle correspond à « ON » (mode sombre). Lorsqu'il est sélectionné, il correspond à « OFF » (mode lumière).

Pour obtenir cet effet, nous avons besoin de deux éléments principaux :

Premier : les variables qui changent en fonction des paramètres du système et de l'état des cases à cocher

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

Deuxièmement : basculer le comportement en fonction des paramètres système pour l'état vérifié et la représentation ON/OFF

Les propriétés CSS des modes clair et sombre sont inversées en fonction du paramètre système.

.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 */
}

Simplifier la configuration des variables avec des astuces de variables CSS

Ici, nous utiliserons la technique Space Toggle pour simplifier les paramètres des variables. Voici le code, suivi d'une explication de son fonctionnement :

: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 */
}

La clé ici est dans la ligne --background-color: var(--light, #fbfbfb) var(--dark, #121212);. Ici, la couleur d'arrière-plan dépend des valeurs de --light et --dark, simulant efficacement un if/else dans la propriété.

Comment ça marche ? Initialement, --light: var(--ON); et --ON : initiale ; faites de --ON un état invalide. Pendant ce temps, --OFF est défini comme une chaîne vide. Lorsqu'elle est appliquée à var(--light, #fbfbfb) var(--dark, #121212), la variable --light non valide sera par défaut #fbfbfb, et la variable --dark valide (vide) autorise --background-color pour égaler #fbfbfb.

Toutes les autres variables de couleur suivent la même logique, s'ajustant en fonction de l'état de --light et --dark. De cette façon, chaque variable de couleur ne doit être définie qu'une seule fois.

Changer d'état devient simple. Si le mode sombre est actif, utilisez --light: var(--OFF); et --dark : var(--ON);. En mode lumière, inversez-les. Bien que pas immédiatement intuitive, cette méthode est actuellement la plus efficace avec CSS. S'il existe de meilleures solutions, elles valent la peine d'être explorées.

Exemple complet : Exemple CodePen

Résumé

CSS continue d'évoluer, avec des variables CSS disponibles dans les principaux navigateurs depuis 2016. De nouvelles fonctionnalités telles que @property et :has() étendent encore plus la flexibilité des variables CSS. Combinées à d'autres nouveaux outils, les variables CSS deviennent plus puissantes : par exemple, elles peuvent désormais améliorer les animations à défilement pour créer des effets visuellement dynamiques. En tant qu'élément central du stockage de l'état en CSS, tout comme les variables dans n'importe quel langage de programmation, une solide compréhension des variables CSS s'avérera inestimable pour un style et une conception plus sophistiqués à l'avenir.

Références

• https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url/42331003#42331003
• https://kizu.dev/cyclic-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/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!