CODEWITHSUNDEEP
cssmedia-queries
Rona Kilmer
Rona Kilmer

Reputation: 159

Problems with "Not" Operator in Media Query

I am working on a responsive site and my client wants certain styles to apply to the desktop at 768px but NOT to tablets at that size. I've tried multiple media queries but I can only get Firefox to cooperate. Chrome, Safari and IE all ignore the media query. Here is what I tried.

 @media only screen and (min-width: 768px), not (min-device-width: 768px) and (max-device-width: 1024px) {
    /* styles for desktop only here */
 }

I think it has to do with the "not" operator but I don't see that I'm doing anything wrong. It's also worth mentioning that the ipad (in my simulator) ignores the media query which is exactly what I want. I just can't get the Chrome, Safari and IE on my desktop to read the dang thing.

Upvotes: 5

Views: 4418

Answers (3)

Jake
Jake

Reputation: 1067

Other answers have suggested alternative approaches. I'll try and explain why what you were trying didn't work (as expected). I think this would be useful for people trying to get not working in media queries.

Negation of media expressions (individual parts like (min-device-width: 768px), as opposed to media queries, which are the full items in the comma-separated list, like only screen and (min-width: 768px)) requires CSS Level 4 which (AFAIK) is currently only supported in Firefox.

CSS Level 3 does support negation of full media queries (only), but if you use the not operator, you must also specify a media type.

So a Level 3 media query for 'not a tablet-sized device' would be not all and (min-device-width: 768px) and (max-device-width: 1024px) (or not screen and ... as suggested in @Chuck Kollars' answer).

not (min-device-width: 768px) and (max-device-width: 1024px) is not a valid Level 3 query but is a valid Level 4 query. However, not has greater precedence than and so it actually means (not (min-device-width: 768px)) and (max-device-width: 1024px) which is not what you intended.

The inner CSS rules are applied whenever any of the media queries in the list match. In other words, the comma (,) acts like an or operator. So what you were trying actually means 'at least 768px wide, or not a tablet', which will match almost everything (or would do with the media type added to the second query so it can be parsed by Level 3 browsers).

The only way I can think of to achieve what you were intending with CSS Level 3 would be something like

@media screen and (min-width: 768px) and (min-device-width: 1025px), 
       screen and (min-width: 768px) and (max-device-width: 767px) {
}

(Though the second media query now looks probably superfluous and unlikely to match.)

But as stated in @mddw's answer, this won't exclude all tablets and may even exclude some other devices.

Upvotes: 0

Chuck Kollars
Chuck Kollars

Reputation: 2175

Each and every Media Query string separated by commas should be fully formed (I'm not aware that in the spec anything carries over from one to the next ...although some browsers may support "shortcuts" here, it's prudent to stick to the lowest common denominator: the spec). (Among other things this makes testing easier since simple text mods allow you to test one Media Query at a time.) And of course "only" and "not" are mutually exclusive options. So I think the syntax should be 

@media only screen and (min-width: 768px), not screen and (min-device-width: 768px) and (max-device-width: 1024px) {

(xxx-device-width: and xxx-width: [with inclusion or exclusion of "-device"] refer to the screen width and the viewport/layout width respectively [which are typically the same for "desktop" devices, and for most handhelds if <meta name="viewport" content="width=device-width"> was specified, but may not be the same for smartphones without the "viewport" specification in the HTML source of the page). I don't typically see a mixture of the two in a single Media Query statement, and so [even though I haven't yet tried to understand this example in detail] I suspect something is a bit awry.)

Upvotes: 3

mddw
mddw

Reputation: 5580

You can't tell appart tablets and computers with resolution media queries : too much different resolutions on different hardware and no real common rule (have a look here, and that's only Androïd !)

You should detect touch support with Javascript, add a class to your HTML tag and build your CSS on this basis, bearing in mind it's not a 100% catch (there are touch computers.)

Try http://www.modernizr.com/ !

Upvotes: 1

Related Questions