@supports css calc函数

Question

有没有办法在@supports(propertyName,value)中使用calc函数？我的意思是只在calc函数的位置.<supports_condition>

@supports ( <supports_condition> ) {
    .col-3 {
    width: calc(25% - 20px/4)
    }
    .col-4 {
        width: calc(33.3333333% - 20px/3)
    }
    .col-6 {
        width: calc(50% - 20px/2)
    }
}

Answer 1

由于后者是在几年前推出的@supports,因此支持远远超过calc()后者(最值得注意的是,IE根本不支持@supports,而calc()自从9年前几乎完全出现以来它已经支持了).如果您要一起使用它们,那么每个支持的浏览器@supports都会匹配该规则,并且任何支持calc()但不支持的浏览器@supports都会忽略该规则.换句话说,如果你要一起使用它们,你就会减少可以使用该calc()功能的浏览器的数量,防止它们中的一些人看到你的声明.

幸运的是,因为它calc()是一个值,代替一个尚未存在的@supports作者可以通过为calc()不支持的时间提供回退声明来简单地利用级联:

width: 95px;
width: calc(25% - 20px/4);