Friday, 13 September 2013

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

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

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?

No comments:

Post a Comment