Question:
I read the documentation for calc() and understood the syntax, but being in CSS, where no code is executed, I can't figure out when it should be used.
The paradigmatic example sounds quite simple to me and I don't know if it is very useful:
/* property: calc(expression) */
width: calc(100% - 80px);
Are there canonical cases for using calc() ? Could you name an example in which its use is practical for a solution of a real case?
I see that its use is quite widespread among browsers (93% according to Can I use … ). How recommended is to use it and what would be its equivalent for browsers that do not accept it (IE 8 and earlier, with some problem with IE 9)?
Answer:
I know of several cases where its use is not canonical, but it is much easier to do it with calc than in any other way.
Background image positioning
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 the size of the container element in advance? With calc is 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 this way.
Create a GRID system
Imagine you want to design your own GRID system, let's say 7 columns.
This would cause that in CSS code we 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 substituting the ugly decimal places 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 size floating elements.
Imagine that you have to position 2 floating elements in a container of variable (and unknown) width keeping 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 calc(100%-50px) not work in all browsers.
Backup rules
Although most browsers support calc , it is good practice to use a fallback rule for browsers that do not:
.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/