Let's say a browser supports a particular property - but only within a specific context, is there a way to somehow tell @supports which context you're referring to?
For example, let's say I want to write a feature query for the gap property.
Now, according to the spec - CSS Box Alignment Module Level 3 -
The gap property, and its row-gap and column-gap sub-properties, provide this functionality for multi-column, flex, and grid layout.
Is there a way to write a feature query for the gap property - specifically in the context of a flex container?
What I tried:
body {
margin: 0;
padding: 0;
border: 5px solid tomato;
}
.flex {
display: flex;
gap: 10px;
}
@supports not (gap: 10px) {
.flex > * {
margin: 0 10px;
}
.flex > :first-child {
margin-left: 0;
}
.flex > :last-child {
margin-right: 0;
}
}
.child {
background: #000;
flex: auto;
min-height: 100px;
}
<div class="flex">
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
What i'm trying to do in the above snippet is to say:
If gap is not supported for my flex container - manually add margin gaps.
When I run this in Chrome, it detects that the gap property is supported1 (chrome dev tools doesn't cross it out either), so it doesn't add my fallback margin css declarations.
The thing is that Chrome only seems to support the gap property specifically for grid containers, but not for flex containers. (caniuse)
So is there a way to write a contextual feature query?
1 I went to the @supports spec to find out what constitutes a property being supported:
A CSS processor is considered to support a declaration (consisting of a property and value) if it accepts that declaration (rather than discarding it as a parse error). If a processor does not implement, with a usable level of support, the value given, then it must not accept the declaration or claim support for it.
Based on that definition, i'm guessing that Chrome claims to support the gap property because of the 'usable level of support' it has for grid containers.