Question 211819 in CSS Question posted in
Some basic documentation can be found here.

css min() and max() functions vs min-width and max-width

I’ve seen people using min() and max() css functions instead max-width or min-width props like that:

width: min(440px, 100%);

Instead of classic:

width: 440px;
max-width: 100%;

Which is better? I mean, is any performance caveat using min() or max() or is it good to use?
In my case, I think the max-width way is more understandable than min() function, what do you think?

Thanks

Tags:

2

Answers


  1. 0

    In the first case, min() is a function will let you "set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value." (MDN).

    This can be applied to different properties to select the minimum value across a set of values – in particular useful if you want to set an absolute to a property, that will be updated with a relative value under specific conditions.

    In the second case, if width is smaller than min-width or larger than max-width, then this option (min/max-width) will be applied as value. It is a property concerning width specifically, setting an arbitrary value for that matter.

    They are two different things. Using for instance min() to implicitly define min/max-width, does not make them the same thing.

    Login or Signup to reply.
  2. 0

    As far as I can see, they give the same result.

    .d1 {
  width: min(440px, 100%);
  background: pink;
}

.d2 {
  width: 440px;
  max-width: 100%;
  background: cyan;
}
    <div class="d1">&nbsp;</div>
<div class="d2">&nbsp;</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search