Question

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

Answer 1

对@supports的支持远远超过calc()，因为后者是几年前推出的（最值得注意的是，IE根本不支持@supports，而它从版本9开始支持calc()几乎就在4年前出版了。如果您要同时使用它们，则支持@supports的每个浏览器都会匹配该规则，并且支持calc()但不支持@supports的任何浏览器都会忽略该规则。换句话说，如果您要将它们结合使用，那么您可以减少可以使用calc()函数的浏览器数量，方法是阻止其中一些人看到您的声明。

幸运的是，由于calc()是一个值，代替一个尚未存在的@supports作者可以通过为calc() isn＆＃提供回退声明来简单地利用级联39; t支持：

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

Answer 2

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

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

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

@supports css calc函数

2 个答案: