CSS数学函数的向后兼容性

Question

当在工具栏上使用以下css选择器时，它会导致Chrome 59上的工具栏高度为0:

.toolbar {
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
}

我尝试了以下内容，希望Chrome 59只使用第一个高度定义:

height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));

但是Chrome 59仍然只使用第二个高度定义，导致高度为0。

下面的代码也不能用:

@supports(height: max(0px)) {
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
}

它仍然尝试应用高度，并导致高度为0。

是否有向后兼容的方式来实现这个高度?如果Chrome 59只是简单地忽略高度并从其他地方继承它，只要它不导致0高度就可以。

Answer 1

以下方法有效:

&.supports-css-math {
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
}

然后在javascript中，需要添加supports-css-math类。如果使用react或value，它可以被添加到组件的模板中。

另一种可能更好，但还没有尝试过的方法是在dom的顶部添加supports-css-math，然后根据选择器定义一个css变量，例如--min-toolbar-bottom，可以稍后在工具栏组件中使用。