variable CSS avec une valeur de repli se

Question

Ce que je suis en train de réaliser en javascript ressemblera à ceci:

myVar = newVar || myVar; 

En css je fais ce qui suit:

--my-var: var(--new-var, var(--my-var)) 

On dirait qu'il ne marche pas. Est-il même possible d'avoir une ancienne valeur en repli si la nouvelle valeur n'est pas définie?

Answer 1

Vous ne pouvez pas affecter la valeur d'une propriété personnalisée comme une valeur de remplacement dans une expression var() lors de la redéclaration de la même propriété personnalisée. L'ancienne valeur est surchargée lors de la résolution en cascade, donc il ne resterait plus d'ancienne valeur au moment où l'expression var() est évaluée.

Answer 2

Généralement, CSS ne peut pas faire si/alors/sinon, mais en utilisant par exemple le var on peut, en quelque sorte.

En utilisant var() vous pouvez définir une valeur de repli lorsque la donnée variable n'est pas encore définie

Le second (en option) argument, la déclaration de valeur, a des limites bien.

La production correspond à n'importe quelle séquence d'un ou de plusieurs jetons . Donc, tant que la séquence ne contient pas ,, sans équivalent <) -token>, <] -token>, ou <} -token> ou jetons de niveau supérieur ou jetons avec une valeur de « ! » , il représente l'intégralité de ce qu'une déclaration valide peut avoir comme valeur.

Src:

• MDN CSS Var
• MDN Using CSS variables

Cela ne fonctionnera pas

:root{ 
 
    --myOld: lime; 
 
    --myVar: var(--myNew, --myOld) 
 
} 
 

 
div { 
 
    color: var(--myVar) 
 
}

<div>Hey there</div>

Cela fonctionne

:root{ 
 
    --myOld: lime; 
 
    --myVar: var(--myNew, var(--myOld)) 
 
} 
 

 
div { 
 
    color: var(--myVar) 
 
}

<div>Hey there</div>

Et cela fonctionnera

:root{ 
 
    --myVar: var(--myNew, var(--myOld, red)) 
 
} 
 

 
div { 
 
    color: var(--myVar) 
 
}

<div>Hey there</div>

---

Pour javascript, faire comme vous obtenez une erreur de référence, et pour éviter que vous pouvez faire comme ceci:

myVar = (typeof newVar === 'undefined') ? myVar : newVar; 

Src: Why does an undefined variable in Javascript sometimes evaluate to false and sometimes throw an uncaught ReferenceError?