@supports css 计算函数答案

【问题标题】：@supports css calc function@supports css 计算函数
【发布时间】：2015-05-14 02:19:57
【问题描述】：

有没有办法在@supports(propertyName, value) 中使用calc function？我的意思是<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)
    }
}

【问题讨论】：

标签： css css-calc

【解决方案1】：

对@supports 的支持远比calc() 受到更多限制，因为后者是在几年前推出的（最值得注意的是，IE 根本不支持@supports，而从版本开始就支持calc() 9 几乎正好在 4 年前问世）。如果您将它们一起使用，每个支持@supports 的浏览器都会匹配该规则，任何支持calc() 但不支持@supports 的浏览器都会忽略该规则。换句话说，如果您将它们一起使用，您将减少可以使用calc() 函数的浏览器数量，因为它们会阻止其中一些浏览器看到您的声明。

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：