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.

flexibility

“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

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.

      • As of 26th August according to CanIUse.com, ~1% of users globally use either IE8 or IE9.

        I know of institutions and research-heavy rules dictating use of IE only on low-end computers. No third party browser installs, ironically, stating security reasons and low-end computers due to unavailability of funds for hardware upgrades.

        Plus not to forget some domain specific communities, e.g. research graduates who have access to outdated desktops only.

  2. 10up has done great things in the WordPress space, but I scratch my head at the idea of building anything that supports archaic and often insecure browsers like IE8 and 9. Gotta cut the chord at some point.

    • Tell that to the users of the sites I build who won’t upgrade. Choices are:
      1. Support IE8 and IE9
      2. Ruin their experience and impact my clients’ bottom line.

      Pretty easy choice there.

      • What I would tell them is that running sites you build on unsupported and insecure operating systems, on unsupported and insecure browsers, is not only bad for them but for everyone who is exposed to them.

        Not trying to start a contest here. Each of us have to determine what standards we apply and where we are willing to draw the line. Our choice is not support them. If we lose a client because they are unwilling to upgrade, then that’s a cost I am willing to accept.

        To each his own.

    • 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.

  3. This is very cool.

    It also has absolutely nothing to do with WordPress, which I think is even cooler. It’s nice to see the WordPress community positively affecting things outside of the narrow confines of WordPress itself.

  4. 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.

  5. 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!

Newsletter

Subscribe Via Email

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

%d bloggers like this: