Introduction à l'utilisation des variables en CSS (avec exemples)

Cet article vous apporte une introduction à l'utilisation des variables en CSS (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aidé.

Il y a deux jours, j'ai vu l'article de Ruan Dashen sur l'utilisation des variables en CSS et je l'ai réglé.

Cette nouvelle fonctionnalité CSS importante est déjà prise en charge par tous les principaux navigateurs. Cet article fournit une introduction complète sur la façon de l'utiliser, et vous constaterez que le CSS natif devient extrêmement puissant.

1. Déclaration des variables

Lors de la déclaration d'une variable, deux tirets (--) doivent être ajoutés devant le nom de la variable.

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

Dans le code ci-dessus, deux variables sont déclarées dans le sélecteur de corps : --foo et --bar.

Ils ne sont pas différents des propriétés formelles telles que la couleur et la taille de la police, mais ils n'ont pas de signification par défaut. Par conséquent, les variables CSS sont également appelées « propriétés personnalisées CSS ». Parce que les variables et les propriétés CSS personnalisées sont en fait la même chose.

Vous vous demandez peut-être pourquoi choisir deux lignes de conjonction (--) pour représenter les variables ? Parce que $foo est utilisé par Sass et @foo est utilisé par Less. Afin d'éviter les conflits, les variables CSS officielles utilisent à la place deux lignes de conjonction.

Diverses valeurs peuvent être mises dans les variables CSS.

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

Les noms de variables sont sensibles à la casse. --header-color et --Header-Color sont deux variables différentes.

2. La fonction var()

var() est utilisée pour lire les variables.

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

var()La fonction peut également utiliser un deuxième paramètre pour représenter la valeur par défaut de la variable. Si la variable n'existe pas, cette valeur par défaut sera utilisée.

color: var(--foo, #7F583F);

Le deuxième paramètre ne gère pas les virgules ou les espaces internes et est considéré comme faisant partie du paramètre.

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()La fonction peut également être utilisée dans la déclaration de variables.

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

Notez que les valeurs de variables ne peuvent être utilisées que comme valeurs d'attribut, pas comme noms d'attribut.

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

Dans le code ci-dessus, la variable --side est utilisée comme nom d'attribut, ce qui n'est pas valide.

3. Type de valeur de variable

Si la valeur de variable est une chaîne, elle peut être concaténée avec d'autres chaînes.

--bar: 'hello';
--foo: var(--bar)' world';

En utilisant ceci, vous pouvez déboguer (exemple).

body:after {
  content: '--screen-category : 'var(--screen-category);
}

Si la valeur de la variable est une valeur numérique, elle ne peut pas être utilisée directement avec l'unité numérique.

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

Dans le code ci-dessus, la valeur et l'unité sont écrites directement ensemble, ce qui n'est pas valide. Vous devez utiliser la fonction calc() pour les connecter.

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

Si la valeur de la variable a une unité, elle ne peut pas être écrite sous forme de chaîne.

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

4. Portée

La même variable CSS peut être déclarée dans plusieurs sélecteurs. Lors de la lecture, l'instruction ayant la priorité la plus élevée prend effet. Ceci est cohérent avec la règle CSS « cascade ».

Voici un exemple.

<style>
  :root { --color: blue; }
  p { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }</style><p>蓝色</p><p>绿色</p><p id="alert">红色</p>

Dans le code ci-dessus, les trois sélecteurs déclarent la variable --color. Lorsque différents éléments lisent cette variable, la règle avec la priorité la plus élevée sera utilisée, donc les couleurs des trois paragraphes de texte sont différentes.

C'est-à-dire que la portée d'une variable est la portée valide du sélecteur dans lequel elle se trouve.

body {
  --foo: #7F583F;
}

.content {
  --bar: #F7EFD2;
}

Dans le code ci-dessus, la portée de la variable --foo est la portée effective du sélecteur de corps, et la portée de --bar est la portée effective du sélecteur .content.

Pour cette raison, les variables globales sont généralement placées à l'intérieur de l'élément racine :root pour garantir que tout sélecteur puisse les lire.

:root {
  --main-color: #06c;
}

5. Mise en page responsive

Le CSS est dynamique, et toute modification de la page entraînera des changements dans les règles adoptées.

Grâce à cette fonctionnalité, vous pouvez déclarer des variables dans la commande multimédia de la mise en page réactive, de sorte que différentes largeurs d'écran aient des valeurs de variables différentes.

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}

6. Traitement de compatibilité

Pour les navigateurs qui ne prennent pas en charge les variables CSS, vous pouvez utiliser la méthode d'écriture suivante.

a {
  color: #7F583F;
  color: var(--primary);
}

peut également être détecté à l'aide de la commande @support.

@supports ( (--a: 0)) {
  /* supported */
}
@supports ( not (--a: 0)) {
  /* not supported */
}

7. Opération JavaScript

JavaScript peut également détecter si le navigateur prend en charge les variables CSS.

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

JavaScript exploite les variables CSS comme suit.

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

Cela signifie que JavaScript peut stocker des valeurs arbitraires dans des feuilles de style. Ce qui suit est un exemple d'écoute d'un événement et les informations sur l'événement sont stockées dans une variable CSS.

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

Les informations qui ne sont pas utiles pour CSS peuvent également être placées dans des variables CSS.

--foo: if(x > 5) this.width = 10;

Dans le code ci-dessus, la valeur de --foo est une instruction invalide en CSS, mais elle peut être lue par JavaScript. Cela signifie que vous pouvez écrire des paramètres de style dans des variables CSS et laisser JavaScript les lire.

Ainsi, les variables CSS permettent à JavaScript de communiquer avec CSS.

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!