A LESS approach to "Mobile First" CSS & supporting older IE browsers

Update 10/01/12

Alexis has just tweeted with the release of LESS 1.2.0 which he says now supports the first example in this blogpost. This is excellent news. As of writing this update the LESS CSS compiler has not updated yet, but give it a few days.

 

Nicolas Gallagher has recently written a fantastic post about using SASS to aid you in giving legacy IE browsers a 'desktop' design whilst alse have a 'mobile first' approach in your stylesheets. 

I don't like SASS, I prefer LESS. SASS to me is full of mirth.

I set about creating myself a little framework of default files a while back that would use the LESS.app to compile my CSS before it's uploaded to the server.

(note: before we go any further, these following examples were tested using the latest version of the LESS.app)

Purely Fictional...

This is how I'd want it to work. It currently doesn't but hopefully will be sorted out soon...

I prefer the seperate stylesheets for seperate media queries approach and with LESS you can compile all of these into one CSS file for you site. This way you have a nice working enviroment with defined LESS files for defined breakpoints.

Although every project is different this would be my default list of LESS files -

I also have a LESS file which I call styles.LESS which looks like this -

/* styles.css */

@import "default";
@media (min-width:320px) { 
  @import "320"; 
}
@media (min-width:480px) { 
  @import "480"; 
}
@media (min-width:768px) { 
  @import "768"; 
}
@media (min-width:960px) { 
  @import "960"; 
}
@media (min-width:1200px) {
  @import "1200"; 
}

What this does is pretty simple, using the LESS.app it takes the .LESS files in the list and compiles them into this CSS syntax in a file called styles.css - 

@media (min-width:320px) { }
@media (min-width:480px) { }
@media (min-width:768px) { }
@media (min-width:960px) { }
@media (min-width:1200px) { }

Now if you're wanting to give older browsers (Internet Explorer 6/7/8) a single stylesheet that would give the 'desktop' design like Nicolas' post describes then you would have another LESS file called ie.LESS which would look like this -

/* ie.css */
@import "default";
@import "320";
@import "480";
@import "768";
@import "960";

This again is pretty simple. Using the LESS.app it would put all of your sites styles in file called ie.css in the order of 'little to large' so that it would cascade to show your legacy browser that 'desktop' design.

As Nicolas points out at the bottom of his post, to include this into your HTML so that legacy IE browsers would use the ie.css you would put this in the <HEAD> of your markup - 

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

So, what now?

Althought that currently does not work with LESS there are a couple of ways to get it to work. 

If we keep the original style.LESS as this 

/* styles.css */

@import "default";
@media (min-width:320px) { 
  @import "320"; 
}
@media (min-width:480px) { 
  @import "480"; 
}
@media (min-width:768px) { 
  @import "768"; 
}
@media (min-width:960px) { 
  @import "960"; 
}
@media (min-width:1200px) { 
  @import "1200"; 
}

in the individual corresponding LESS file you would have for example this -

@media (min-width:320px) { 
/* styles goes here */
}

Then when you save out your styles.LESS to CSS it will included all the CSS3 Media Queries with the styles within.  

That's Nasty!

Yep, that's ok unless you wanted to save out a ie.css file too. Using the same approach of @import-ing the .LESS files and compiling them into a single ie.CSS file you would still get -

@media (min-width:320px) { 
/* styles goes here */
}

That'd make your ie.CSS file pretty disgusting to look at and read through for yourself let alone anyone else looking at your code.

Well, What then?

There is a solution (of sorts) that would give you a styles.CSS file including all your CSS3 media queries and another stylesheet with the code in a cascading order without the media query syntax. It's a little bit more complex but once it's setup it can work in every site you create from then on.

First in your .LESS files that are specific to a break point in your responsive design, for example 768.LESS, include this code -

.max-width-768() {
/* style goes here */
}

Once you have populated your .LESS files with such code (for example files for 320, 480, 768, 960 and 1200 break points). You would then need to have your styles.LESS file looking like this -

/* styles.css */

@import "320.less";
@media (max-width: 320px) {
.max-width-320();
}
@import "480.less";
@media (max-width: 480px) {
.max-width-480();
}
@import "768.less";
@media (max-width: 768px) {
.max-width-768();
}
@import "960.less";
@media (max-width: 960px) {
.max-width-960();
}
@import "1200.less";
@media (max-width: 1200px) {
.max-width-1200();
}

Now you've done that you would want to create your single stylesheet for Internet Explorer. This is done as in the fictional bit of code at the top of the post. Like this -

/* ie.css */
@import "default";
@import "320";
@import "480";
@import "768";
@import "960";

You'd then add this bit of code to so that it is picked up by older versions of Internet Explorer - 

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

There we have it. A workable way of making  "Mobile First" CSS & supporting older IE browsers using LESS.