@supports css calc function

Question

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

Answer 1

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.

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);

Answer 2

You can see if any calc condition works in the @support condition, and if it does, tell it to do what you actually want. So something like: JS Fiddle

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

See This line for Mozilla's documentation.