flexbox fallback to display table in older browsers

Question

Is there a better way than below to ensure that I only target browsers that don't support flexbox. I think this could work, but maybe I'll need some styles only for ie8 and 9 for example that might affect modern browsers too. Would it be best to create a separate stylesheet altogether?

.flex{
  display:table;
  display:flex;

  .column{
    display:table-cell;
    display: inline-block;
  }
}

Thanks!

Halbert

All modern browsers support flexbox, except IE < 10 (source). If you want fallback HTML for IE8 and 9, try IE conditional comments. – Gyrostabilizer

Answer 1

The long answer is complicated. The good thing is that IE10 and most older browsers in use today, support flexbox. But an old syntax with a quite different spec and behavior. See flexbox support table. I also suggest you have a look and/or use this tool with the Generate legacy flexbox styles checkbox enabled to get an idea of what's involved. It will give you a fairly cross compatible CSS syntax to use.

If you care about cross-compatiblity with older browsers as you should*, display:flex; alone is not recommended. You need to add those old flexbox prefixes. As for IE8 and 9, you can use a table fallback indeed targeting IE8 desktop browsers if you must. Which comes to the following rule set:

.flex-container {
  display: table;        /* IE < 10, Opera *Presto* Desktop (Now dead) */
  display: -webkit-box;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
  display: -moz-box;     /* Firefox 2 - 27 (2009 Spec), UCMini Android */
  display: -ms-flexbox;  /* IE10 (2012 Syntax) */
  display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
  display: flex;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
}

Noting that the main feature differences between new and old flexbox spec and support is the lack of flex-wrap. So besides the many ["flexbugs"] (https://github.com/philipwalton/flexbugs) and differences to watch for. Keep in mind that you cannot use flex-wrap if you want extensive backward compatibility beyond 2012 browsers or IE9.

*It's also worth noting that if your target users are in Asia or Africa, you will definitely need the -webkit-box model for the UCBrowser for Android, which currently still doesn't support the new syntax. (As of 2016, UCBrowser has over 10% of mobile browser usage worldwide and 25% in Asia). -moz-box is arguably also needed for UCMini which is based on older Firefox (usage data and whereabouts is publicly unknown however).

For the flex items table-cell or table-row fallbacks. It gets tricky, especially with flexbox nesting.

However, there are 3 options available:

1) Use feature detection with a script like Modernizr. And use the Modernizr CSS document styling to declare the IE8-9 fallback rules via JS feature detection. Like this:

html.no-flexbox .flex-item {
  display: table-cell;
}

2) Use IE CSS conditional styling:

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" />
<![endif]-->

OR

3) The other no-JS way is using CSS hacks. With a display value which will ignored by other browsers, and only be parsed and applied by IE8-9.

With: a)

.flex-item {
  display: block;
  display: table-cell\0/; /*IE8-10 */
}

and/or: b)

@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */
  .flex-item { display: table-cell; }
}

Aftertaste