Day 5: the max() function

This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović

It’s time to get me up on 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. ❤️

This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2022-09-30T09:38:54+00:00) Day 5: the max() function. Retrieved from https://www.scien.cx/2022/09/30/day-5-the-max-function/

MLA

" » Day 5: the max() function." Manuel Matuzović | Sciencx - Friday September 30, 2022, https://www.scien.cx/2022/09/30/day-5-the-max-function/

HARVARD

Manuel Matuzović | Sciencx Friday September 30, 2022 » Day 5: the max() function., viewed ,<https://www.scien.cx/2022/09/30/day-5-the-max-function/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 5: the max() function. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/30/day-5-the-max-function/

CHICAGO

" » Day 5: the max() function." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/09/30/day-5-the-max-function/

IEEE

" » Day 5: the max() function." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/09/30/day-5-the-max-function/. [Accessed: ]

rf:citation

» Day 5: the max() function | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/09/30/day-5-the-max-function/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.