css - @supports css 计算功能

Question

有没有办法使用 calc function在 @supports(propertyName, value) ？我的意思是哪里<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() 的浏览器数量。通过阻止他们中的一些人看到您的声明来发挥作用。

幸运的是，自calc()是一个值，代替尚未存在的 @supports作者可以通过为 calc() 时提供后备声明来简单地利用级联。不支持:

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