In what cases can calc() be used in CSS?

I know several cases where its use is not canonical, but it is much easier to do calcit than in any other way.

Positioning of background images

It is quite easy to position a background image

.ejemplo {
  width: 500px; 
  height: 500px;
  border: 1px solid black;
  background-image: url('https://i.imgur.com/W51iG94.png');
  background-repeat: no-repeat;
  background-position: 150px 50px;
}

<div class="ejemplo"></div>

But what happens when we want to position the background image in relation to the right and bottom sides and we don't know in advance the size of the containing element? With calcis the simplest.

.ejemplo {
      width: 100%; 
      height: 500px;
      border: 1px solid black;
      background-image: url('https://i.imgur.com/W51iG94.png');
      background-repeat: no-repeat;
      background-position: calc(100% - 150px) calc(100% - 50px);
    }

<div class="ejemplo"></div>

Much easier that way.

Creation of a GRID system

Imagine that you want to design your own GRID system, let's say 7 columns.

This would cause that in CSS code we would have decimal figures that are difficult to read and understand:

.col-1 {

  border: 1px solid black;
  width: 14.2857%;
  height: 50px;

}

.col-5 {

  border: 1px solid black;
  width: 71.4285%;
  height: 50px;

}

.col-3 {

  border: 1px solid black;
  width: 42.8517%;
  height: 50px;

}

<div class="col-1"></div>
<div class="col-5"></div>
<div class="col-3"></div>

We can make the code more readable and even almost "self-explanatory" by replacing the ugly decimals with the use of calc.

.col-1 {

      border: 1px solid black;
      width: calc(100% / 7);
      height: 50px;

    }

    .col-5 {

      border: 1px solid black;
      width: calc(100% / 7 * 5);
      height: 50px;

    }

    .col-3 {

      border: 1px solid black;
      width: calc(100% / 7 * 3);
      height: 50px;

    }

<div class="col-1"></div>
<div class="col-5"></div>
<div class="col-3"></div>

Again, it seems easier to do it this way.

Position and dimension floating elements.

Imagine that you have to position 2 floating elements in a variable (and unknown) width container maintaining the aspect ratio between them, and with a fixed separation (margin) between them.

.rojo {
  width: 40%;
  float: left;
  height: 100%;
  margin-right: 1em;
  padding: 30px;
  background: red;
  color: white;
}

.azul {
  width: calc(60% - 1em);
  float: right;
  height: 100%;
  padding: 30px;
  color: white;
  background: blue;
}

html, body {
  height: 100%;
  background: #ccc;
  padding: 20px;
}
body {
  padding: 20px;
  background: white;
}

* {
  box-sizing: border-box;
}

<div class="rojo">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

<div class="azul">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

Considerations to take into account

Syntax

It is important to respect the syntax of calc: calc(100%[espacio]-[espacio]50px) Things like calc(100%[espacio]-50px)or will calc(100%-50px)not work in all browsers.

backup rules

Although most browsers support calc, it's good practice to use a fallback rule for browsers that don't:

.respaldo {
  width: 85%; /* Valor aproximado, para navegadores que no lo soporten */
  width: calc(100% - 100px);
}

You have these and other use cases at https://css-tricks.com/a-couple-of-use-cases-for-calc/

Man, put like this, I can think of uses for when you want to divide a container into equal parts, without having to do the calculation of how many px it would be.

.contenedor{
    width: 300px;
}
/** Divido el tamaño del contenedor en 10 partes usando elementos en su interior **/
.contendor .elemento{
    display: flex;
    flex-direction: row;
    width: calc(0.1 * 300px);
}

Really anything you can think of. But in my opinion, perhaps the best option would be in combination with some Less or Sass type language where you can store values ​​in variables. And as you progress through the code you may not really care what value it has. For example:

@tam: 300px;

.contenedor{
  width: @tam;
  height: @tam;
  .elemento{
    width: calc(0.5 * @tam);
  }
}

This example is very small and perhaps the potential is not really appreciated, but imagine a file with 500-700 lines of Less where you know that a container is 500px in size and you want two inside that are half each, but you don't know how much is the first container really worth. By combining Less and the function calc()you can get half the value of a less variable. (half, a third, whatever you want,...)

But this, like almost everything, is as far as your imagination goes.

Minimum control is another direct application of calc(), a practical example can be seen with fonts or typography.

Suppose I want to adapt my font size according to the width of the viewport, for which I would use units vw:

.contenido {
  font-size: 3vw;
}

<div class="contenido">
  Icing topping gummies sesame snaps cotton candy dragée cookie wafer. Oat cake tootsie roll dessert carrot cake cake marzipan. Toffee biscuit gummies biscuit. Donut chocolate cupcake tart halvah sweet roll wafer. Lollipop halvah dessert croissant pie. Dragée cotton candy bear claw gummi bears caramels caramels tiramisu. Wafer cheesecake pie brownie powder.
</div>

So far so good, 3% of the width works for my web app, but I want to ensure that the font size is a minimum of 0.7rem regardless of resolution and that the font size still "adapts". Although I can do it with a media query and a (max-width: ...), with calc I can maintain a font that adapts to all resolutions:

.contenido {
  font-size: calc(0.7rem + 1vw);
}

<div class="contenido">
  Icing topping gummies sesame snaps cotton candy dragée cookie wafer. Oat cake tootsie roll dessert carrot cake cake marzipan. Toffee biscuit gummies biscuit. Donut chocolate cupcake tart halvah sweet roll wafer. Lollipop halvah dessert croissant pie. Dragée cotton candy bear claw gummi bears caramels caramels tiramisu. Wafer cheesecake pie brownie powder.
</div>

In summary, some media query could be eliminated if it is used calc()and keep the sizes adaptable without losing the aesthetics.

As you have already been given several interesting examples of use and I don't think I can contribute anything more in this regard, I will try to answer the other questions.

Although the MDN documentation is very good, it is always advisable to also see what the specification says, in this case https://www.w3.org/TR/css3-values/#calc-notation where the syntax and peculiarities are explained in detail of this function.

The example you give to illustrate the question: width: calc(100% - 80px);it may seem simple and useless as it is an apparently simple mathematical calculation, but if we look more closely we see that there are two different units of measurement: percentages and pixels; therein lies the magic of calc(), it does the calculations in real time by subtracting the 80 pixels from the current width of the element, if this size is modified it will recalculate the new width.

The possibility of doing calculations with different units on the fly is one of the calc()most useful and interesting qualities.

The support of calc()is quite broad but as you ask for an alternative several options occur to me:

• If the calculation that is done are operations of numbers or units of the same type, you can put the result of the calculations directly in the value of the property or if you use a preprocessor such as SASS, Less, Stylus, etc. it can do the math for you.

with calc()

   width: calc((75px + 25px) / 3);

without calc()

   width: 33.33333px;

• If you mix units that do not change dynamically you can also do the calculations yourself or with a preprocessor create a function to convert between units and calculate for you.

with calc()

   width: calc(1em + 10px);

without calc()
_{suppose we have set the font size to 16px}

   width: 26px;

• For cases like the one in the example that mixes relative and fixed units that can change when resizing the browser, for example, the only alternative that fits completely is to use JavaScript.

with calc()

   width: calc(100% - 10px);

without calc()
_{it is not possible to give an exact value with just css} . _{with jQuery you could do something like this:} .

$(window).resize(function(){
  $('#midiv').css('width', '100%').css('width', '-=10px');
});