4

I would like to serve a certain portion of CSS to browsers that support "display: grid", but are not IE/MS Edge. How do you mix positive and negative @support queries?

Can you write 'and not' or is there a similar notation? Unfortunately the following will not work.

@supports not (-ms-ime-align:auto) and (display: grid) {
  display: none;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Amielucha
  • 123
  • 1
  • 7

1 Answers1

10

You need another set of parentheses surrounding the not expression:

@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>.

This is to make it clear that the not is intended to negate the (-ms-ime-align: auto) expression and not the entire @supports expression, something that was an endless source of confusion in media queries (in which not always negates an entire media query, as opposed to just one condition when combined with more conditions using and).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Irrelevant question, how in the world did you get 403,000 rep? That surely can't be just from answering questions? – jdmdevdotnet Feb 09 '17 at 18:10
  • 1
    @AlGoreRhythm: [I've been around.](http://stackoverflow.com/help/badges/13/yearling?userid=106224) – BoltClock Feb 09 '17 at 18:12
  • @AlGoreRhythm He's gotten [quite a bit of rep from asking questions](http://stackoverflow.com/users/106224/boltclock?tab=questions), too. But wait until you see Jon Skeet on this site... – TylerH Feb 09 '17 at 18:28
  • I'm just generally curious how people get THAT high? Is it solely from asking/answering questions? I know this is grossly off topic, sorry for that, just oddly curious and really want to know how this happens. – jdmdevdotnet Feb 09 '17 at 18:33
  • Yes, that is the only way to earn reputation (besides suggesting edits before having 2k rep). See [this page](http://stackoverflow.com/users?tab=Reputation&filter=all) for a list of the highest rep users of all time – Zach Saucier Feb 09 '17 at 18:34
  • 1
    @AlGoreRhythm Drop into [chat](http://chat.stackoverflow.com/rooms/29074/html-css-webdesign) and we can talk about off-topic stuff without worry. – TylerH Feb 09 '17 at 18:34
  • 1
    @AlGoreRhythm: Yes, basically. The first couple of pages of my answers are mostly old answers that have accumulated votes in the hundreds over the years (which is why my Yearling badges are relevant). Q&A - it's a hell of a drug. – BoltClock Feb 09 '17 at 18:34