When math helps CSS

#css

Math does not do evil, and modern CSS allows you to use it, so enjoy.

Functional notations

CSS allows you to do from simple to advanced calculations with functional notations:

selector {
  property: functional-notation( [argument]? [, argument]! );
}

Source: MDN - Functional notations

Those notations accept mathematical expressions as argument, which allows for using math logic in CSS. Note that you can even nest functional notations:

body {
  width: min(1000px, calc(70% + 100px));
}

What does it mean?

if the viewport is smaller than 1000px, the width is set to 70% of the screen + 100px
if the viewport is larger than 1000px, the width is 1000px

CSS animations

@keyframes are great, but it's sometimes a little wordy, especially when dealing with complexe animations that require more options than ease, ease-in, ease-out, ease-in-out, or linear timing-functions.

In this case, mastering the cubic-bezier() function can be a great asset to your CSS. It allows for defining curves accurately:

cubic-bezier(x,y,x',y')

Where x, y, x', and y' are the control points for the curve.

For more advanced usages and undertanding, read the post by Temani Afif - Advanced CSS Animation Using cubic-bezier().

Note that you can also use an online generator to visualize how your transition is going to look. It's editable.

It can be essential for your brand, so it's definitely something to know in CSS.

The maths of CSS locks

A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other.

Source: Florian Verschelde - The math of CSS Locks

In his post, Florian Verschelde describes the technique, its limitations, and the math behind.

In short, the CSS lock is a specific value calculation.

Instead of doing this:

@media (min-width: 320px) {
  h2 {
      font-size: 1.25rem; 
  }
}
@media (min-width: 960px) {
  h2 { 
      font-size: 2rem; 
  }
}

You'd better use something like that:

h2 {
  font-size: calc(1.25rem + viewport_relative_value);
}

This way, the size varies according to the viewport. The game consists of finding the right value for viewport_relative_value.

The CSS locks are not only meant for font sizes, you can use it for line height, for example.

However, as "the actual value goes linearly from the minimum to the maximum", you must see the variation as a linear function to find the right value, which require some basic maths knowledge.

I strongly recommend reading the full post, even if it's been published in 2016.

Conclusion

I'm not gonna lie to you, CSS math can be a little hard to understand sometimes, especially when you need advanced customization, but don't give up, it's worth it.

Modern notations and approaches allow for pretty cool layouts in this responsive era.

Top comments (4)

spO0q 🐒🎃 • Apr 27 '22

For those who read that in 2022, the best I've found so far is definitely the approach described in the post. Use rem + some value in vw for max compat and a linear function to determine the best value.