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

Question

Given the <style> I wrote, I expected the 1st <h1> and 2nd <h1> to have same font-size, but it is not true:

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

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

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

Digging around, I found this comment on stackoverflow https://stackoverflow.com/a/48415933/7253377 , and the problem seems related to how var() are evaluated, or better, when they are evaluated by the browser.

So, I wrote this simple snippet and it seems to work correctly:

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

* {
  font-size: var(--default-size);
}

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

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

The only problem is that I don't think to get at 100% what is going on. The 1st approach didn't work because:

The :root var() is evaluated when the :root is rendered.
The * var() is evaluated when any element is rendered.
The .font-size:default var() is evaluated when an element with this class is rendered

And the :root var() value happens to be different from the .font-size:default var() value? If yes, why?

You didn't set the font-size reference value. Without this reference value on the body, the use of the `rem` unit cannot be consistent. — Mister Jojo, Sep 18 '22 at 21:51
your issue is elsewhere: the browser is applying a default font-size to h2 so it will be used and h2 will not inherit the one of the root. Use div instead of h2 in the first snippet and both will have the same font — Temani Afif, Sep 18 '22 at 21:56
@TemaniAfif I tried to use div instead of h2 in the first snippet and it doesn't work — igol, Sep 18 '22 at 22:00
also the answer your referenced has nothing to do with what you are facing — Temani Afif, Sep 18 '22 at 22:02

score 1 · Accepted Answer · answered Sep 18 '22 at 22:10

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>

Now you will see a slight difference because of how 1rem works. It can be confusing but 1rem is relative to the font-size you set on the :root element and you set this one to be equal to calc(1rem + 0.5vw) and we have

If used in the font-size property of the root element, or in a document with no root element, 1rem is equal to the initial value of the font-size property. ^ref

So inside root the value is equal to calc(16px + .5vw) and this value is inherited by the first div.

Now the second div is also using 1rem and this time 1rem will equal to calc(16px + .5vw) (the root font-size) so the value for the second div is equal to calc(16px + .5vw) + .5vw = 16px + 1vw. It's .5vw bigger than the first one

If you move the styles to the body for example, both will be equal because in both cases the reference will be the root font-size that is not defined so the initial value 16px will be used

body {
  --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>

Ah ok, now it's clear thanks. Only one thing though, h2 default font-size should be overriden, if I change the :root font-size? — igol, Sep 18 '22 at 22:12
@igol no because the style applied to an element always win over any inherited styles — Temani Afif, Sep 18 '22 at 22:39

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

1 Answers1