如何检测浏览器是否支持CSS的round()函数？

初始测试（元素高度为0） #

使用以下代码时，元素高度始终为0：

<div class="check_round">
</div>

:root {
--my_height_0: 100.1px;
--my_height: round(up,var(--my_height_0));
}

.check_round {
    background-color: teal;
    width: 100px;
    height: var(--my_height)
}

尝试取max值的版本（仍返回高度0） #

调整为以下写法后，元素高度还是0：

:root {
    --my_height_0: 100.1px;
    --my_height_1: round(up,var(--my_height_0));
    --my_height: max(var(--my_height_0),var(--my_height_1));
}

添加取整间隔后的有效方案 #

给round()函数添加取整间隔参数后，这个写法在支持round()的浏览器中会返回正确的101px高度，但在不支持的浏览器中返回高度0：

:root {
  --my_height_0: 100.1px;
  --my_height: var(--my_height_0);
  --my_height: round(up,var(--my_height_0),1px);
}

@supports检测失效的情况 #

以下@supports检测无论浏览器是否支持round()都会失败：

@supports (round(up,var(--my_height_0),1px)) {
  :root {
    --my_height: round(up,var(--my_height_0),1px);
  }  
}

内容的提问来源于stack exchange，提问作者fritz