A quick one: (ab)using mediaqueries to not serve CSS to IE < 9

I am right now writing a post on how to use :target selectors for image galleries. As always, older IE are the fly in the ointment there as only IE9 supports the selector. So I thought about a way to serve the CSS only to the browsers in the know. The options were of course conditional comments, adding a selector IE < 9 doesn’t understand to every selector I want to filter out (like using
body:last-child article the same way we used html>body to filter out IE6) but then it came to me: media queries are only supported in IE9 and above. So you can simply do a:

.foo {
  // ... styles for ALL THE BROWSERS
}
@media screen and (min-width: 400px) {
  .foo {
    // ... styles for newer browsers
  }
}

A test of a 400 pixel wide browser window should be more than enough, right? Discuss on Google+

Tags: css, filtering, mediaqueries, oldie