Hi
Does IE8 have issues with media queries? Or is it me?
It’s ignoring the following:
@media screen and (min-width: 801px) {
#mob-poster img {
display: none;
}
}
@media screen and (max-width: 800px) {
#poster img{
display: none;
}
}
Both of these are working if I remove the media queries.
Thanks
Yes! IE8 and below do not support media queries on their own.
If you really need to support it, a polyfill is the best way to go. Here is a google search that might help you.
Thanks - I’m trying to use Respond https://github.com/scottjehl/Respond but nothing’s happening.
Could it be a doctype problem?
I’ve tried
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
and
<!DOCTYPE html>
but am not seeing any change with either.
Both doctypes are fine (well, it’s not the issue here)
The cold hard fact is that media queries are just not supported by IE8.
Here is a link that supposedly helps make IE8 work. It’s Javascript.
As said, there are no such things as media queries in IE8 or lower, because IE8 and lower don’t support ANY CSS3 properties. NO SUCH THING, so of course it not only doesn’t work, it won’t ever work.
Throwing javascript at it really isn’t the answer though – if your default layout can’t fit a desktop resolution screen; the only people for whom IE8 should matter, there’s something wrong with the layout or you are attempting to put ‘not viable for web deployment’ stuff on the page.
Which images swapping for any desktop screen bigger than 512px or so probably falls into the category of.
It also smells of broken methodology – rather than having two separate query states, you should have one for when media queries don’t work or aren’t needed (>800), and then undo things in the less frequently used queried sheet.
#mob-poster img {
display: none;
}
@media screen and (max-width: 800px) {
#mob-poster img {
display:block;
}
#poster img{
display: none;
}
}
Lose the first media query, override the large screen value in the query – Which is part of why I also tend to put media query values in their own stylesheet – so you’re not sending the extra code to desktop users who’ll never use it.
Again, media queries like so many other web technologies should be used to progressively enhance the page, so that should said tech be unavailable the page doesn’t fall apart.
… as it is I’d be wondering about those images; since you’re swapping them based on size are they actually content that belongs in a IMG tag?
I use Javascript to get IE “repsonsive”. It’s not hard.
Your css stylesheet starts off with a mobile-friendly base. Then you may either have other <link> elements with media queries, or @ media queries in the css file itself. IE can read the base styles fine.
Then I use Javascript inside a conditional comment for IE8 and under, where I just add the stuff that’s in the @ media query as another stylesheet to the <head>. Something like
<!--[if lt IE 9]>
<script>
var respond = document.createElement('link');
respond.rel = 'stylesheet';
respond.href = 'wide.css';
respond.media = 'screen';
var breedte = document.body.clientWidth;
if (breedte >=650) {
document.getElementsByTagName('head')[0].appendChild(respond);
}
</script>
<![endif]-->
This just means all IEs do another HTTP request for each media query. If you expect all your IE’s to be desktop then it’s a waste. IE users aren’t sitting there resizing their browsers on their desktops going WOO WOO WOO!
You would do something like this to hit Windows Phone. Otherwise, just have the wider css in a conditional comment in the head that simply loads the other stylesheet with no media queries. Or let IE people get the mobile styles 
The first media query is NO media query. Too many phones and things are crap and don’t understand media queries. That’s why you build mobile first. Worst that happens is IE gets a mobile style. Big whoop.
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu Sad that this is on slideshare only
Agreed, that’s what I was saying… but
I disagree with that because trying to design for mobile devices that pre-date media queries is pointless – they all garble it, mangle it, and often screw up pages ‘designed for narrow’ WORSE than they do designed for desktop; Blazer, IE6/7 Embedded and Opera mobile are all perfect examples of that – they handle made for desktop pages better than they do alleged “handheld” designs – they try to blow them up to a pretend 800px redesign or they strip out so much of your formatting and style it doesn’t matter. Blazer in particular given it’s tendency to take your markup, your FaC, and could care less about the rest. There’s so much inconsistency in how the older pre “iPhone-era” devices handle pages it’s pointless to even try making that your first target. I mean, you think desktop browser consistency is bad? Blazer, uZard, Bolt, Mango, the plethora of Netfront based train wrecks? Anything you try to design to send them is likely just going to get mangled beyond recognition anyways… to the point trying to ‘target them first’ is just a waste of time.
Building fluid for modern displays/UA’s, fixed width for IE6 and lower, with semantic markup and progressive enhancement usually covers the legacy bases more than well enough – and if it doesn’t on the handful of aging mobile devices… well… How many existing pages when those were in their hey-day actually worked properly WITHOUT any of this fancy trickery or media query stuff? Anyone who actually used those is probably used to every page on the Internet being broken in one manner or another.
Which of course is part of why Opera ruled so long in the mobile world, and why Droid and iOS are kicking serious tail.
Which means at five words per page I’ll close it as pointless feel-good crap before I get past page three, sounding like the old lady from the Wendy’s commercials…
It’s a big bug. Big fluffy bun… a very very big bun.
WHERE’S THE BEEF?!?
I’m assuming there’s a point in that somewhere? Infographics, slideshows, presentations – people actually sit though that nonsense? I mean seriously, that type of presentation sets my scammy sense tingling.
They are slides to what I assume is a talk. With a speaker it’s surely better.
However do go through them… at some point you’ll see Colly’s (simon collison) site shown on an iThing. Looking all nice. They show how (at the time, I’m sure he’s redone it by now) the site started with a “desktop” setup, then used @ media queries to remove things like widths and floats for a squish-down to “mobile”. And then they show all the other devices who don’t show all nice and tidy like an iThing: most of them zoom in in some fashion so the text is readable, meaning the site is cut off. Because their understanding of @ media queries is low to none.
I disagree with that because trying to design for mobile devices that pre-date media queries is pointless
Well, no. Media queries aren’t that new but lots of phones (that aren’t 5 years old) haven’t kept up. Esp if they are running a proprietary browser rather than the user-downloaded Opera or something. Blackberries, Nokias, Palms… the main point is, there are lots and lots of phones (and other devices) that have internet connectivity but aren’t iThings, or Androids. And then even when the browser is willing, the device has trouble telling the browser useful things like device-width in whatever it considers pixels.
Another point of not only those slides, but many others by the Yiibu company, are that we can’t go around assuming the latest iThing == mobile. Especially if you are building for worldwide visitors. The developing world tends to use mobiles for their internets and there may be no desktops involved at all. And these people use a lot of Nokias. China has a very popular browser, I still have no idea what it is based on engine-wise…
So if you’re bothering to consider “mobile” or “device-agnostic” (as opposed to just desktop, or desktop + iThing), then starting with “assume no media queries” (as well as “assume crappy expensive internet connection” and “assume limited CPU”, all things which may not be true) then you start light and easy and knowing that all your major desktop browsers (excepting IE) do media queries, add on your layout changes as needed.
I like that way of building, but it makes me think even more about resources: for who and when to I load (more) images? For who and when do I load Javascript? Or do I do a little bit of Javascript and wait for a ginormous screen to add the library? (again on the assumption that a large screen comes with a cord to interwebs, which may not be true.) The other slides by Yiibu explore these ideas too.
You might like the article by Stephanie about how the Obama Campaign website failed and why. http://stephanierieger.com/a-plea-for-progressive-enhancement/
mass effect much?