- Posted in:
- Web development
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.
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!