Why Calc Is Not Reevaluated When It Is Used for Font-Size

css vars which use calc don't update

Yes, this is expected behavior and in fact completely respectful of the cascading nature of custom properties. From section 2.2 of the spec:

It is important to note that custom properties resolve any var() functions in their values at computed-value time, which occurs before the value is inherited.

This means that the value of the custom property --font-size as it appears on the root element is really calc(1 * 16px), not calc(var(--font-size-mult) * 16px), because the var(--font-size-mult) expression is evaluated when --font-size is computed for the root element.

This computed value, calc(1 * 16px), is then inherited by descendants. Any new value you set for --font-size-mult on any descendants is ignored (unless other references to it exist).

Should this be the expected behavior? Well, I can only tell you that the spec claims this is required to prevent cyclic references between ancestors and descendants. In the same paragraph as the sentence quoted above:

In general, cyclic dependencies occur only when multiple custom properties on the same element refer to each other; custom properties defined on elements higher in the element tree can never cause a cyclic reference with properties defined on elements lower in the element tree.

Finally, while Kriszta's answer demonstrates the right way to use calc() with custom properties taking inheritance into account, you should be using the rem unit instead of custom properties entirely, as that unit was made specifically for this use case.

My calc() to calculate a font-size using a combination of vw and integers is not resolving

Should be 375px. Because 375 needs to know which format it is based on.

.a {  font-size: calc((12 + 4) * ((100vw - 375px) / 825));}
.b {  font-size: calc((12 + 4) * ((100vw - 1px) / 825));}

<div class="a">Text</div><div class="b">Text</div>

Use of calc() and var into CSS: elements rendered differently

The first issue is related to the default font-size applied to h1 by the browser so to do your testing you need to use a "neutral" tag to avoid dealing with default styles.

Try with divs

:root {
  --default-size: calc(1rem + 0.5vw);
  font-size: var(--default-size);
}

.font-size\:default {
  font-size: var(--default-size) !important;
}

<div>DIMENSION</div>
<div class="font-size:default">DIMENSION</div>

MVC Bundling breaking my calc CSS statements by removing spaces?

This is an issue of the optimizer.

To avoid the miniffier to remove the whitespaces, group the affected element with parenthesis. That workarrounds the issue.

margin-left: calc((50%) - 480px);

vw CSS units in calc in Chrome not working

It’s a bug, registered as Bug 94158 - calc isn't working with viewport units.

---

Related Topics