Why does `not (some-width: Xem)` media query never fire?
css, media-queries, negation
Solution
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
Problem
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?