CSS @supports：将“not”与“and”或“or”混合

Question

我想将CSS的某一部分提供给支持“display：grid”的浏览器，但不是IE / MS Edge。你如何混合正面和负面的@support查询？

你能写'而不是'或者是否有类似的符号？不幸的是，以下情况不起作用。

@supports not (-ms-ime-align:auto) and (display: grid) {
  display: none;
}

Answer 1

您需要围绕not表达式的另一组括号：

＆＃13;

＆＃13;

@supports (not (-ms-ime-align: auto)) and (display: grid) {
  .example { display: none; }
}

＆＃13;

<p class=example>You are using IE or Microsoft Edge,
or a different browser that does not support <code>display: grid</code>.

＆＃13;

＆＃13;

＆＃13;

这是为了清楚地表明not旨在否定(-ms-ime-align: auto)表达式而不是整个@supports表达式，这是媒体查询中无休止的混淆源（其中not 总是否定整个媒体查询，而不是只使用and与更多条件结合时的一个条件。