Дисплей CSS: flex - обязательные префиксы

Я изменил способ отображения входных групп в Twitter Bootstrap 3.2 от display: table до display: flex , но я не уверен, какие префиксы CSS необходимы для поддержки старых браузеров.Дисплей CSS: flex - обязательные префиксы

Мой текущий код:

.form-group.input-group{ 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: flex; 
    -webkit-align-items: stretch; 
    -moz-align-items: stretch; 
    -ms-align-items: stretch; 
    align-items: stretch; 
} 
.form-group.input-group > *:not(.input-group-addon){  
    -webkit-flex: 1 1 auto; 
    -moz-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
} 
.input-group-addon{ 
    -webkit-flex: 1 0 auto; 
    -moz-flex: 1 0 auto; 
    -ms-flex: 1 0 auto; 
    flex: 1 0 auto; 
}

мне нужно использовать все эти префиксы или некоторые из них бесполезны ли?

источник

2014-10-22 LJ Wadowski

Насколько мне известно, вам не нужно указывать '*' при объединении селектора '>' с ': not()', вы ca n просто '.form -...>: not (...)'. –

Для этого можно использовать Can I Use.... Вот прямая ссылка на поддержку браузера для flexbox: http://caniuse.com/#search=flexbox

Screenshot of Can I Use results

Из этого мы можем видеть, что:

IE10 требует префикс -ms- и поддерживает только синтаксис 2012 (как указано в Примечания раздел на странице).
Safari, iOS Safari и более старые версии Android-браузера требуют префикса -webkit-.
Это не работает вообще на IE9 или ниже, или в Opera Mini.

Мы также можем определить, что для IE11 и более поздних версий Firefox, Chrome и Opera, в -ms-, -moz- и -webkit- префиксов могут быть отброшены.

источник

2014-10-22 10:14:42

Вы можете использовать Autoprefixer. Он доступен для широкого спектра инструментов. И вы должны писать только чистый CSS;)

В качестве примера вы можете префикс вашего css с помощью CLI. На вашем bootstrap.css вы пишете действительный CSS на основе спецификации:

.form-group.input-group { 
    display: flex; 
    align-items: stretch; 
} 

.form-group.input-group > *:not(.input-group-addon) { 
    flex: 1 1 auto; 
} 

.input-group-addon { 
    flex: 1 0 auto; 
}

И предваряя его с

sudo npm install --global autoprefixer 
autoprefixer bootstrap.css

Вы можете проверить код на Autoprefixer Playground слишком

Ciao Ralf

источник

2014-10-22 10:28:17 RWAM

Дисплей CSS: flex - обязательные префиксы

ответ

Смежные вопросы