Blog

A quick tip for Internet Explorer styles using LESS

  • Words: Andy Clarke
  • Tagged with: css, less

For me this week is all about testing the responsive application templates I’m designing in legacy versions of Internet Explorer. Along the way I picked up a new LESS CSS trick (who just said “old dog?”)

If you know 320 and Up, you’ll recognise:

@import "reset.less";
@import "variables.less";
@import "mixins.less";
// etc.

//  Media Queries

@media print { @import "print"; }
@media only screen and (min-width: 480px) { @import "480.less"; }
@media only screen and (min-width: 600px) { @import "600.less"; }
@media only screen and (min-width: 768px) { @import "768.less"; }
// etc.

I write my CSS for the latest browsers first, then add override rules for Internet Explorer 7 and 8:

//  Internet Explorer
@import "ie.less";

All these imported LESS files compile into 320andup.css.

320 and Up uses Conditional Comments to apply classes to the HTML element. This enables us to target specific versions of Internet Explorer with override styles to repair unacceptable bugs.

At first I wrote:

.ie8 [role="banner"] {
// styles }

.ie8 [role="main"] {
// styles }

.ie8 [role="contentinfo"] {
// styles }

Then I remembered LESS allows us to nest selectors. This isn’t always advisable, but it’s perfectly suited to this situation:

.ie8 {

[role="banner"] {
// styles }

[role="main"] {
// styles }

[role="contentinfo"] {
// styles }

}

When I moved onto testing Internet Explorer 7 I started with a similar block of override styles for that browser (.ie7) but as Internet Explorer 7 and 8 need many of the same fixes, it made sense for them to share the same override styles.

.ie7 [role="banner"],
.ie8 [role="banner"] {
// styles }

.ie7 [role="main"],
.ie8 [role="main"] {
// styles }

.ie7 [role="contentinfo"],
.ie8 [role="contentinfo"] {
// styles }

This is very tedious to write manually across a long or complex stylesheet.

LESS makes it easy and efficient. Wrap two selectors around a block of shared styles:

.ie7,
.ie8 {

[role="banner"] {
// styles }

[role="main"] {
// styles }

[role="contentinfo"] {
// styles }

// etc.

}

This compiles to:

.ie7 [role="banner"],
.ie8 [role="banner"] {
// styles }

.ie7 [role="main"],
.ie8 [role="main"] {
// styles }

.ie7 [role="contentinfo"],
.ie8 [role="contentinfo"] {
// styles }

// etc.

I’ll include boilerplates like this for Internet Explorer classes in the next 320 and Up.


Contact us

x

Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Studio address

OpTIC, Ffordd William Morgan,
St. Asaph Business Park,
St. Asaph, Denbighshire, North Wales, LL17 0JD

(Here’s a map showing how to find our studio.)

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ