0 Comments

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.

 

 

ie8-css-import

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.

http://msdn.microsoft.com/en-us/library/ie/ms530768%28v=vs.85%29.aspx

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