@supports css 计算功能

Question

有没有办法使用calc function in @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

您可以查看 calc 条件是否适用于 @support 条件，如果适用，请告诉它执行您真正想要的操作。所以像这样：JS Fiddle

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

有关 Mozilla 的文档，请参阅 This line。

Answer 2

支持 @supports is far, far more restricted than calc() 因为后者是几年前引入的（最值得注意的是，IE 根本不支持 @supports，而它从版本 9 开始支持 calc()几乎恰好在 4 年前问世）。如果将它们一起使用，每个支持 @supports 的浏览器都会匹配该规则，而任何支持 calc() 但不支持 @supports 的浏览器都会忽略该规则。换句话说，如果你要一起使用它们，你会减少可以使用 calc() 函数的浏览器的数量，方法是阻止其中一些浏览器看到你的声明.

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

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

@supports css 计算功能

@supports css calc function

css

css-calc