Day 5: the max() function

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

The max() function takes a comma separated list of expressions. The largest value in the list will be selected.

div {
  width: max(400px, 200px, 300px);
  /* width = 400px */
}

This example doesn’t make much sense because the value will always be 400px.
max() shows its true power when you use relative units.

div {
  width: max(300px, 50vw);
}

If 50vw is lower than 300px, width matches 300px. If 50vw is larger than 300px, it matches 50vw. This is basically a shorter version of this.

div {
  min-width: 300px;
  width: 50vw;
}

PS: The next post is coming on Monday because weekends are for family and friends. ❤️

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS