css - @supports css 计算函数

Question

有没有办法在@supports(propertyName, value)中使用calc 函数？我的意思是 where仅适用于 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()从几乎正好 4 年前推出的第 9 版开始就支持了）。如果您将它们一起使用，每个支持的浏览器@supports都会匹配该规则，任何支持calc()但不支持的浏览器@supports都会忽略该规则。换句话说，如果您将它们一起使用，您将通过阻止其中一些浏览器看到您的声明来减少可以使用该功能的浏览器的数量。calc()

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

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

Answer 2

您可以查看条件中是否有任何calc条件有效@support，如果有效，请告诉它执行您真正想要的操作。就像这样：JS Fiddle

@supports (width: calc(100% - 80em)) {
    div {
        width: calc(100% - 3em);
    }
}

有关 Mozilla 的文档，请参阅此行。