Migrating to Flexbox by Cutting the Mustard

As front-end developers, the time has come to move away from using CSS floats and dive into the new and exciting world of flexbox. CSS floats are a dated approach to styling layouts; they have been available in Internet Explorer since version 4.0 and workarounds are required to make them malleable (including the clearfix hack and using the nth-child pseudo-class for wrapping columns).

The main topic of this article is how to implement flexbox across multiple browsers considering its fragmentation. If you want to become more familiar with flexbox, there are many good resources available, and I highly recommend the following:

• Are We Ready to Use Flexbox? by Nick Salloum on SitePoint
• A Complete Guide to Flexbox by Chris Coyier on CSS-Tricks
• Flexible box (“Flexbox”) layout in Internet Explorer 10 on MSDN (optional)

By the end of this article, you should be able to:

• Understand which versions of flexbox to target for a responsive website.
• Utilise flexbox via feature detection (cutting the mustard) and provide a fallback for legacy browsers.
• Move away from using IE conditional comments in most situations.
• Demonstrate a practical use for flexbox by creating a basic 2x2 grid with a legacy fallback.

A Brief History of Flexbox

The Flexible Box Layout Module (a.k.a. flexbox) is a new way of structuring layouts in CSS. It has undergone multiple revisions and has evolved significantly in its relatively short existence. At the time of writing flexbox is still a W3C working draft, but, like other standards, that shouldn’t make it unappealing in a production environment.

There are three iterations of the standard, commonly referred to as the old syntax, the tweener syntax and the new syntax.

The limitations of flexbox are well documented:

• The old syntax does not support flex-wrap.
• The tweener syntax is only supported in IE 10 (including mobile).
• The new syntax is not fully implemented in Firefox (22-27) as it is missing the flex-wrap and flex-flow properties.

Wrapping (flex-wrap) is an important feature of the specification, which is required to create a responsive grid. For this reason, it’s best to target only the tweener syntax and browser versions that fully implement the new syntax.

This leaves us with the following browser versions:

• Internet Explorer 10 (tweener syntax with the -ms- prefix)
• Internet Explorer 11 and Edge (new syntax)
• Firefox 28+ (new syntax)
• Chrome 21-28 (new syntax with the -webkit- prefix)
• Chrome 29+ (new syntax)
• Safari 6.1+ (new syntax with the -webkit- prefix)
• iOS Safari 7.0+ (new syntax with the -webkit- prefix)

As there are browsers with a significant market share that do not support flexbox, these should fallback to using CSS floats. But how can this be expressed in code? What’s the best way to differentiate between browser versions that should receive CSS with floats instead of flexbox? What strategy can be used to ensure versions of Firefox that support the new syntax but don’t support wrapping are identified as legacy?

Introducing: Cutting the mustard.

Cutting the mustard (feature detection)

If you haven’t heard it as a technical term before, “Cutting the mustard” was coined by the development team at BBC News. The term stemmed from the fact that the BBC website must cater to a vast international audience and targeting browser versions and devices specifically would have been a cumbersome solution.

The crux of the concept is identifying which browser/device/user agent is being used and serving polyfills to get the site to work. The existence of specific features is detected on the client side and therefore the most appropriate solution for the available technology is delivered.

Feature detection is not new. The aforementioned BBC article was published in March 2012 and while it has grown in popularity, it’s surprising to see websites still implementing IE-specific conditional classes as popularised by Paul Irish in 2008.

Continue reading %Migrating to Flexbox by Cutting the Mustard%

by Bashkim Isai via SitePoint