@supportsss calc函数 [英] @supports css calc function

问题描述

是否可以使用 calc函数 @supports(属性名称，值)?我的意思是< supports_condition> 仅用于calc函数.

Is there a way to use the calc function in @supports(propertyName, value)? i mean where <supports_condition> is only for the calc function.

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

推荐答案

对 @支持 远比 calc() ，因为后者是几年前才引入的(最值得注意的是，IE完全不支持 @supports ，而自版本以来，它已支持 calc()9几乎是4年前问世的).如果您将它们一起使用，则每个支持 @supports 的浏览器都将匹配该规则，并且任何支持 calc()但不支持 @supports 的浏览器都将匹配该规则.code>会忽略该规则.换句话说，如果您将它们一起使用，则会减少可以阻止某些浏览器使用 calc()函数的浏览器数量您的声明.

Support for @supports is far, far more restricted than calc() because the latter was introduced several years earlier (most notably, IE doesn't support @supports at all, whereas it has supported calc() since version 9 which came out almost exactly 4 years ago). If you were to use them together, every browser that supports @supports would match that rule, and any browser that supports calc() but not @supports would ignore that rule. In other words, if you were to use them together you'd be reducing the number of browsers that can use the calc() function by preventing some of them from ever seeing your declarations.

幸运的是，由于 calc()是一个值，因此可以通过提供后备声明来代替不存在的 @supports 对于不支持 calc()的情况:

Fortunately, since calc() is a value, in lieu of a not-yet-existing @supports authors could simply take advantage of the cascade by providing fallback declarations for when calc() isn't supported:

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

这篇关于@supportsss calc函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！