Software Developer
Used for: The min() function uses the
smallest value, from a comma-separated
list of values, as the property value.
.section {
width: min(50%, 300px);
}
Benefit: Responsive sizing without the
need for media queries!
Used for: The max() function uses the
largest value, from a comma-separated list
of values, as the property value.
.section {
margin-top: max( 8vh, 2rem);
}
Benefit: Responsive sizing without the
need for media queries!
Used for: The clamp CSS function clamps a
value between an upper and lower bound.
clamp( enables selecting a middle value within
a range of values between a defined minimum
and maximum. It takes three parameters: a
minimum value, a preferred value, and a
maximum allowed value.
h1 {
font-size: clamp(1.8rem, 3vw + lrem, 4rem);
}
Benefit: An alternative for media queries.
Here, the font size will be larger when the
element has more space on the page and
smaller if it's placed in a narrow column.
Used for: performing basic math
operations, with the ability to interpolate
between unit types (ex. rem to VW).
.section {
height: calc(100vh - 60px);
}
Benefit: calc() allows you to avoid either
hard-coding a range of magic numbers or
adding a JavaScript solution to calculate the
value needed to apply it as an inline style.