CSS functions

When it comes to solving the challenges of responsive web design, CSS functions are starting to replace and better media queries in some instances.

Want to have text that is no smaller than 16 px, but then scales with the size of the viewport, yet never gets bigger than 30 px?

With media queries, you would have to try to solve that problem something like this:

.headline {
    font-size: 16px;
}
@media (min-width: 400px) {
    font-size: 6vw;
}
@media (min-width: 1000px) {
    font-size: 30px;
}

But the reality is, that’s quite brittle. You’ll find yourself adding lots of little “tweak points” where you need to add another media query. For example, when the viewport is 950 px wide, that 6 vw is looking a little comically big.

Now we have a better tool for the job. You can do this instead:

.headline {
    font-size: clamp(16px, 4vw, 30px);
}

That’s pretty powerful, right? The clamp() function is just one...