Thanks for the replies everyone, as always, I really appreciate your help! Sorry in advance for the following rambling e-mail. For those of you that actually make it to the end, I hope I made it worth your time. :)
On Wed, May 22, 2013 at 1:07 PM, David Laakso <laakso.davi...@gmail.com> wrote: > IE 6/7/8 do not support media queries. See scripting work-around here: > <http://12412.org/2012/01/media-queries-ie/> Thanks for link! <soapbox> Honestly, I think respond.js is great for smaller sites/projects/demo pages, but I've gone crazy trying to maintain respond.js on a larger site ... It's especially annoying if your CSS lives one multiple asset servers (I've come to the conclusion that the overhead for the CDN/X-Domain setup is not worth the hassle). Additionally, the current GitHub maintainer (Scott) doesn't appear to take care of updates to improve the code and/or pull requests. <https://github.com/scottjehl/Respond/pulls> 24 open pull requests! Some dating as far back as 2 years ago! <https://github.com/scottjehl/Respond/issues> 84 open issues! Again, going back as far as 2 years. Nothing against Scott, but when I see a repository flounder like respond.js, I take a step back and think to myself "what are my alternatives". If I had a repo that was as popular as his is, I'd probably be more on top of managing pull requests and sorting out issues. Additionally, due to the number of people using that code (4,230 stars), I'd probably recruit some maintainers ... Of course, anyone can fork the code and do what they please, but there's nothing better than having a community of people improving one version/branch of code (like most of the other popular, and well maintained, GitHub repos) vs. many forks that each have their own set of improvements. Not only that, going back to what I said before, IMHO, respond.js (and the other MQ polyfills) can be a huge pain in arse for larger sites (at least it has been for me). :) </soapbox> When you say "IE 6/7/8 do not support media queries", I understand this limitation. The reason why I asked is because, when using @media all { ... } and @media screen { ... }, unless I'm mistaken, IE 6-8 appear to load ALL styles (even the styles within the "argumentless" MQ blocks). To clarify, when testing the below two demo pages, IE 6-8 show me "desktop" styles and the cascade from ALL media queries: <http://jsbin.com/alugiv/1> <http://jsbin.com/alugiv/2> ------------ For those wanting to see a version of my code that actually "responds" (in a normal browser) see here: <http://jsbin.com/alugiv/4> When I load the above demo #4 in IE < 9, then I just get "mobile" styles, as one would expect. ------------ To summarize, and not to sound like a broken record, I'm just wanting to know why IE 6 - 8 appear to "ignore" (maybe "read" is a better term) "argumentless" @media all { ... } and @media screen { ... } and load ALL styles. Maybe my simple test page is fooling me? Maybe I need to make my test case more complex? That's why I'm here ... Just figured someone would be able to confirm, or deny, that what I'm seeing is actually true. I could create a more complex test page to see if I'm missing something obvious, but I thought I'd ask here before I head down that path. On Wed, May 22, 2013 at 1:18 PM, David Hucklesby <huckle...@gmail.com> wrote: > IE 8 does not process media queries, but does process the at-rules that you > have in your examples. Your media queries are commented out. Sorry, I probably should have totally remove my comments... If you look directly below my comments, you'll see: @media all { ... } ... or: @media screen { ... } The commented out MQs are from my original test code, which can be found here: <http://jsbin.com/alugiv/4> > So - how did you test? I tested using my subscription to http://www.browserstack.com. > On a screen, I'd expect both sets of CSS to apply. > When > printing, I'd only expect the "@media all" rules to apply. Did you find > something different on printing? Correct. The "screen" styles worked on screen and not print, and the "all" styles worked for both. (Warning: The following contains CAP words for emphasis ... I'm not yelling at my computer.) :) What I want to know is WHY does IE 6-8 load all styles? Unless my test page is fooling me (like I said above) what I'm seeing is proof that older IEs don't mind argumentless media queries, no (see very bottom of this e-mail for an exception in IE8)? AND, if this is the case, why does this happen? Are there docs that could officially explain this behavior for when it comes to old IEs? It's just that I've just read EVERYWHERE that older IEs don't support MQs (with few exceptions). Based on my first two example pages, old IEs are ignoring the MQs yet the styles within are applying themselves to the page. Honestly, I don't mind if their aren't official docs that explain what I'm seeing ... I'll take the collective opinions from CSS-d to be equal to that of any sort of official documentation. > On printing your second test page, it identifies as "Mobile" in IE 7 and 8 > in > my testing, showing the "screen" rules are ignored. That sounds right to me. Sorry that I was not clear what my test pages were for. It's not that I'm trying to get printing to work (though, that's part of my future goal(s)), I just wanted to setup two types of test pages with media queries that: 1) use "screen" and 2) use "all". My thinking is that "screen" and "all" are pretty common, so I just wanted to see if they both behaved the same when it came to older IEs. Note: See bottom of this e-mail for why I'm using "all" and "screen" vs. just saying "@media { ... }". Down the road, I'd like to use "all" for the sake of print, so that's another reason why I'm testing both "print" and "screen" ... Unfortunately, my original question wasn't clear about this. Sorry. :( > P.S. You surround your CSS with HTML comments. That was only needed for the > very first browsers. I don't think anyone now uses browsers so old they > display > the CSS on the screen. :-) Oh, I did not know that about older browsers. Learn something new every day! Actually, on my first two test pages, there's the real media query statements directly below the commented-out ones. Like I said before, I probably should have deleted those commented lines for clarity's sake. Sorry about that as well. :) On Wed, May 22, 2013 at 1:19 PM, Tom Livingston <tom...@gmail.com> wrote: > What I do is to repeat my styles, without MQs, inside a conditional > for old IE. This allows the cascade to render a desktop-only layout > for old IE. A bit low-fi maybe, but works well for me and have had no > issues other than the usual fixes needed for old IE regardless of MQs. Unless I'm not understanding, that seems logical to me, especially if you're media queries are easy to divide? For me, I like to use "modules" which makes it a bit harder to divide mobile/tablet/desktop styles into easy to manage groups of CSS files. :D I'll have to explore my options though. :) ------------ WITH ALL THAT SAID ... I think it's important to note that, based on my tests, IE8 does not load any styles within a media query block when the given media query is: @media { ... } Demo page: <http://jsbin.com/alugiv/5> ... but, from what I can tell, IE 6 and IE 7 DO load all CSS styles! Isn't it interesting how adding "screen" or "all" makes old old IEs behave the same way. ------------ Ok, I'm done rambling. I hope I'm not sounding like a crazy man here. :D Cheers, M ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
