[SOLVED] CSS media query select complement of width interval

CSS media query select complement of width interval

I'm working on a webpage where I often need to use media queries like the following:

@media (min-width: 769px) and (max-width: 1280px) {
  ...
}

(Or with variables since I'm actually using Sass: (min-width: $vertical-view-max + 1) and (max-width: $medium-view-max))

Now, I am in the case where I would like the media query to trigger when the width is not in this interval.

I found that the following rule works fine:

@media (max-width: 768px), (min-width: 1281px) {
  ...
}

But I can't make it work with not operator:

@media (not ((min-width: 769px) and (max-width: 1280px))) {
  ...
}

I tried different parenthesizations (this one even seems to be invalid syntax). How should I write the rule? Is this not possible at all with the not operator?

Solution

That looks like a valid level 4 media query, but no browser has been updated to support the new grammar yet despite some of them beginning to support some of the new media features. In the meantime, to conform to level 3 with the not keyword your media query needs to look like this (with a media type added and all but the innermost pairs of parentheses removed):

@media not all and (min-width: 769px) and (max-width: 1280px) {
  ...
}

Despite what the apparent shortage of parentheses might suggest, the not actually serves to negate the entire media query starting from all and.