CSS @supports : mixing "not" with "and" or "or"

Question

我想为支持“显示:网格”但不支持 IE/MS Edge 的浏览器提供特定部分的 CSS。你如何混合正面和负面的@support 查询？

你能写“and not”还是有类似的符号？不幸的是，以下方法不起作用。

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

Answer 1

您需要另一组括号包围 not表达:

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

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

这是为了说明not旨在否定 (-ms-ime-align: auto)表达式而不是整个 @supports表达式，这是媒体查询中无穷无尽的困惑来源(其中 not 总是否定整个媒体查询，而不是在使用 and 与更多条件组合时只使用一个条件)。