10up Open Sources IE 8 and 9 Support for Flexbox

Frontend developers working with Flexbox no longer have to sacrifice support for older versions of IE. The folks at 10up have open sourced Flexibility, a polyfill that uses JavaScript to allow Flexbox to work with IE versions 8 and 9.


“Unfortunately, Flexbox support wasn’t added to Internet Explorer until version 10, leaving older versions – still popular in some corners – out of the Flexbox revolution,” said Taylor Lovett, 10up’s Director of Web Engineering. “This idea didn’t sit well with 10up’er Jonathan Neal, tasked with engineering a beautiful layout for a Fortune 50 forced to contend with supporting older versions. We decided to subsidize his time to see if we could introduce Flexbox support under less-than-ideal browser requirements.”

CSS Tricks has a comprehensive guide to to Flexbox, a layout it recommends as more appropriate for components of an application or smaller-scale sites, (as an alternative to the Grid for large-scale layouts).

The idea behind Flexbox, according to the w3.org docs, is to provide a flexible container that expands or shrinks based on available layout space:

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Flexbox is ideal for creating layouts that work with various screen sizes and devices, especially in cases where the layout’s container size is unknown or dynamic. Flexibility extends this to IE 8 and 9 by tapping into the browser’s currentStyle and runtimeStyle proprietary features to manipulate and overwrite style declarations.

Once you include flexibility.js somewhere within your project, it will automatically detect Flexbox elements and write new styles to make them work with IE 8 and 9. Flexibility is licensed under the GPL v2 (or later). Check out the repo on GitHub to get more details on how to use it and how it works.


15 responses to “10up Open Sources IE 8 and 9 Support for Flexbox”

  1. I can’t quite express how exciting this is. Not only does it make the flex module something we can use in a much more extensive way without building in clunky fallbacks, but (like with RICG images) it shows that the WordPress community can be at the forefront of the battle to push modern web standards forward.

    The web community as a whole owes the 10up team a huge debt of gratitude for making this tool available to us all and paving the cowpaths for widespread use of the Flexible Box Layout Module.

    • This is not about prolonging support for IE8 and IE9, but about providing a great user experience for those still stuck using older browsers while still implementing new technologies. Unlike other advancements like media queries, responsive images, and so on, flexbox has not had a proper polyfill that allowed us to use it in production. Now we have it thanks to 10up, and as far as I’m concerned, Flexbox is now ready for production.

    • Health care is *notorious* for needing IE 8/9 support. Part of this has to do with government tech that actually supports IE8/9 exclusively and part of it has to do with specialty computers built for providers that run complex medical software that only runs on XP/Vista.

      • I understand the problems within specific industry/gov sectors. But the real downside are insecure systems open to, what we routinely witness, intrusions and data theft.

        I suspect that organizations that are allowed to continue bad practices, supported by those willing to write code that extends the legacy even further down the road, will gladly continue to open not just themselves but others to that theft.

        It’s a pay me now or pay me later issue in my mind.

        But again, that’s just my opinion. It doesn’t diminish my respect for 10up, whom I think are an awesome OSS group, and all around good folk.

      • Agreed, I am currently developing for the “heath-care” sector and IE8/9 users on our platform are 9%. Compare that with the global 1% and you’d know why this polyfill is a boon to developers like me.

        It’s not about the client, but about making websites which look beautiful accessible in all their glory to these set of users too.

  2. I tested this with my own tests and the demos provided in the package on browserstack and it just does not work.

    IE11 is the only version that got any results, so still no love for flexbox. I was supper excited about this, too.

  3. This is a really awesome thing that 10Up did for the community. As it is said, this doesn’t only have to do with WordPress itself, but legacy compatibility as a while. I just had a site where I spent about 10 hours doing back-compatibility for IE8 becasue flexbox doesn’t work on it; creating fallbacks using Modernizr. If this was open sourced a few weeks ago I would have been so much happier. Great work 10Up!


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.