What Is The Biggest Usable Number for Use in Calc() in CSS

Why doesn't css-calc() work when using 0 inside the equation?

The first equation is invalid because it will lead to calc(-10px + 0)

Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid. ^ref

And if the result was non-zero you will fall into this:

At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to <number>.

The last one is more logical since 10px + 5 has no meaning whearas we may think that 10px + 0 is simply 10px but for the browser it's not.

Related question: Why doesn't min() (or max()) work with unitless 0?

Setting width/height as percentage minus pixels

You can use calc:

height: calc(100% - 18px);

Note that some old browsers don't support the CSS3 calc() function, so implementing the vendor-specific versions of the function may be required:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Methods of reducing number of CSS calculations on webpage

It's hard to say what's causing your performance problem without knowing exactly what your app is doing. CSS will have some impact but not much, it's more likely that some JavaScript in your app is causing excessive reflows while the page is rendering.

Summary of stubornella's article (the second link)

Reflow is the process by which elements in a web page get laid out according to the style rules. A reflow is computationally expensive but it is usually possible to draw a static HTML page in a single reflow as long as the rendering of any later elements doesn't effect elements that have already been drawn. Things which are likely to lead to multiple reflows and some work arounds:

1. Dynamically adding CSS classes to elements - change classes as low in the dom tree as possible to limit the impact
2. Adding multiple DOM elements - create an invisible structure and add it in a single operation instead
3. Adding multiple inline styles to visible elements - better to create a class with all the styles, then apply the class
4. Applying animations to relatively positioned elements - better to animate position: fixed or position: absolute elements as they won't impact anything else
5. Fine grained animations - moving an element 3px at a time may be more smooth than moving it 1px at a time because you avoid two reflows
6. Tables are one of the few cases where the rendering of an element later in the DOM can change how an earlier element should be rendered - if you must use tables, use table-layout: fixed

CSS3 calc() function not working correctly

You need to know that between inline and inline-block elements, the spaces matters. So if you have a whitespace between two inline elements, it takes account in the total calculation. To avoid this there are a lot of tricks, but the simplest is the following:

 .containero {
       font-size: 0;
 }

Add this property in your CSS and it works. Working example:

.containero {    font-size: 0;    width: 100%;    background-color: yellow;    display: inline-block;    box-sizing:border-box;}
.noey, .yeso {  border: 1px solid red;  width: 30px;  height: 30px;  text-align: center;  vertical-align: middle;   display:inline-block;  color: red;  padding:0px;  box-sizing:border-box;
}

.inpoot {  height: 31px;  margin: 0 5px;  display:inline-block;  width: calc(100% - 70px);  box-sizing:border-box;}

<div class="containero">  <button class="noey">No</button>  <input  class="inpoot" />  <button class="yeso">Yes</button></div>

Linear scaling between 2 font sizes using calc and vw

An aproximate solution (I have not taken into account the fractions) would be

font-size: calc(2vw + 12px);

You need to solve the system of equations for the 2 points, and find the equation of the result

The first equation is , for a viewport of 360, a font size of 18. thus,

a * 3.6 + b = 18

Where a is the part of the vw units and b the px part

the second equation is

a * 10.24 + b = 32

Let's go to webmath and enter

The result given is

So your exact answer would be

font-size: calc (2.11vw + 10.41px);

---

Related Topics