Join the Webstudio community

Updated last year

support for min()

At a glance

The post discusses the min() CSS function, which allows setting the smallest value from a list of expressions as the value of a CSS property. Community members suggest using this function with CSS variables to make the values more dynamic and flexible, rather than hardcoding them. They express interest in having this functionality and believe it would be a "holy grail" for their use cases. However, there is no explicitly marked answer in the comments.

DDirky Dirk

The min() CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

Example use case:

Plain Text

width: min(1200px, 100% - 4rem);

7 comments

OOleg Isonen

yes, we want all css functions to be supported, but generally they won't fit into style panel inputs, so they will go into either css editor or via variables

OOleg Isonen

it also makes sense to be an expression, because those values shouldn't be hardcoded, you will want to use variables for them

OOleg Isonen

you will probably want something like min(breakpoint1, 100% - spacing1)

DDirky Dirk

yes exactly what I'm loooking for

DDirky Dirk

having a set of css vars and then including those within min() would help me tremendously

OOleg Isonen

Holy grail

OOleg Isonen

Will get there in the next couple of month

Add a reply