Bansoa is the answer Bansoa is the answer - 2 months ago 20
CSS Question

@supports css calc function

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

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