Compréhension approfondie des variables CSS (résumé organisé)

Cet article vous apporte des connaissances pertinentes sur les variables CSS. Le CSS natif a progressivement commencé à prendre en charge l'imbrication, les variables et les fonctions de fonction. J'espère qu'il sera utile à tout le monde.

Tous ceux qui ont utilisé Sass ou Less savent qu'ils peuvent principalement avoir des fonctions d'imbrication, de variables et de fonctions. En fait, le CSS natif a commencé à le prendre en charge progressivement. Il est vrai que seuls vous et moi le connaissons. présent, et d'autres en sont encore à leurs balbutiements, comprenez les variables CSS, vous constaterez que CSS devient désormais extrêmement puissant.

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: #ed145b;
  --bar: #F7EFD2;
}
// 全局声明
:root{
  --foo: #ed145b;
  --bar: #F7EFD2;
}

Par exemple, ci-dessus, nous avons déclaré deux variables : --foo et --bar In. En fait, vous devez seulement les comprendre comme des propriétés CSS personnalisées. Elles ne sont pas différentes des propriétés formelles telles que la couleur et la taille de la police, mais elles n'ont pas de signification par défaut. Notez que les noms de variables CSS sont sensibles à la casse, et généralement au CSS. nous écrivons ne l'est pas.

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.

Convention de dénomination

Concernant la dénomination, divers langages​​ont certaines indications. Par exemple, les sélecteurs CSS ne peuvent pas commencer par un nombre, et les variables en JS ne peuvent pas être directement numériques. Cependant, dans les variables CSS, ces restrictions n'existent pas. , tels que :

:root {
  --1: #369;
}
body {
  background-color: var(--1);
}

ne peut pas contenir de caractères tels que $, [, ^, (, %, etc. Les caractères ordinaires sont limités aux "chiffres [0-9]", "lettres [a-zA-Z]", " underscore_" et "dash" Line -" ces combinaisons, mais peuvent être chinoises, japonaises ou coréennes, par exemple :

body {
  --深蓝: #369;
  background-color: var(--深蓝);
}

fonction var()

Après avoir déclaré la variable, nous voulons naturellement l'obtenir et l'utiliser, puis la var () la fonction est utilisée pour lire Le deuxième paramètre de la fonction variable

p {
  color: var(--foo);
  border::1px solid var(--bar);
}

var()

color: var(--foo, #ED145B); //第二个参数就是默认值，假设--foo为空情况下，会使用#ED145B

var() peut également être utilisé dans la déclaration des variables

:root {
  --primary-color: red;
  --logo-text: var(--primary-color); // 上面刚声明，这里就可以使用
}

Les valeurs de variable ne peuvent être utilisées que comme valeurs d'attribut, pas noms d'attribut

.foo {
  --side: margin-top;
  /* 很显然，下面是无效的 */
  var(--side): 20px;
}

Type de valeur variable

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

--bar: 'hello';
--foo: var(--bar)' world';
// 示例
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;
 /* 通过calc去计算，下面有效 */
  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);
}

Scope

La même variable CSS peut être déclarée dans plusieurs sélecteurs Lors de la lecture, la déclaration avec la priorité la plus élevée prend effet. " règle de CSS.

<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 Les sélecteurs déclarent tous la variable --color. Lorsque différents éléments liront cette variable, la règle ayant la priorité la plus élevée sera utilisée, donc les couleurs des trois paragraphes de le texte est différent.

Traitement de compatibilité

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

a {
  color: #7F583F;
  color: var(--primary); // 应该很好理解，如果这里读不出值，那么并不会覆盖上面的color
}

Vous pouvez également utiliser la commande @support pour détecter

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

Opération JavaScript (essence).

JavaScript Vous pouvez é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 */
}

Opération JavaScript Méthode d'écriture des variables CSS Comme suit

// 设置变量
document.body.style.setProperty('--primary', '#7F583F'); //局部
document.documentElement.style.setProperty('--primary', '#7F583F'); //全局
// 读取变量
document.body.style.getPropertyValue('--primary').trim(); /局部
document.documentElement.style.getPropertyValue('--primary').trim(); /全局
getComputedStyle(document.documentElement).getPropertyValue('--time'); // 全局，如果是在css表中设置的需要这种方式获取
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary'); //局部
document.documentElement.style.removeProperty('--primary'); //全局

Cela signifie que JavaScript peut stocker n'importe quelle valeur dans la feuille de style. Vous trouverez ci-dessous 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);
});

Cela signifie que JavaScript peut stocker n'importe quelle valeur dans la feuille de style. Ce qui suit est un exemple de surveillance des événements. Les informations sur l'événement sont stockées dans des variables CSS

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

Informations inutiles. en CSS peut également être mis 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 les paramètres de style peuvent être écrits dans des variables CSS et. lu par JavaScript. Par conséquent, les variables CSS fournissent un moyen pour JavaScript de communiquer avec CSS.

Résumé

Fonctionnalités natives du navigateur , il peut être exécuté directement sans aucune traduction

Membre de l'objet DOM, ce qui facilite grandement la connexion. entre CSS et JS

Cela ne vous empêche pas d'utiliser Sass/Less, il peut être combiné et utilisé

(Partage vidéo d'apprentissage : tutoriel vidéo 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!