Nesta resposta Posso usar o valor auto com a propriedade calc()? o autor diz que auto não é um valor válido para a calc()
expressão.
Ok, tudo bem. Mas o problema que tenho é que tenho uma propriedade CSS personalizada que quero dar um valor padrão que cancelará o calc()
.
O que eu tenho é este CSS:
.terminal {
--terminal-line: calc(var(--size, 1) * (16px / var(--pixel-density, 1)) + 1px / var(--pixel-density, 1));
height: auto;
/* force size when user add --rows */
height: calc((var(--terminal-line) * var(--rows)) + (var(--padding, 10) * 2px));
}
@property --rows {
syntax: '<number>';
inherits: true;
}
e a propriedade personalizada não existe initial-value
e, de acordo com o Google Dev Tools, ela não está realmente registrada. Então, adicionei isto:
@property --rows {
syntax: '<number> | auto';
inherits: true;
initial-value: auto;
}
Isso parece funcionar como eu quero (testado no Firefox e no Chrome). Mas o problema é o Chrome Dev Tools.
É assim que a propriedade se parece:
Parece que a altura é aplicada. Efeito similar está no Firefox:
Então a questão é: qual é o valor real da propriedade height quando calc()
é inválida? É auto
da regra strike through ou algum outro padrão quando o valor é inválido? O que é isso? Quero ter certeza de que meu código está correto.
Depende do motivo pelo qual é inválido. Se você literalmente usar o valor "auto" no calc, então o valor será inválido quando a cascata for avaliada e não fará parte do resultado da cascata. Então o valor usado é qualquer um que vença a cascata.
Mas se o valor "auto" vier da propriedade personalizada, então é "Invalid At Computed Value Time (IACVT)" . Isso significa que ele pode vencer a cascata e o valor é determinado como Bramus explica no link acima: