LessCSS, Import and Media Queries

Today I found out the Media Queries are not supported at all in IE8. Not sure how I missed this, only that I haven’t used media queries extensively in any project until now. I have just finished off a site that has an adaptive layout for table and mobile. Having completed the majority of development in Chrome and I yesterday moved on to the dreaded cross-browser testing.

To my surprise when I open it up in IE9 there was appeared to be no serious issues. A pleasant surprise, the text lacked text-shadow in a few places, but this is an aesthetic issue not a downright broken issue so I can live with it. Feeling bolder I moved on to IE8 and was very disappointed when the site was a wreck, not slightly broken but very broken.

This was a bit unexpected as I tend to develop using well known patterns which only occasionally need tweaking. Something else must have been the issue. Following a brief conversation with a dev friend he pointed out that IE8 doesn’t support media queries. All of my layout and navigation was defined in media query, hence the massive fail.

The solution was a straight foward approach:

  1. Copy the CSS out of the media query into a separate file
  2. Conditionally include it in the header for IE8 (and below)

This approach does however pose a maintenance overhead, if I make changes to the desktop CSS this needs to be carried through to the external file. Ideally I want to be able to maintain one file which is referenced in the main file. The media query spec does not allow you to use a CSS import inside it, so this approach is not available.

Fortunately I use a CSS pre-processor to create my CSS, I use {less}, less allows you to use multiple files and import them into a single output file. My approach was to simply copy the less into an external file and use the @import syntax in the main file. I could then reference the compiled external file in a conditional comment.

@media only screen and (min-width: 769px) {
  @import "desktop";
}

This did not work unfortunately, the less parser currently does not understand this construct and the import is ignored. It is a well known issue and has been discussed for some time. It is fixed for now in the master branch and is scheduled for the 1.4 release but isn’t out yet. Instead I have used the following work around.

Wrap the code required in a mixin in an external file (desktop.less) i.e.

.desktop() {
  less code...
}

Then import the code outside of the media query and call the mixin inside the media query (main.less) i.e.

@import "desktop";
@media only screen and (min-width: 769px) {
  .desktop();
}

Finally I created an extra file which includes the code outside of the media query which can be compiled and conditionally added (ie.less) i.e.

@import "desktop";
.desktop();

One file to maintain, compiled into the main CSS file, and and another CSS file for conditional inclusion. When 1.4 is released my first approach will be available and you won’t need the extra file, until then this is a good work arund.

One Reply to “LessCSS, Import and Media Queries”

Leave a Reply

Your email address will not be published. Required fields are marked *