This post was originally published on Hackmamba
Most developers are not familiar with the mathematical functions of CSS. This function reduces the need for media queries, making it easier to create responsive websites.
We will discuss how to use the mathematical functions of CSS in this article.
Prerequisite
To follow along with this article, we'll need:
- Basic HTML and CSS knowledge.
- A code editor to practice along, preferably Visual studio code. To download Visual studio code, click here.
CSS Mathematical Functions
CSS mathematical functions perform different mathematical operations using different CSS values. These functions accept one or more values and return a single value. We use mathematical operators like -
and +
on the CSS values to get a new value for the CSS property.
Types of CSS Mathematical Functions
There are four math functions well supported by CSS:
- The Calc() Function
- The Min() Function
- The Max() Function
- The clamp() Function
The Calc() Function
The calc()
function lets us calculate CSS property values using mathematical calculations. It accepts a specific expression as an input and returns the expression's output as the value.
This function comes in handy for designing responsive web pages and apps.
The syntax for the calc()
function is as follows:
.class-name {
property: calc(expression);
}
The expression combines different CSS values and mathematical operators, such as -
and +
.
Points to Remember Before Using the Calc() Function
Before using the calc()
function, keep these things in mind:
1.
It is compulsory to use whitespaces around addition and subtraction operators. We can use multiplication and division with or without whitespace.
// Invalid
.class-name {
property: calc(100% -70px);
} // It will read as a percentage followed by a negative length.
// Valid
.class-name {
property: calc(100% - 70px);
} // It will read as a percentage(%) followed by a subtraction
operator and a length.
2.
Both numbers must either have units or not have units for addition and subtraction.
// invalid
.class-name {
property: calc(100% - 70);
}
// Valid
.class-name {
property: calc(100% - 70px);
font-weight: calc(300 + 400);
}
3.
The calculation in the calc()
function begins on the left and ends on the right. Division and multiplication come first, followed by addition and subtraction. We place a parenthesis() around the parts we want to solve first to override precedence.
4.
When using the calc()
method to divide, the right-hand side must be a number without a unit attached to it. For multiplication, the location of the number does not matter. It can be on the left or right.
// Invalid
.class-name {
property: calc(30px / 20px);
property: calc(5 / 20px);
property: calc(300px * 2000px);
}
// Valid
.class-name {
property: calc(300px / 20);
property: calc(2 * 300px);
property: calc(300px * 2);
}
5.
We can also use calc()
for only a part of a CSS attribute value or use it without doing a math calculation.
.class-name {
margin: 10px calc(200px / 10);
width: calc(200px); // is the same as width: 200px;
}
How Does the Calc() Function in CSS Work?
The following examples illustrate how to use calc()
:
Example 1: Using calc()
function with different units.
The calc()
function allows us to combine different units, and it's not compulsory to use a specific unit.
HTML Code:
<div class="container">
exercise
</div>
CSS Code:
.container {
text-align: center;
background-color: crimson;
color: white;
font-size: 1.7em;
font-weight: 700;
padding: 3em;
width: calc(100% - 100px);
}
Our output will be:
We'll see a 100px
space by the right side of our browser. calc(100% - 100px)
will fill the entire width of 100%
except for 100px
.
What happens if we shift the above container to the middle?
When we shift the above container to the middle, the 100px
will divide in half, giving each side 50px
. We will have a margin of 50px
on the left and right. Add margin: 2em auto;
to the above CSS code when practicing.
If we resize the browser, we will find that the container is responsive across all sizes. That's the beauty of using the calc()
function. It is easier to create responsive layouts.
Example 2: Nesting calc()
function.
This function allows us to nest calc()
functions. To nest calc()
means to place one calc()
inside of another.
.container {
// Instead of doing this
height: calc(1000px - calc(200px + 400px));
// Do this
height: calc(1000px - (200px + 400px)); // The parent calc() can
function on its own.
} // Output will be 400px
Example 3: Using calc()
function with CSS variables
One of calc()
's most convenient features is its ability to work with CSS variables.
// Local scope
.container {
--width: 100px;
width: calc(var(--width) * 4); // The output will be 400px
}
The Min() Function
The min()
function lets us set the smallest acceptable value. It selects the smallest value from two or more values separated by a comma as the CSS property value.
The syntax for the min()
function is as follows:
.class-name {
property: min(value1, value2...);
}
Points to Remember Before Using the Min() Function.
1.
We can do math inside the min()
function without using the calc()
method. Maths in min()
follow the same rules as maths in calc()
.
.class-name {
property: min(70px - 15px, 30px);
}
2.
The order in which the min()
values appear has no bearing on the choice of the minimum value.
.class-name {
property: min(60%, 700px);
// It is the same as
property: min(700px, 60%);
}
How Does the Min() Function in CSS Work?
The following examples illustrate how to use min()
:
Example 4: Using min()
function with the width property.
HTML Code:
<div class="container">
CODE
</div>
CSS Code:
.container {
background-color: crimson;
height: 200px;
width: min(60vw, 700px);
margin: 2em auto;
text-align: center;
padding: 2em;
font-size: 2rem;
color: white;
}
Our output will be:
For example, 4:
- When we resize our browser, it checks the screen size and selects the smallest value from the list of values.
- For example, on a large screen with a resolution of
1200px
, it chooses700px
because it is the lower of the two values. - In cases when the screen size is less than
700px
, it selects60vw
of the current screen size - When the screen size is bigger than
700px
or reaches700px
, it falls back to700px
. It never exceeds700px
Example of how to calculate the viewport size for a 1200px
screen resolution:
- Using the VW format,
1vw
equals1%
of the viewport (screen) size, not the parent element. So60vw
is60%
of the screen size of1200px
-
60vw / 100%
*1200px
=720
- The
720
result in the above calculation is less than700px
, so the large screen selects700px
Writing width: min(60vw, 700px);
is the same as writing:
width: 60vw;
max-width: 700px;
The min()
function allows us to write our max-width and width in one parenthesis. It is an easy way to set the maximum value on any element.
Example 5: Using min()
function for font-sizes.
.container {
font-size: min(7rem, 2vw);
color: grey;
}
The font size in the example above will never exceed 7rem
and will shrink or reduce to 2vw
on smaller screens. Depending on the screen size, the font size will range between 2vw
and 7rem
.
The Max() Function
By contrast, the max()
function does the opposite of the min()
function. It selects the largest value from two or more values separated by a comma as the CSS property value.
The syntax for the max()
function is as follows:
.class-name {
property: max(value1, value2...); // Parameters we pass into the
function
}
NOTE: The points to remember before using the min()
also apply to the max()
function.
How Does the Max() Function in CSS Work?
The following examples illustrate how to use max()
:
Example 6: Using max()
function with the width property.
Replace the width in example 4 with width: max(60%, 700px);
.
We will notice that:
- Based on the screen size, the max() function chooses the largest value between
60%
and700px
. It never goes below700px
, and it's responsive across all screen sizes - It selects
60%
on a large screen as it is the larger of the two value options
Writing width: max(60%, 700px);
is the same as writing:
width: 60%;
min-width: 700px;
The max()
function allows us to write our min-width and width in one parenthesis. It is an easy way to set the minimum value on any element.
Example 7: Using max()
function for font-sizes.
.container {
font-size: max(7rem, 2vw);
color: grey;
}
The font size in the example above will never go below 2vw
. The font size will range between 2vw
and 7rem
, depending on the screen size. It selects 7rem
on large screens and 2vw
on smaller screens.
NOTE: For ease of understanding, always remember the min()
sets a maximum width, and the max()
sets a minimum width.
The clamp() Function
CSS clamp()
lets us set a property's value between a minimum and maximum. It's practically a combination of the min()
and max()
functions.
This function aims to prevent headers with huge fonts from taking up too much screen space. Our font-size values will adjust to fit all screen sizes with this function.
The syntax for the clamp()
function is as follows:
.class-name {
property: clamp(minValue, preferredValue, maxValue);
}
This function only accepts three parameters, all of which must be in the correct order.
-
The minValue: The first value in the parentheses should always be the minimum value. It's the smallest value. The selection of the
minValue
occurs if thepreferredValue
is less than theminValue
. - The preferredValue: The preferred value is also called the default or ideal value. Preferred values are automatically selected if the value is between the min and max value. Suppose the default value is larger than the min value but less than the max value
- **The maxValue: **The last value in the parenthesis should always be the maximum value. It's the largest value. The selection of the
maxValue
will occur if thepreferredValue
is greater than themaxValue
How does the Clamp() function in CSS work?
The following examples illustrate how to use clamp()
:
Example 8: Using clamp()
function with the width property.
.container {
background-color: grey;
width: clamp(250px, 40vw, 800px);
}
On a big screen resolution of 1400px:
- The
40vw
of our1400px
screen resolution is560px
- The minimum width is
250px
- The preferred or default value is
40vw
. If the width is larger than250px
but less than800px
, the browser will use the preferred value of40vw
. So the width of the big screen will be560px
- The maximum width is
800px
. The width will not exceed800px
. Depending on the screen resolution, it will range between250px
,40vw
and800px
Example 9: Using clamp()
function for font-sizes.
.container {
font-size: clamp(2rem, 2.5vw, 5rem);
color: grey;
}
For example, 9:
- The minimum font size is
2rem
while the maximum font size is5rem
- The preferred font size is
2.5vw
. The font size will grow with the size of the screen. It will never go below2rem
or exceed5rem
Check out this online calculator for font size calculation with CSS clamp()
. Enter the min and max font sizes, and the calculator will recommend a preferred font size.
Note: We can use any of the math functions for any CSS properties as long as they can accept a numerical value. Thus, CSS properties such as colors, paddings, margins, etc., will work with this function.
Conclusion
This article has taught us how to use the different types of CSS math functions. We will be able to create faster and better responsive websites by using CSS math functions.
Resources
Here are some resources that may be useful:
Top comments (0)