description des variables CSS et tutoriel

Le CSS est un langage essentiel pour notre développement front-end. Être capable de bien l'utiliser rendra notre développement très efficace. Il n'y a toujours pas eu de variables en CSS. Pour utiliser des variables CSS, vous pouvez simplement utiliser des précompilateurs tels que SASS. ou MOINS. En mars de cette année, Microsoft a annoncé que le navigateur Edge prendrait en charge les variables CSS. 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. Cet article vous permettra d'apprendre quelques utilisations des variables CSS.

1. Déclaration des variables

Lors de la déclaration d'une variable, ajoutez deux tirets (--) 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. Fonction var()

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

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

La fonction var() 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()函数还可以用在变量的声明。
: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 cela, 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; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }</style><p>蓝色</p><div>绿色</div><div id="alert">红色</div>

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);}

Vous pouvez également utiliser la commande @support pour la détection.

@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.

Je pense que vous maîtrisez déjà beaucoup de connaissances sur les variables CSS. J'espère que ce tutoriel pourra vous aider dans votre travail.

Tutoriels associés :

Nouvelles connaissances : variable-variable CSS

La première variable CSS : currentColor_html/css_WEB-ITnose

Variable CSS trial_html/css_WEB-ITnose

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!