2 ms·

CSS spec editor: “If that confuses you, congrats, it confuses me too, which is why I wrote that note…” https://twitter.com/tabatkins/status/1254149169905725440

CSS spec editor: “If that confuses you, congrats, it confuses me too, which is why I wrote that note…” https://twitter.com/tabatkins/status/1254149169905725440 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?

uberman 6y ago
Yes it returns what is expected. The maximum of those two values. I'm not trying to be smug, but honestly if max(a, b) actually returned the minimum of those arguments do you really think that would be better? 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 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.
- SimeVidas 6y ago
  > Yes it returns what is expected. The maximum of those two values. What is the maximum of those two values?
  - uberman 6y ago
    Really? 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 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.
    - SimeVidas 6y ago
      You’re right. Context would be useful. Let’s use this: .elem { width: max(80%, 200px); } The goal is to explain what this declaration does.
      - uberman 6y ago
        We are going in circles. Without knowing anything about the lineage of an element with this class it is not possible to say. 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?
        SimeVidas 6y ago
        > a width of 80% of its parent or 200px whichever is larger 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.

uberman 6y ago

Yes it returns what is expected. The maximum of those two values. I'm not trying to be smug, but honestly if max(a, b) actually returned the minimum of those arguments do you really think that would be better? 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 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.

SimeVidas 6y ago
> Yes it returns what is expected. The maximum of those two values. What is the maximum of those two values?
- uberman 6y ago
  Really? 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 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.
  - SimeVidas 6y ago
    You’re right. Context would be useful. Let’s use this: .elem { width: max(80%, 200px); } The goal is to explain what this declaration does.
    - uberman 6y ago
      We are going in circles. Without knowing anything about the lineage of an element with this class it is not possible to say. 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?
      - SimeVidas 6y ago
        > a width of 80% of its parent or 200px whichever is larger 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.