css - @supports不在FF和Chrome中使用

我正在用Less编写CSS，由于某种原因，@ supports没有显示。可能是嵌套问题吗？

@supports(display: grid) {
    .two-up {
        @media screen and (min-width: @small-screen) {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }
}

最佳答案

LESS code compiles ok。

它可以在Chrome和Firefox中使用：
https://codepen.io/oslego/pen/KeQpgr

@small-screen: 10em;

@supports(display: grid) {
    .two-up {
        @media screen and (min-width: @small-screen) {
            width: 500px;
            height: 500px;
            background-color: green;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }
}

  <div class="two-up"></div>

也许您有遵循该规则的其他代码，或者以意外的方式与之竞争。

关于css - @supports不在FF和Chrome中使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50932191/