用于根据上下文实现的属性的CSS功能查询

Question

假设浏览器支持特定属性-但仅在特定上下文中，有没有办法以某种方式告诉@supports您所指的上下文？

例如，假设我要为gap属性编写功能查询。

现在，根据规范-CSS Box Alignment Module Level 3-

  

gap属性及其行间隙和列间隙子属性，   为多列，伸缩和网格布局提供此功能。

有没有一种方法可以为gap属性编写特征查询-特别是在flex容器的上下文中？

我尝试过的事情：

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>

我在上面的片段中试图做的是说： 如果我的flex容器不支持gap，请手动添加页边空白。

当我在Chrome中运行此命令时，它检测到支持gap属性 ¹ （chrome开发工具也无法将其清除），因此它不会添加我的后备保证金css声明

问题是Chrome似乎仅支持专用于网格容器的gap属性，而不支持flex容器。 （caniuse）

有没有办法编写上下文特征查询？

---

¹ 我去了@supports spec来找出受支持的属性的构成：

  

CSS处理器被认为支持声明（由   属性和值）（如果它接受该声明，而不是   丢弃为解析错误）。如果处理器没有实现，   有可用的支持水平，即给定的价值，那么它一定不能   接受声明或要求其支持。

基于该定义，我猜测Chrome声称支持gap属性，因为它对网格容器具有“可用的支持水平”。