How to solve Foundation’s IE legacy problem

Tags: , , , , &

How-to-solve-Foundation-IE-legacy-problem-solution-post-by-Zing-Design

Foundation doesn’t support legacy versions of Internet Explorer.

Now this is a bit of a problem, and it just might be the clincher when it comes to choosing a framework. Zurb have rationalised their decision by arguing that users of IE6-7 get the mobile version and that IE8’s market share is falling so rapidly that it no longer requires support. They do provide a grid for IE 8 and below, but the default Foundation package contains no legacy fixes.

Solution: Fix the IE bugs!

I’m afraid there’s no magic fix for this problem, but my point is that a framework’s lack of support shouldn’t put you off using it. If you do have a lot of users still visiting your site on IE, you should at least try to make it look presentable. To solve IE bugs, it’s best to start with what will be causing the majority of the issues: media queries. In modern standards-based browsers, our grid rows and columns will be most likely applied inside media queries (following the mobile-first approach). If we’re sticking to best practices, our presentation will be abstracted with Compass, instead of sprawled sporadically across our mark-up as a myriad of mix-and-match classes.

Let’s get fixing… First, we’ll add the aforementioned IE grid into our app.scss, if you’ve put all the grid classes in your markup, this should actually fix a lot of our layout issues immediately… But not if you’re using mix-ins! In a cruel twist of irony, best practice comes back to bite us in the ass. By using mix-ins to keep our HTML clean, we now face the problem of having to manually add the grid and visibility rules to the affected elements.

If this is the case, you will probably have to write an _ie.scss like this:

 // Foundation's IE-friendly grid gets pasted in here...
.lt-ie9 .large-4,
.lt-ie9 .row .large-4 { width: 33.33333%; }
// ... etc ...

// Visibility fixers
.ie-hide {
  display: none !important;   // !important hack :(
}

.ie-show {
  display: block !important;
}

.ie-show-ib {
  display: inline-block !important;
}

.lt-ie9 {
  header {
    //Mobile visibility fixes...
    &#mobile-header {
      @extend .ie-hide;
    }
    &#desktop-header {
      @extend .ie-show;
    }
  }
  //Add grid column with specificity
  .gallery-view section > div > ul > li {
    @extend .large-4;
  }
}

Yeah I know, it looks a little bit hacky… but it’s for IE, so… meh. Hook things up to the IE grid and your layout should look remarkably better in no time, it won’t take much effort and your HTML will remain tidy.

Other IE issues are just the usual snarks and grumpkins; floating problems, inline-block elements misbehaving and all the sweet CSS3 effects not working. This is where our good friend Compass comes in to save the day. Compass has a fix for just about every cross-browser issue there is. So we’ll use Compass mix-ins rather than the old-fashioned CSS wherever you have floats, inline-block, gradients, opacity, etc…

If you are determined for IE users to have a consistent experience, Compass even comes with PIE, to add on some of that CSS3 polish that those poor IE users didn’t even know they were missing!

In case you’re worried about JavaScript, Foundation falls back to jQuery on browsers which don’t support Zepto.

Some other little problems with Foundation

  • The extra functionality in Foundation comes at a cost to flexibility and maintainability. This is a similar problem to Bootstrap. There are a few bugbears for discerning developers like the data-attributes, !important CSS hacks (which you should never use ;)), and plugins requiring copious classes to be added to the mark-up.
  • Like Bootstrap, there is still the danger of creating a bland, generic looking website, though I think Foundation is much easier to customise after setting up, so this isn’t as much of a problem. Just like anything else, exciting and original design is just going to require a bit more elbow-grease.
  • Out of the box, Bootstrap development is still a bit faster. In my experience, Bootstrap makes for a smoother process thanks to it’s IE7-8 support.

Coming up next…

We’ll look at the main features that designers and developers look for in a framework, as well as a line-up of these key features which set Foundation and Bootstrap apart. Just in case you needed more convincing to move to Foundation!

People who have viewed this post also viewed

Comments

  1. Alicia

    Hi!
    When I test the downloaded Foundation layout on IE 10, it displays a black blank webpage.
    Will this piece of code fix this issue?…I am wondering. Thank you!

    Reply
    1. Sam Post author

      I’m afraid this code won’t fix any issues in IE10, it’s really just an example of how to add backwards compatibility for legacy IE browsers without using JavaScript. If this isn’t working for you, I’d recommend using respond.js. Respond.js is a polyfill for legacy browsers which don’t support media queries.

      Regarding fixing rendering bugs in IE10, in my experience they’re normally the result of configuration issues. I’d recommend Googling around, there’s bound to be other users with a similar issue!

      Reply

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text