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