Flexbox rollback to display table in older browsers

Question

Is there a better way than below to make sure that I focus only on browsers that do not support flexbox. I think this might work, but maybe I need some styles only for ie8 and 9, for example, which can affect modern browsers too. Would it be best to create a separate stylesheet?

.flex{
  display:table;
  display:flex;

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

Thanks!

Answer 1

. , IE10 , , flexbox. . . flexbox support. / Generate legacy flexbox, , , , .

- , *, display:flex; . flexbox. IE8 9, , IE8, . :

.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+ */
}

, flexbox flex-wrap. , [ "flexbugs" ] (https://github.com/philipwalton/flexbugs) . , flex-wrap, 2012 IE9.

* , , -webkit-box UCBrowser Android, - . ( 2016 UCBrowser 10% 25% ). -moz-box, , UCMini, Firefox ( , ).

flex table-cell table-row. , flexbox.

3 :

1) script, Modernizr. Modernizr CSS, IE8-9 JS. :

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

2) IE CSS:

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

3) -JS CSS hacks. , , IE8-9.

: a)

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

/: )

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