CSS @supports：混合「不」與「和」或「或」

Question

我想將CSS的某個部分提供給支持「display：grid」但不是IE/MS Edge的瀏覽器。如何混合正面和負面的@support查詢？

你可以寫'而不是'還是有類似的符號？不幸的是，以下內容不起作用。

@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與更多條件結合時的一個條件）。