Why doesn't min() (or max()) work with unitless 0?

别说谁变了你拦得住时间么 提交于 2020-12-26 07:50:55

问题


I've searched around for an answer to this, but couldn't find any useful information. I'm trying to set the top property of an element in CSS to max(0, 120vh - 271px). I've tried several variations of this:

  • top: max(0, 120vh - 271px);
  • top: max(0, (120vh - 271px));
  • top: max(0, calc(120vh - 271px));

Is there something wrong with my syntax? I keep getting Chrome telling me that this is an invalid property error.

In practice, I'm actually using CSS variables for the numbers. so 120vh is actually var(--height) or something like that. When I use CSS variables, the line just doesn't do anything. It doesn't apply the style, and I don't get any warnings. What am I doing wrong here?

I'm using the newest version of Chrome (83 I believe), so this should be supported.


回答1:


You need to add a unit to 0 otherwise it's confusing for the browser to handle the comparaison between a uniteless value and a value with unit:

top: max(0px, 120vh - 271px)

To understand this, you need to follow the specification:

The min() or max() functions contain one or more comma-separated calculations, and represent the smallest (most negative) or largest (most positive) of them, respectively.

Then for calculations:

A calc() function contains a single calculation which is a sequence of values interspersed with operators, and possibly grouped by parentheses (matching the <calc-sum> grammar),

So basically all the rules of calc() apply to min()/max() and 0 is invalid

Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid. ref

Related: Why doesn't css-calc() work when using 0 inside the equation?

You may get surprised but using top:0 is valid while top:calc(0) is not. To make the latter valid it needs to be top:calc(0px). Same logic for min()/max()

Worth to note that the same also apply to clamp() since it's equiavalent to max(MIN, min(VAL, MAX))



来源:https://stackoverflow.com/questions/62520998/why-doesnt-min-or-max-work-with-unitless-0

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!