CSS calc() and CSS Variables (Decimals and Division)

Question

So I've been experimenting with CSS variables just to work with basic math, and I have the following JSFiddle (replication of code below): http://jsfiddle.net/eliseo_d/ry792Lnp/7/

:root {
  --a: 51;
  --b: 32;
}

#test_add:before {
  color: red;
  counter-reset: add_res calc(var(--a) + var(--b));
  content: counter(add_res);
}

#test_sub:before {
  color: blue;
  counter-reset: sub_res calc(var(--a) - var(--b));
  content: counter(sub_res);
}

#test_mul:before {
  color: orange;
  counter-reset: mul_res calc(var(--a) * var(--b));
  content: counter(mul_res);
}

#test_div:before {
  color: green;
  counter-reset: div_res calc(var(--a) / var(--b));
  content: counter(div_res);
}

<div id="test_add"></div>
<div id="test_sub"></div>
<div id="test_mul"></div>
<div id="test_div"></div>

The results for the addition, subtraction and multiplication DIVs is correct, but I've had trouble getting the division DIV to work. Is there some special thing that must be done with the CSS variables for this to work?

Also, if I were to replace 51 with 5.1 and 32 with 3.2, the results for all of them also end up as zero... Is there any way that CSS Variables can work with decimals? Please note: I don't want to work with SASS or LESS or any other preprocessor here, I'm trying to investigate the potential I have with CSS variables on their own...

Thanks in advance...

I think the issue is not with variable here or calc. calc handle perfectly float but your are using counter here which work with only integers — Temani Afif
– Temani Afif, Commented Aug 29, 2018 at 23:46
@TemaniAfif, if calc handles floats without issue, shouldn't I be getting 1 for the division? INT(51/32) = 1 if my math isn't mistaken? — Eliseo D'Annunzio
– Eliseo D'Annunzio, Commented Aug 29, 2018 at 23:49
here you assume that calc should round the number which is not trivial .. calc will return the reuslt as a float and counter will not accept it ... here is an example where I used the value within border : jsfiddle.net/ry792Lnp/13 check the computed style to see that calc return the correct values (1.594) and it works with border because it accepts float — Temani Afif
– Temani Afif, Commented Aug 29, 2018 at 23:52
counter content can only be of type integer thus when doing a division, it might be a float, and will print 0 — vsync
– vsync, Commented Oct 14, 2020 at 11:31

raina77ow · Accepted Answer · 2018-08-30 00:13:35Z

3

@TemaniAfif is right: the problem here is that calc division (at least in August 2018) always returns a float, and counter-reset (as well as many other CSS properties) only works with integer values. There's an issue on csswg-drafts for that:

Right now, calc() carefully tracks whether a numeric expression (no units or %s) is guaranteed to resolve to an integer, or might resolve to a more general number. This allows it to be used in places like z-index safely.

However, it excludes some expressions that would be integral if evaluated - for example, any division makes it non-integral, even in an expression like calc(4 / 2).

Essentially, this proposal was accepted, but it seems to be not implemented in browsers - yet. For example, the relevant Chromium issue (which, to be precise, is about inability to use calc division result as param of CSS Grid) has been opened just two weeks ago.

edited Aug 30, 2018 at 0:13

answered Aug 29, 2018 at 23:56

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eliseo D'Annunzio Over a year ago

That's a bit suckworthy, but glad that there's been some discussion into resolving this... Any idea when this will be implemented?

Eliseo D'Annunzio Over a year ago

So, is there any way to display the values of var()'s in content, or will I have to settle for the counter methodology?

raina77ow Over a year ago

It's not about var, it's about division; even if you put calc(4/2), the result is still float, and counter is still 0.

Temani Afif Over a year ago

@Eliseod'Annunzio actually no way, here is a illustration of some cases : codepen.io/textmonster404/pen/PeMmqO?editors=1100

user15799783 · Accepted Answer · 2021-05-07 11:08:17Z

0

:root {
  --a: 51;
  --b: 32;
}

#test_add:before {
  color: red;
  counter-reset: add_res calc(var(--a) + var(--b));
  content: counter(add_res);
}

#test_sub:before {
  color: blue;
  counter-reset: sub_res calc(var(--a) - var(--b));
  content: counter(sub_res);
}

#test_mul:before {
  color: orange;
  counter-reset: mul_res calc(var(--a) * var(--b));
  content: counter(mul_res);
}

#test_div:before {
  color: green;
  counter-reset: div_res calc(var(--a) / var(--b));
  content: counter(div_res);
}

<div id="test_add"></div>
<div id="test_sub"></div>
<div id="test_mul"></div>
<div id="test_div"></div>

answered May 7, 2021 at 11:08

user15799783

Collectives™ on Stack Overflow

CSS calc() and CSS Variables (Decimals and Division)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related