A quick tip for Internet Explorer styles using LESS

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.