What Is Result Of calc() In CSS

Question

We have now started using calc() in css, for setting widths on a result of calculation. For example:

<div id='parent'>
<div id='calcWidth'></div>
</div>


   #parent{
           width:100px;
           }
   #calcWidth{
            width:calc(100% - 3px);
            height:100px;
            background:red;
           }

I know how calc() works, but I just want to know what is returned in css, in the place of calc(100% - 3px); in the example given above.

Whats my confusion?

In the above example width:calc(100% - 3px);
say the 100% width is actually 100px, which will be determined at runtime by css.
So the calculated width will be 100px-3px=97px 97px and if you convert it to % 97% right?

But now, there are two possibilities

97px is returned, which is set as a width.
97% is returned, which is set as a width.

My Question is:

In both cases now the width shall be set to 97px, but what is returned as a result of width:calc(100% - 3px);, 97px OR 97% ?

you can also see this fiddle: http://jsfiddle.net/8yspnuuw/1/

EDIT: please read

See friends: Take a simple example:

 <div class='parent'>
    <div class='child'>
    </div>
    </div>

.parent{
width:200px;
}
 .child{
  width:20%
  }

I know the width of child will become 160 px when it is rendered. okay! but thats not what is set in css right? css sets it in %, it is just rendered in pixels.

So similarly, using calc, does it return % or pixel

Or to explain my question, read BoltClocks answer, what is the computed value, (and not the used value, i know that is in pixels)

You can use FireBug to see the computed style, or run getComputedStyle by yourself using console: developer.mozilla.org/en-US/docs/Web/API/Window/… and just test it :) — Gerino
– Gerino, Commented Feb 25, 2015 at 9:56
Given that the end-result is always rendered in pixels, why does the specific format of calc()'s return value matter? I'm guessing it's always going to be in pixels, since that's what every computed value of lengths are ultimately assigned/rendered-in, but I don't know for sure. — David Thomas
– David Thomas, Commented Feb 25, 2015 at 10:26

BoltClock · Accepted Answer · 2016-09-25 05:15:44Z

10

The spec does not define very strictly what the computed value of a calc() expression is, however it does say that percentages are never calculated as part of the computed value. How exactly this value is represented is left as an implementation detail.

If you see a pixel length instead of a percentage, then that length is the used value, not the computed value, because the pixel value can only be determined after calculating any percentages and laying out elements.

Note that getComputedStyle() may return results that are inconsistent with the CSS definition of "computed value". This is one of many unfortunate consequences of browsers doing their own thing back in the 90s.

edited Sep 25, 2016 at 5:15

answered Feb 25, 2015 at 10:10

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

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

2 Comments

Naeem Shaikh Over a year ago

so does that mean pixels is what is set by calc?

BoltClock Over a year ago

@Naeem Shaikh: The pixel value is used in rendering (hence "used value").

johanthuresson · Accepted Answer · 2015-02-25 09:58:59Z

5

The rendered widths are in pixels. from your example

answered Feb 25, 2015 at 9:58

johanthuresson

5803 silver badges5 bronze badges

2 Comments

Naeem Shaikh Over a year ago

i know it is rendered in pixels: you read my question In both cases now the width shall be set to 97px, but what is returned as a result of cals is my question

johanthuresson Over a year ago

It returns a function, the value is rendered into pixels. Why is this important?

Lucky · Accepted Answer · 2015-02-25 10:01:34Z

0

Whatever the pixels size of the calcWidth div is, the value 3 is reduced from it..for example if the width of parent is 200 the calcWidth div's width will be 197px. so it is px and not %

Demo

 document.getElementById('calcWidth').offsetWidth;

image style in pixel jsdemo

answered Feb 25, 2015 at 10:01

Lucky

17.4k20 gold badges121 silver badges156 bronze badges

4 Comments

Naeem Shaikh Over a year ago

i dont really agree this is wrong iguess.. try to set property where, width should only be in px, for example box-shadow

Naeem Shaikh Over a year ago

I understand what you are saying.. but my question is little difficult to grasp i guess.. please read my edited question

Lucky Over a year ago

@NaeemShaikh the calc() uses % however the computed style in chrome shows that the rendered value is in pixels..so i guess that's the answer as BoltClock mentioned in his answer..cheers

Naeem Shaikh Over a year ago

Lucke please see my answer, iguess you can understand, what i m thinking right now

Ini · Accepted Answer · 2018-07-21 14:34:12Z

-1

CSS does not support dynamic values (bedides simple percentage values like width: 100%;). That means the 100% within calc() are converted one time initially to px and not continiously.

That already answers your question. The %-value gets converted into px end you end up with 97px. You can confirm that with window.getComputedStyle() or by taking a screenshot and measure it.

edited Jul 21, 2018 at 14:34

answered Jul 21, 2018 at 14:27

Ini

6961 gold badge11 silver badges19 bronze badges

Comments

Fentablar · Accepted Answer · 2021-10-15 01:44:58Z

-1

calc() does not have a computed value; it occurs at time of render -- that is why you can mix units.

answered Oct 15, 2021 at 1:44

Fentablar

497 bronze badges

Collectives™ on Stack Overflow

What Is Result Of calc() In CSS

5 Answers 5

2 Comments

2 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related