Особенности –webkit-box или как «подружить» flexbox со старыми Safari

[x07]

А зачем вам float если все на флексах?

[m1hasik]

Тут нюанс в том, что сайт был на половину на флексе а на половину на float, и когда нужно как то быстро сделать «на велосипедах» то вот такая штука может спасти. Но снова таки, тут пример для реально плохих сайтов

[x07]

странное решение делать половину сайта на float, а половину на flexbox, если мы по условию задачи используем только те версии браузеров, которые поддерживают flexbox))))

[m1hasik]

специфика такая) достается сайт, который до тебя делает еще пару вебстудий или фрилансеров, и тебе приходится «плыть в потоке костылей» что бы поддерживать его работу)

[m1hasik]

Нет, такой штуки еще не использовал, надо будет глянуть. Тут еще проблема в том, что специфика работы такая, что работаем на чистом CSS, и сборщиком типа gulp никто на фирме не пользуется

[m1hasik]

Спасибо) на следующем проекте обязательно протестирую!

[VIk_heathen]

Начну по порядку!

[VIk_heathen]

Тут вопрос стоит в том что не все люди обновляют свои девайсы, IOS 9+ это отлично, но вот safari там идет версии 9.0 А не 9.2+

Отсюда то и начались проблемы!

У некоторых на 4 вообще стоит 7+, а проблему решать надо, и даже autoprefixer проблему часто только усугубляет!

Вопрос: Откуда вы взяли цифру 87??

47% это суммарная цифра исходя из всех моделей девайсов начиная от 3 заканчивая 5s.
Последний тут не случайно, ведь он в поставке так же с IOS 9, но, на нем та же ситуация — 9.0

В современной поставке 5s+ уже имеет IOS 10, но все же, не у всех.

Ну а на счет старой и новой версии! Ну об этом то и пишется статья, по сути)

Safari 7+ практически не воспринимает flex, это лично проверено, на многих девайсах, не зря же выкладывалась статья!

[pepelsbey]

Этот неловкий момент, когда целый пост заменяет Автопрефиксер. Не просто попробуйте в следующем проекте, а переведите текущий и прошлые на поддержке.

.example {
    display: flex;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

.example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: linear-gradient(to bottom, white, black);
}

[VIk_heathen]

Autoprefixer конечно круто, но только box и flex ведут себя очень по-разному, при одном и том же расположении блоков в родителе) Я бы не так яро не полагался на autoprefixer ))

[pepelsbey]

А вы попробуйте, там не так просто как кажется. И если что-то работает неточно — можно всегда исправить и отправить пулреквест.