时间戳

首页 > 解决方案 > 上下文实现属性的 CSS 功能查询

css - 上下文实现属性的 CSS 功能查询

问题描述

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

例如，假设我想为gap属性编写一个特征查询。

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

gap 属性及其 row-gap 和 column-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>

我在上面的代码片段中要做的是说：如果gap我的 flex 容器不支持 - 手动添加边距间隙。

当我在 Chrome 中运行它时，它检测到支持 gap 属性1（chrome 开发工具也不会将其删除），因此它不会添加我的后备边距 css 声明。

问题是 Chrome 似乎只支持专门用于网格容器的 gap 属性，但不支持 flex 容器。（犬）

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

1我查看了@supports 规范以了解什么构成了受支持的属性：

如果 CSS 处理器接受该声明（而不是将其作为解析错误丢弃），则认为它支持声明（由属性和值组成）。如果处理器没有以可用的支持级别实现给定的值，则它不能接受声明或声明对它的支持。

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

标签： css

解决方案

推荐阅读