3

I'm trying to negate the max-device-width media query (the reason for this is I don't won't both (max-device-width: X) and (min-device-width: X) to fire if the device has precisely that width). Unfortunately, the not (min-or-max-some-width: X) media queries never fire.

Here's a small fiddle. I expect two yellow lines on the desktop and two red lines on mobile. What I get is only one yellow line on the desktop (the last one) and only one red line on mobile (the first one).

What am I doing wrong?

Septagram
  • 9,425
  • 13
  • 50
  • 81

1 Answers1

8

When Media Queries was first introduced, it required the not keyword to be followed by a media type in order for the media query to be valid. It seems strange, but that's just how the grammar was defined (see the media_query production).

This is now fixed in Media Queries level 4 (see the <media_not> production), so what you have should work as expected in browsers that conform to MQ4. However, none of the browsers that have begun shipping level 4 media features has implemented the new grammar yet.

In the meantime, you'll need to add a media type. If the media type is not important, use all:

not all and (max-device-width: X)

Updated fiddle

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • @Septagram: It does. It *might* help if you added `all and` to the rest of your media queries. The addition of `not` simply takes the entire media query and negates it. – BoltClock Jun 27 '14 at 16:09
  • What if I need to specify several media queries and negate only one of them, e. g. what I intend is `(min-some-parameter: 12em) and not (max-another-parameter: 15em)`? – Septagram Jun 27 '14 at 16:12
  • @Septagram: This is supposed to be made possible by nesting your `@media` rules, but [that's not completely supported across browsers yet](http://stackoverflow.com/questions/11746581/nesting-media-rules-in-css/11747166#11747166). I'm not sure if there are workarounds, but I'd encourage you to post that separately - it's a pretty good question. Meanwhile, I'm curious to see if they're willing to take syntax enhancements for MQ level 4... – BoltClock Jun 27 '14 at 16:15