CSS min() and max() functions are counterintuitive
webplatform.news
webplatform.news
CSS min() and max() do exactly what is intuitive. The author's confusion is not understanding how to apply the results.
to be clear:
max(10px, 12px) === 12px
min(10px, 12px) === 10px
exactly as one would expect.
https://twitter.com/tabatkins/status/1254149169905725440
You can pat yourself on the back for finding it intuitive, but many people aren’t. If it were just me, I would not have written about it.
Also note that in your examples you’re using two literal values that share the same unit (something that wouldn’t happen in real code). I think it’s fairly clear what the functions do in that case, but it’s less clear if the units are different:
max(80%, 200px)
Can you describe what the above value means?
The confusion seems to stem from the uncertainty of how to apply these functions when you want to ensure a minimum threshold for a width, padding or something similar.
When you want to ensure that the width is at least some size (but potentially larger) then you might want to take the maximum of the current width and some given threshold.
Conversely, when you want to ensure that the width is no larger than some threshold (but potentially smaller) you might take the minimum of of the current width and your threshold.
In either case what min() and max() do is clear.
Perhaps the demos on:
https://developer.mozilla.org/en-US/docs/Web/CSS/max
might help make it more clear for some.
I'm sure you understand the issue as you wrote this article. Perhaps a better title might be something about the being careful about when to use min() vs max() rather than stating that these functions are themselves counter intuitive.
What is the maximum of those two values?
Without context it is impossible to say what 80% translates into. However, with context it will be absolutely clear what max(80%, 200px) is. It will be the greater of those two values. If you want to wish it to be the least of those two values then go ahead and wish.
Alternatively, feel free to try it out at:
https://developer.mozilla.org/en-US/docs/Web/CSS/max
Up until this very moment I have given you the benefit of the doubt. Do you even understand what 80% means? I'm beginning to suspect that min() and max() are the least of your issues if the concept of the CSS percentage datatype has you baffled.
.elem { width: max(80%, 200px); }
The goal is to explain what this declaration does.
Conceptually an element with this class will have a width of 80% of its parent or 200px whichever is larger. Hypothetically a simple parent with a width of 400px would result in this element having a width of (0.8 X 400) 320px as 320px is larger than 200px
What do you think this does if not that?
Alternatively, “…but at least 200px” to make it more clear that 200px represents the minimum width.
Based on the linked discussion on Twitter, I suspect that most people cannot interpret this declaration correctly, at least not at first glance (i.e., instinctively).
For example, someone’s thought process could be like this: “Ok, it’s a width, and there is a max function, and the absolute value is 200px. So, something about max width being 200px?”
The person sees “max” and 200px, and they then have to deduce that the minimum value is 200px, not maximum. This is what’s counterintuitive about it.
width: max(X, 200px) → minimum width is 200px
If you are not affected by this at all, than that’s great for you, but if most people are, then we can say that the feature is counterintuitive.
The only thing that matters is how actual people interpret the feature instinctively. If their gut-instinct interpretation is incorrect (or even if they’re just unsure), then we have a problem.
People who can't understand max() probably can't see that -10 is less than -9 either. That does not make the "<" operator counter intuitive. This actually has nothing to do with CSS and to me demonstrates a crazy fundamental mis-understanding of math and logic.
For someone confused about what max() might do, you should be clearly stating that it does exactly what is expected, however you might caution a particularity novice coder that they might want to double check that they truly want the greatest of two numbers rather than the least of two numbers. Framing these functions as counter intuitive when they are crystal clear makes it more likely that a novice gets it wrong.
"That person on hacker news told me that max does not work like I expect. I should use it to get the least of two numbers"
With advice like that I guess I can see where novices might be confused. I'm sure you believe at this point that I am some sort of ass, but truthfully I would never hire someone who could not intuit what max() did.
I think you’re overestimating how flawless people are mentally.
Take a look at this: https://twitter.com/mxstbr/status/1038073603311448064
This is absolute HTML and CSS basics, and yet only 43% of over 14 thousand people got it right. What gives? Are most of these voters a bunch of amateurs?
I don’t think so. My explanation is that people make mistakes. Constantly. Basic mistakes. That’s part of being human. Our brains aren’t machines that produce flawless results. We forget things. We get confused.
Is this a problem? Should all of these people be fired? No. As long as they can find and correct their mistakes, and produce a correct result in the end, it’s fine.
The first sentence in my first reply to you was a quote from the CSS spec editor: “If that confuses you, congrats, it confuses me too, which is why I wrote that note…”
This is Tab Atkins. A Googler. The main CSS spec editor. Probably one of the most knowledgeable people about CSS in the world.
How is it possible that min()/max() confuses him? Is he secretly a noob that doesn’t understand basic math? My explanation is the same. He’s human. His brain doesn’t work perfectly.
I am not suggesting that most people don’t understand max(). I’m saying this:
* When people see something like max(80%, 200px), they get confused, even if it’s just for a moment.
* I have explained in my previous comment why that is (max() + absolute value = minimum value)
* Then, after they look at the code for a few seconds or more, look up max() on MDN, etc., they eventually figure it out. How many do? Most? I don’t know.
But in that first moment, instinctively, most people get confused.
I have wasted a bunch of time on these comments, but I’m not going to let some IQ 200 genius convince me that min()/max() isn’t counterintuitive in this specific scenario.