That title is a mouthful. It better get me more googleability on the Google. But seriously, I ran into the strangest problem yesterday while trying to put lipstick on yet another pig. If you haven’t heard of Respond.js then its time to roll out from under your rock. If you have heard of it, then you know its about the most awesome solution to supporting @media queries (min-width & max-width) on IE8.
Solution time, well there is an official solution, provided by the good folks at Respond.js. The problem I have with this solution is it is very convoluted and requires many steps to get working. I have outlined it below. After you read that, move on and read an alternate solution that I ended up implementing on my site. Each has it’s PROs and CONs. Decide which you like and go forth.
cross-domain/respond-proxy.htmlto your external domain
cross-domain/respond.proxy.gifto your origin domain
- Reference the file(s) via
<!-- Respond.js proxy on external server --> <link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" /> <!-- Respond.js redirect location on local server --> <link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" /> <!-- Respond.js proxy script on local server --> <script src="/path/to/respond.proxy.js"></script>
This worked for me on most sites exhibiting the CDN/X-Domain Respond.js issue. HOWEVER, it did not work when my website linked to CDN css and local CSS. The local CSS would cause a new Permission Denied error. I never did figure this out or find out if it was just me or a common problem. Because of this issue, and because the above steps seem overly complicated to me, I came up with…
So I figured, if I have to copy all these files, both foreign and domestic just to get this thing working with a CDN, I might as well just create one new file and conditionally include it for < IE9 browsers only. Simply search through all your CSS for @media and copy and paste every instance you find into a new CSS file. Include that CSS file conditionally BEFORE your Respond.js include. Victory. Too messy for you or wondering what pain that will bring for future updates? Simply delete your @media queries in every spot you find them and re-locate them entirely to the new file. Then include that new file when bundling your CSS together. That way you don’t have two copies of your @media css floating around, require duel updates and maintenance nightmares. Either way, the final solution looks something like this:
<!--[if lt IE 9]> <link type="text/css" rel="stylesheet" href="../css/my-media.css" /> <![endif]-->
That’s it. Now Respond.js can get your media queries only from your local server when it needs them. Even if your main css is on a CDN somewhere. Mind blown.