Day 5: the max() function
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.
max() function takes a comma separated list of expressions. The largest value in the list will be selected.
width: max(400px, 200px, 300px);
/* width = 400px */
This example doesn’t make much sense because the value will always be
max() shows its true power when you use relative units.
width: max(300px, 50vw);
50vw is lower than 300px,
50vw is larger than 300px, it matches
50vw. This is basically a shorter version of this.
PS: The next post is coming on Monday because weekends are for family and friends. ❤️
See on CodePen.