Getting Foundation and IE8 to Play Nice

wrote this on in . 157 reactions

People who take our Foundation training course aren’t the only ones who come away with more knowledge than they started. Our students sometimes share their ideas with us — and we want to share one with you today.

As you might know, Foundation 4 doesn’t support Internet Explorer 8. With IE8 slipping in usage, we thought it was the right time to let it go. But one person couldn’t. Too much of site’s traffic used IE8 to just let go. After taking our Foundation class, he came up with a jury-rig that combines Foundation 4 with IE8-friendly Foundation 3.

The setup

The first step involves setting telling IE which version of Foundation to choose —3 or 4 — based on Explorer’s own version. Below is what he came up with, which looks fairly solid.

In the HTML head:

And after the close body tag:

The conditionals determine which version of Foundation IE loads. IE8 and older will grab Foundation 3 code. Others, Foundation 4.

The grid

The syntax for Foundation 4’s grid, which accounts for mobile and widescreen devices, uses two prefixes: small-# and large-#. Foundation 3, though, uses spelled out English words: one, six, twelve etc. That means the two systems can intermingle without interfering:

Having to manage three sets of grids isn’t ideal, but if you use Foundation 4 and need to support older browsers, this unofficial workaround may do the trick.

17 Web Design Trends That Will Take Over 2017
Container queries 2
Foundation & CSS Grid: Think Beyond the Page
Building blocks graphic
Foundation Building Blocks: Over 100 Components to Jump Start Your Projects