CSS media queries are common these days. So I googled an example which I could modify to my needs for a nice cross browser, cross device compatible web application. I came up with:

@import url("/css/desktop.css") only screen;

/* Smartphones (portrait and landscape) ----------- */
@import url("/css/smartphone.css") only screen and (min-device-width : 320px) and (max-device-width : 480px);

/* Smartphones (landscape) ----------- */
@import url("/css/smartphone-landscape.css") only screen and (min-width : 321px) and (max-width : 800px);

/* Smartphones (portrait) ----------- */
@import url("/css/smartphone-portrait.css") only screen and (max-width : 320px);

/* iPads (portrait and landscape) ----------- */
@import url("/css/ipad.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px);

/* iPads (landscape) ----------- */
@import url("/css/ipad-landscape.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape);

/* iPads (portrait) ----------- */
@import url("/css/ipad-portrait.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait);

/* iPhone 4 ----------- */
@import url("/css/iphone4.css") only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5);

This looks great, but… it didn’t work in IE8. I have spend a long time searching the web, why it didn’t work. I added a

body { margin-top: 0px; }

as was suggested in this StackOverflow thread. But that didn’t work either.




I verified that the css was linked correctly. I was loaded, only the import wasn’t. There was also a resource online which said that the CSS imports should be first in the document for Internet explorer. But that also did not matter.

After browsing for a while, I stumbled upon an MSDN page.


and there it was. –evan— pointed out that according to the w3 organization.

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI.

source: http://www.w3.org/TR/CSS2/cascade.html#at-import

So this is in CSS 2 which became a recommendation in 1998. it was started in 1997 and Internet explorer 8 was released on 19 March 2009. That is over 10 years later!

So removing the ‘only screen’ from the CSS I posted earlier fixed it!

Thank god for standards!

Post on LinkedIn