Maison > Article > interface Web > Une toute nouvelle connaissance : CSS variable-variable

Une toute nouvelle connaissance : CSS variable-variable

巴扎黑original: 2017-07-19 09:53:022348parcourir

Les mots précédents

Il n'y a toujours pas eu de variables en CSS. Pour utiliser des variables CSS, vous ne pouvez utiliser que des précompilateurs tels que SASS ou LESS. Avec la sortie de la nouvelle version, définir et utiliser des variables directement en CSS n'est plus un fantasme. Cet article présentera en détail les variables CSS variable

Les variables CSS, comme leur nom l'indique, sont des entités définies par l'auteur ou l'utilisateur de la page Web, utilisées pour spécifier des variables spécifiques dans le document.

Plus précisément, cela devrait être appelé propriétés personnalisées CSS, mais ci-dessous pour une meilleure compréhension, elles sont appelées variables CSS.

Nous avons toujours su qu'il n'y avait pas de variables en CSS. Pour utiliser des variables CSS, vous ne pouvez utiliser que des précompilateurs tels que SASS ou LESS.

Mais après la publication du nouveau brouillon, ce n'est plus un fantasme de définir et d'utiliser des variables directement en CSS, comme suit, regardez un exemple simple :

// Déclarez une variable :

:root{

--bgColor:#000;

}

Ici, nous utilisons la pseudo-classe :root{ } dans l'article précédent "Pseudo-classe structurelle" et définissons une variable CSS dans la pseudo-classe globale :root{ } nommée --bgColor. Une fois

défini, il est utilisé. Supposons que je veuille définir la couleur d'arrière-plan d'un div sur noir :

.main{

<.> background :var(--bgColor);

}

Ici, là où nous devons définir les variables avant de les utiliser, passez var (nom de variable défini) à appeler.

Utilisation de base

Les variables CSS sont des entités définies par les auteurs CSS qui contiennent des valeurs spécifiques à réutiliser dans tout le document. Utilisez des attributs personnalisés pour définir des noms de variables et utilisez un var() spécifique pour accéder à

Compatibilité : les navigateurs mobiles et IE ne sont pas compatibles

【Déclarer les variables】

Les variables doivent démarrer avec

. Par exemple, --example-variable: 20px signifie attribuer 20px à la variable --example-varibale --

Vous pouvez placer l'instruction déclarant la variable dans n'importe quel élément. peut le définir sur : root, body ou html

:root{
  --bgColor:#000;
}

La déclaration de variable est comme l'instruction de déclaration de style ordinaire, ou vous pouvez utiliser le style en ligne

<body style="--bgColor:#000">

L'instruction de déclaration de variable doit être incluse dans un élément et ne peut pas être placée au hasard

//错误
<style>
--bgColor:#000;
</style>

【Utiliser des variables】

Utiliser la fonction var() pour utiliser des variables, et peut être utilisée n'importe où. Par exemple : var(--example-variable) renverra la valeur correspondant à --example-variable

<body style="--bgColor:#000;"><div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div>    </body>

Le var() fonction également Il existe un paramètre facultatif utilisé pour définir la valeur par défaut Lorsque la variable ne peut pas obtenir la valeur, la valeur par défaut est utilisée

<body><div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div>    </body>

Héritage et cascade

Comme les attributs de style ordinaires, les attributs variables prennent également en charge l'héritage et la cascade. Dans l'exemple suivant, la valeur variable de l'élément body est verte et la valeur variable de l'élément div est rouge, selon le principe de la cascade, la couleur d'arrière-plan finale de l'élément div est rouge

<body style="--bgColor:green;"><div style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></div>    </body>

Combinaison et calcul

[Combinaison]

　Les variables CSS peuvent être utilisées en combinaison

<style>.box{--top:20%;--left:30%;width: 100px;height: 100px;background-image: url(img/24/xiaoshu.jpg);background-position: var(--left)  var(--top);}</style><div class="box"></div>

Cependant, les variables CSS ne peuvent pas être combinées sous la forme suivante, var(--color1)var(--color2) n'est pas reconnu par le navigateur, s'il est séparé, tel que var(--color1) var(--color2), est analysé comme #333, qui est également méconnaissable par le navigateur

【 Calcul】

<style>.box{--color1:#;--color2:333;width: 100px;height: 100px;background-color: var(--color1)var(--color2);}</style><div class="box"></div>

Les variables sont les mêmes que les valeurs de style ordinaires, en plus de la combinaison, vous pouvez également utiliser calc pour le calcul

<style>.box{--borderWidth:2px;width: 100px;height: 100px;background-color:lightblue;border-left: calc(var(--borderWidth) * 2) solid black;}</style><div class="box"></div>

Les variables CSS peuvent interagir avec JS. A noter que vous ne pouvez utiliser que les méthodes getPropertyValue() et setProperty(), mais pas l'attribut style

[attribut style]

[ getPropertyValue()]

<div id="box" style="--color:lightgreen;background-color: var(--color)"></div>    <script>　　var oBox = document.getElementById('box');
　　console.log(oBox.style['--color']);    //undefined</script>

[setProperty()]

<div id="box" style="--color:lightgreen;background-color: var(--color)"></div>    <script>　　var oBox = document.getElementById('box');
　　console.log(oBox.style.getPropertyValue('--color'));//'lightgreen'</script>

<style>#box{    
    --color:lightgreen;background-color: var(--color);width: 100px;height: 100px;display:inline-block;}</style><button id="btn" type="button">变浅蓝</button><div id="box"></div>    <script>var oBox = document.getElementById('box');var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
    oBox.style.setProperty('--color','lightblue');
}</script>

Non pris en charge

Une chose à noter est que les variables ne sont pas prises en charge ! important

La capture d'écran du navigateur Chrome est la suivante

.box{
    --color:red;
    width: 100px;
    height: 100px;
    background-color:--color !important;
}</style><div class="box"></div>

Objectif

1. Maintenabilité

Maintenir une palette de couleurs ou une palette de tailles dans une page Web signifie que certains styles sont dans le fichier CSS apparaît plusieurs fois et est utilisé à plusieurs reprises. Lors de la modification d'un plan, qu'il s'agisse d'ajuster un certain style ou de modifier complètement l'ensemble du plan, cela deviendra un problème complexe, et une simple recherche et remplacement ne suffit pas. C'est là que les variables CSS s'avèrent utiles

<.>

　　2、语义化

　　变量的第二个优势就是名称本身就包含了语义的信息。CSS 文件变得易读和理解。main-text-color比文档中的#fc0更容易理解，特别是同样的颜色出现在不同的文件中的时候

　　3、更方便的实现@media媒体查询

　　一般地，媒体查询如下所示

<style>.box{    
    width: 100px;height: 100px;padding: 20px;margin: 10px;background-color: red}@media screen and (max-width:600px) {.box{
        width: 50px;height: 50px;padding: 10px;margin: 5px;        }}</style><div class="box"></div>

　　但是，如果使用变量，则可以精简代码

<style>.box{    
    --base-size:10px;width: calc(var(--base-size) * 10);height: calc(var(--base-size) * 10);padding: calc(var(--base-size) * 2);margin: calc(var(--base-size) * 1);background-color: red;}@media screen and (max-width:600px) {.box{
        --base-size:5px;    }}</style><div class="box"></div>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comparez les différences et les connexions entre transition et animation en CSS3Article suivant：Comparez les différences et les connexions entre transition et animation en CSS3

Articles Liés

Voir plus