Mobile first approach using LESS and nested media queries - looking for an IE10 alternative to conditional comments

Question

I'm using this great feature in LESS called nested media queries that allows me to keep styles related to each "module" in one place. My media queries are defined in a variables file as follows:

// Breakpoints
@breakpoint-medium: "600px";
....

// Queries
@mq-medium-and-up:  ~"only screen and (min-width: @{breakpoint-medium})";
....

I can then use the media queries throughout my stylesheets in the following way:

.module {
  background: green;
  @media @mq-medium-and-up {
    background: yellow;
  }
}

I take a mobile first approach to my CSS where I work my way up from small screens (no media queries) to larger and larger breakpoints (using media queries). Obviously media queries aren't supported in IE <= 8, so I would like those browsers to fallback to having the "desktop styling".

In order to do so, I currently keep a separate less file (IE.less) where I redefine the media queries as follows:

@mq-medium-and-up:  ~"all";
@mq-large-and-up: ~"all";

which results in a media rule that older versions of IE will understand

@media all ...

So far all is good. I now have a separate IE stylesheet containing the "desktop" styles. The problematic part of this is when it comes to how I should include these two separate stylesheets in order to prevent older IE versions from requesting both stylesheets (which are basically the same).

Currently I do it like this:

<link rel="stylesheet" href="site.css" />
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->

Would it be possible to prevent IE < 9 to download the site.css, but still make it visible to other browsers? My initial thought was to wrap the site.css file in another conditional comment using the NOT opeartor, but since IE10 has dropped the support for conditional comments I guess that is out of the question.

Any ideas?

Answer 1

Ok, so here's what I ended up with:

<!--[if (lte IE 8) & (!IEMobile)]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->
<!--[if (IE 9)|(!IE)]><!-->
<link rel="stylesheet" href="site.css" />
<!--<![endif]-->

The ie.css is targeted at older versions of Internet Explorer (<= IE8). The site.css is targeted at IE9 (which understands media queries), non-ie browsers, and browsers that don't support conditional comments - such as IE10. The "|(!IE)" part is actually not needed, but included for extra clarity. It might throw off one or another version of IEMobile - it would need some testing. Notice the slight variation in the second conditional comment, compared to the first one. This is the part that makes the content inside of it visible to non-ie browsers.

Further explanation of this type of cc can be found here: http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment