@Support 查询似乎颠倒了

Question

我写了一个媒体查询来检查浏览器是否支持 scroll-snap 和查询运行当浏览器不支持它时

@supports (scroll-snap-type: mandatory ){
    .swipe-layout{
        scroll-snap-type: x mandatory;
        overflow-x: scroll;
        display: flex;
        width: 100vw;
    }

    .swipe-layout > div{
        width: 100vw;
        min-width: 100vw;
        scroll-snap-align: start;
    }
    body{
        background-color: green;
    }    
}

Answer 1

带有 mandatory 关键字的 scroll-snap-type 的正确值是 x mandatory、y mandatory 或 both mandatory，但不仅仅是 mandatory .

但请注意，scroll-snap-type 出现在规范的早期草案中（基于点与基于元素），现已弃用。一些早期的实现确实已经支持这个关键字，因此 return 会产生误导 @support，即使它们不支持基于 API.
的新元素 Here you can see a table 这个 API 知道的不同阶段。

因此，您应该更喜欢 元素基础 添加的新属性之一，例如 scroll-snap-align 属性。

p { color: red; }
@supports( scroll-snap-type: x mandatory ) {
  .scroll-snap-type {
    color: green;
  }
}
@supports( scroll-snap-align: center ) {
  .scroll-snap-align {
    color: green;
  }
}

<p class="scroll-snap-type">scroll-snap-type</p>
<p class="scroll-snap-align">scroll-snap-align</p>

@Support 查询似乎颠倒了

@Support query seems inverted

css

media-queries