flexbox fallback для отображения таблицы в старых браузерах

Question

Есть ли лучший способ, чем ниже, чтобы гарантировать, что я ориентируюсь только на браузеры, которые не поддерживают flexbox. Я думаю, что это может сработать, но, возможно, мне понадобятся некоторые стили только для ie8 и 9, например, которые могут повлиять и на современные браузеры. Было бы лучше всего создать отдельную таблицу стилей?

.flex{ 
    display:table; 
    display:flex; 

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

Спасибо!

Answer 1

Длительный ответ сложный. Хорошо, что IE10 и большинство старых браузеров, используемых сегодня, поддерживают flexbox. Но старый синтаксис с совершенно другой спецификацией и поведением. См. Таблицу flexbox support. Я также предлагаю вам взглянуть и/или использовать это tool с Сгенерировать устаревшие стили 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 спецификации и support является отсутствие flex-wrap. Итак, помимо многих [«flexbugs»] (https://github.com/philipwalton/flexbugs) и различий для просмотра. Имейте в виду, что не может использовать flex-wrap, если вам нужна обширная обратная совместимость за пределами браузеров 2012 года или IE9.

* Также стоит отметить, что если ваши целевые пользователи находятся в Азии или Африке, вам определенно понадобится модель -webkit-box для UCBrowser для Android, которая в настоящее время по-прежнему не поддерживает новый синтаксис. (По состоянию на 2016 год UCBrowser имеет более 10% использования мобильных браузеров по всему миру и 25% в Азии). -moz-box, возможно, также необходим для UCMini, который основан на более старых Firefox (данные об использовании и местонахождение неизвестно, однако).

Для гибких предметов table-cell или table-row запасные части. Это становится сложно, особенно при вложенности flexbox.

Однако есть 3 варианта:

1) Используйте функцию обнаружения с помощью сценария, как 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.

С: а)

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

и/или: б)

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