DEV Community

jmau111 🦄
jmau111 🦄

Posted on • Updated on

When math helps 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]! );
}
Enter fullscreen mode Exit fullscreen mode

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));
}
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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; 
  }
}
Enter fullscreen mode Exit fullscreen mode

You'd better use something like that:

h2 {
  font-size: calc(1.25rem + viewport_relative_value);
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
jmau111 profile image
jmau111 🦄

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.

Collapse
 
afif profile image
Temani Afif

and soon we will have more fun with more maths! w3.org/TR/css-values-4/#math

Collapse
 
jmau111 profile image
jmau111 🦄

Collapse
 
__manucodes profile image
manu • Edited

haha more math :D
https://media.tenor.com/images/a006e60e2967cb935ca806f641dbd137/tenor.gif