Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

"screen and" #53

Closed
chriscoyier opened this Issue · 13 comments

7 participants

@chriscoyier

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
Owner

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...?

Thanks!

@chriscoyier

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

@media (max-width: 860px) {
@scottjehl
Owner

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

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.

@stevelove

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.

@stevelove

@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

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

@stevelove

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

@monster

@stevelove - No worries. I appreciate your responses!

@payneio

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

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 ...

}
@andypearson

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...

@curtisj44

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 scottjehl closed this issue from a commit
scottjehl Respond now supports media-type-less queries, so there's no longer a …
…need to write @media screen and (..) { or even @media all and (..) { when @media  (..) { will do just fine. Fixes #53, which is long overdue.
a7ef2b1
@scottjehl scottjehl closed this in a7ef2b1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.