@supports CSS calc函数

Question

有没有一种方法可以在 @supports(propertyName, value) 中使用 calc 函数？我的意思是，<supports_condition> 只适用于 calc 函数。

@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)
    }
}

- Gildas.Tambo

Answer 1

支持@supports的浏览器远远比支持calc()的浏览器少得多，因为后者比前者早几年引入（尤其是IE根本不支持@supports，而自4年前发布的9版已经支持了calc()）。如果您同时使用它们，每个支持@supports的浏览器都将匹配该规则，任何支持calc()但不支持@supports的浏览器都会忽略该规则。换句话说，如果您同时使用它们，您将通过阻止一些浏览器永远看不到您的声明来减少可以使用calc()函数的浏览器数量。

幸运的是，由于calc()是一个值，在不存在@supports的情况下，作者可以利用级联提供回退声明以便在不支持calc()时使用：

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

- BoltClock

Answer 2

您可以查看@support条件中是否有任何calc条件可用，如果有，则告诉它执行实际想要的操作。类似于：JS Fiddle

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

请参考Mozilla的文档，了解如何测试CSS属性或其前缀版本的支持情况。

- Derek Story