Les variables CSS avec des opérations arithmétiques ne fonctionnent pas dans les propriétés sténographiques?

Question

S'il vous plaît aidez-moi à savoir pourquoi une opération arithmétique dans une variable CSS brise le code.

J'ai commencé par un simple fichier CSS avec une règle:

html { 
    font: 16px/32px Arial; 
} 

Dans les navigateurs, il fonctionne comme il est écrit: la taille de la police est 16px, la hauteur de la ligne est 32px, et la police elle-même est Arial.

Puis j'ai ajouté les variables:

html { 
    --default-font-size: 16px; 
    --default-line-height: var(--default-font-size); 
    font: var(--default-font-size)/var(--default-line-height) Arial; 
} 

Il travaille aussi; pensé que la hauteur de la ligne est 16px, parce que je l'ai fait égal à la taille de la police.

Mais quand je multiplicated la deuxième valeur, la déclaration de la police a cessé de fonctionner:

html { 
    --default-font-size: 16px; 
    --default-line-height: var(--default-font-size) * 2; 
    font: var(--default-font-size)/var(--default-line-height) Arial; /* not working! */ 
} 

Toutes les propriétés font-size, line-height et font-family sont réglés sur les valeurs par défaut du navigateur.

Si je partage font propriété raccourcie en trois propriétés longhand différentes, le code fonctionne à nouveau sur OK:

html { 
    --default-font-size: 16px; 
    --default-line-height: var(--default-font-size) * 2; 
    font-size: var(--default-font-size); 
    line-height: var(--default-line-height); 
    font-family: Arial; 
} 

Quel est le problème avec l'exemple de code précédent et est-il un moyen de le faire fonctionner sans se diviser en longhand Propriétés?

Answer 1

Vous devez utiliser calc comme ceci:

html { 
    --default-font-size: 16px; 
    --default-line-height: calc(var(--default-font-size) * 2); 
    font: var(--default-font-size)/var(--default-line-height) Arial; 
} 

Le --default-line-height est remplacé dans la propriété font avant d'être evalutated si vous avez quelque chose comme ça (pas valide):

font: var(--default-font-size)/var(--default-font-size) * 2 Arial; 

Par l'utilisation de calc vous évaluez l'expression et vous avez une syntaxe valide. Même votre troisième exemple ne fonctionnera pas. Le CSS ne reconnaît pas le signe de multiplication comme il doit être utilisé dans un calc

p { 
 
    --default-font-size: 16px; 
 
    --default-line-height: calc(var(--default-font-size) * 4); 
 
    font: var(--default-font-size)/var(--default-line-height) Arial; 
 
}

<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>