"screen and" #53

chriscoyier opened this Issue Aug 10, 2011 · 13 comments


None yet
7 participants

Using on new design of http://css-tricks.com/ ...

Did not work with my media queries like

@media (max-width: 1200px)

but if I added "screen and" it works

@media screen and (max-width: 1200px)

May be expected behavior but had me stumped for a minute. If it was up to me I wouldn't use screen and and just let the media query handle all media types.


scottjehl commented Aug 14, 2011

Hey Chris,
Weird. I'd replied to this but for some reason it didn't send.

Anyhow, good point. There's a pull for this feature, which I plan to review next: #41

For now, you could always use "all and" I suppose...?


I tested that branch and can verify it works in IE 8 with three different max-width queries like

@media (max-width: 860px) {

scottjehl commented Aug 16, 2011

Thanks, Chris. Good to know. Unfortunately, I'm seeing some failing unit tests, so I'll need to work them out before bringing this into master.

monster commented Aug 18, 2011

This thread was quite useful to me for a different reason... I was trying to find a way to get the script to ignore my high-res (retina) media queries and removing "screen" did the trick.

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)

IE was reading the contents of those queries in which I was using "background: position" to move some images around. In this case it affected the layout negatively.

Unless there's a (proper) way that I'm not aware of, it would be useful to prevent the script from parsing the device-ratio queries.

Scott, if the failing unit tests are related to my pull request (or even if they aren't), I'd be happy to help iron them out.

@monster - You might want to use the only keyword. For example: @media only screen and (min-width: 50px)

Using only is defined in the spec as the way to hide style blocks from any browser that doesn't understand media queries, which sounds like what you want in your case.

The current master branch of Respond removes only when it injects style sheets, but the pull request Scott mentioned in this thread will – correctly, I believe – leave it in. I've just tested the branch and verified that older browsers ignore the style sheets with a media type of "only [screen, print, etc.]".

monster commented Aug 18, 2011

@stevelove - The branch you mentioned does what you said. Are there any issues with this branch that still need to be hashed out?

@monster - Sounds like Scott is seeing some issues with the branch, so I'll defer to him on that question.

monster commented Aug 18, 2011

@stevelove - No worries. I appreciate your responses!

payneio commented Dec 1, 2011

I'm not certain from reading this thread what the best way is to handle the issue raised by @monster. I'm having the same issue... using jQuery Mobile's 1.0 style sheet which has an @media only screen and section for retina display icons. In ie7/8 even with the only keyword, the rules are (incorrectly) being injected into the stylesheet.

It seems like this shouldn't be happening on the master branch??

payneio commented Dec 1, 2011

Specifically, the rules that are incorrectly being applied (rather than correctly being ignored) are:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (min--moz-device-pixel-ratio: 1.5),
   only screen and (min-resolution: 240dpi) {

... various css styles here ...


I ran into the same issue as @monster and @westcave - IE7 was using the rules implemented within my -webkit-min-device-pixel-ratio block even though it shouldn't have been...

Leaving off the "screen and" part works everywhere I tested, but not when using respond.js

I've put together a basic demo of this issue: http://dl.dropbox.com/u/8864275/respond/issue53.htm.

scottjehl closed this in a7ef2b1 Jan 27, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment