Webdesign, chapter seven: CSS media query part 2

Ever since i wrote the last blog entry I’ve been wondering how we can have a layout for internet explorer (who to this day doesn’t get media queries) than for the browsers who understand media queries.

Now we have made a beautiful layout that changes from a standard 2 column layout to a 1 column layout depending on how wide the browser window is, and there’s no way to tell internet explorer what to do without the risk of screwing it all up…. well obviously there is. Actually there are a few ways, but i didn’t really like any of them, so eventually I came up with my own.

So for that we just take advantage of the fact that IE doesn’t get the media queries.

We just include the basic CSS file first like so:
<link rel=stylesheet href=”include/body.css” type=”text/css”>
<link rel=stylesheet href=”include/print.css” type=”text/css” media=”print”>
and then ! below the basic CSS file (so that it’s closer to the content, and therefore overwrites the basic CSS if neeeded:
<script>
@import url(‘include/queries.css’) screen and (min-width: 1px);
</script>

Now we have a basic style for our website in case the browser doesn’t get media queries yet, and we can have a nice layout for everyone who uses a decent browser (whole thing visible on my homepage).

Leave a Reply