Handling Browser Variants - Building Advanced Responsive Modules With Flexbox - Responsive Web Design, Part 1 (2015)

Responsive Web Design, Part 1 (2015)

Building Advanced Responsive Modules With Flexbox

Handling Browser Variants

Near the start of this chapter, I mentioned that flexbox has great browser support. It’s just that different browsers support different versions. Before flexbox became a candidate recommendation in 2012, its syntax went through a lot of changes, so the properties and values changed names a couple of times. Fortunately, most of the behavior stayed the same, so for the most part you can feed the different property and value names without a problem.

If you want to, of course. Here are the approaches you could choose to take:

Use only the non-prefixed, current, standard syntax. This is the purest approach, but browser-prefixed properties are perfectly fine to use, provided you do so before the non-prefixed properties. I don’t recommend this approach.

Use the non-prefixed and browser-prefixed versions of the standard syntax. This is a safe approach, and it’s what you’ll need to do if you want to add Safari support on both desktop and iOS, which I’m guessing you do.

Use the above plus the -ms- prefixed 2011/2012 syntax. This will get you support in IE 10, so this is a pretty good idea.

Use the above plus the -webkit- prefixed 2009 syntax. This gives you older versions of Safari and the Android browser. However, it’s a lot slower to render than the current flexbox syntax.14 Plus, the browsers it benefits no longer have much market share. Your audience may vary, of course, so the choice is up to you. But, personally, I don’t tend to add this syntax.

Current syntax, no prefixes

Current syntax but browser prefixed

2011/2012 syntax

2009 syntax

Chrome 29+
Firefox 22+*
IE 11+
IE Mobile 11+
Opera 17+
Opera Mobile 12.1+
Opera Mini 8+
Android 4.4+

Safari 6.1+
iOS Safari 7.1+
Blackberry 10+

IE 10
IE Mobile 10

Safari 3.1-6
iOS Safari 3.2-6.1
Android 2.1-4.3

*Firefox 22–27 did not support the flex-wrap and flex-flow properties.

It can be hard to keep track of which properties from which syntaxes correspond, and adding the various browser variants can be messy and time-consuming. If you can avoid doing it manually, you’ll save yourself a lot of confusion and errors. There are lots of Sass and LESS flexbox mixins that can create all the variants for you, or you can customize them to add just the variants you want.

If you’re using Sass, check out https://github.com/mastastealth/sass-flex-mixin15, https://gist.github.com/cimmanon/446147016, or https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss17. If you’re using LESS, check out https://github.com/annebosman/FlexboxLess18.

Another tool you can use to add prefixes is the Autoprefixer library that, naturally, adds browser prefixes, including various flexbox versions. It uses the Can I Use database to determine which prefixes are needed, and can be customized to target specific browsers. Autoprefixer can be used in a wide variety of development environments; go to https://github.com/postcss/autoprefixer#usage19 to learn how to use it in conjunction with your tool of choice.

A potential downside to using Autoprefixer for flexbox is that you can’t prevent it from adding just the 2009 syntax, for instance. If you make it exclude the browsers that use the 2009 syntax, it will exclude them from all prefixed CSS properties, not just flexbox properties. To work around this, you could write a PostCSS plugin to remove the 2009 properties after Autoprefixer does its work; see https://github.com/postcss/postcss20.

The bottom line is this: go ahead and use whichever variants you want, or none of them. Throughout this chapter, I’ve shown you only the non-prefixed properties, but this was just to keep the CSS I showed you from being super long and hard to read and understand. That doesn’t mean I’m saying you shouldn’t use any prefixed versions in the real world. Just as you need to decide whether flexbox is appropriate for the layout task you want to complete, you need to decide which browser variants you’re going to use for each individual project.