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

  • Tutorial
Уверен, многие Front End Developer-ы постоянно сталкиваются с проблемой поддержки flexbox в старых версиях популярных браузеров. Среди них выделяются два явных фаворита – Internet Explorer (IE) и Safari. С IE всё проще, т.к. flex поддерживается в версиях 10.0+. Версии ниже уже не актуальны, поэтому их часто игнорируют. В Safari же ситуация иная, поскольку поддержка современной спецификации flexbox (по мнению Caniuse.com) начинается с версии IOS Safari 9.2+.

image

Проблема именно в этом! Ведь по статистике Apple, только 47% обладателей iPhone имеют возможность использовать Safari 9.2+.

image

А что делать остальным?


Если мы делаем красивый, качественный и суперадаптивный сайт, построенный на flexbox — так же красиво и качественно он будет отображаться только на устройствах, которые его грамотно интерпретируют.

На помощь в этом приходит так называемый старый синтаксис flexbox – display: box;
Это аналог свойства display: flex; только он поддерживается всеми Safari, начиная с версии 5.0+.

Однако всё не так просто:

  1. Display: box работает только с префиксами, в данном случае с -webkit- (display: -webk2) it-box;).
  2. Странно работает с float.
  3. Аналогов некоторым современным свойствам нет.

Это те ошибки, которые отловил лично я. В будущем список будет пополняться.

Как же решить уже найденные проблемы?



Прописываем вендорные префиксы для box и связанным свойствам. Обтекания внутри box прячут элементы.

imageimage

Эту ошибку пофиксить легко. Достаточно элементам, имеющим float, добавить свойство position: relative.

image
Почему бы просто не убрать float? – А вот почему:

image

Я приведу список всех рабочих аналогов flex-свойств и box-свойств:

-webkit-box-orient (flex-direction) – направление оси элементов.

Бывает нескольких видов в случае нового синтаксиса:

— column – колонка;
— row (по умолчанию) – строка;
— row-reverse – реверсия строки;
— column-reverse – реверсия колонки.

В случае старого синтаксиса я использую всего два свойства:

— vertical – колонка;
— horizontal – строка.

Есть еще два свойства, но они не работают как аналоги реверсивных свойств нового синтаксиса, поэтому я не использую их в своей практике.

Для реверса есть свойство -webkit-box-direction, которое имеет 2 значения – normal и reverse.

-webkit-box-pack (justify-content) – задает выравнивание по горизонтали.

Новый синтаксис:

— flex-start, flex-end – элементы прижаты к началу/концу родителя;
— space-between – распределяет элементы равномерно внутри родителя, не оставляя при этом боковых отступов;
— center – центрирует элементы.

Старый синтаксис:

— start, end – аналог flex-start, flex-end;
— justify – аналог space-between;
— center – то же, что и center в новом.

У space-around НЕТ аналога!

-webkit-box-align (align-items) – выравнивание по вертикали. По праву могу назвать это одним из главных достоинств flexbox.

Новый синтаксис:

— flex-start, flex-end – элементы прижаты к верху/низу родителя;
— baseline – дефолтное значение, выравнивание по базовой линии шрифта без учета свисаний;
— center – центрирует элементы;
— stretch – растягивает дочерние блоки по высоте.

Старый синтаксис:

— start, end – аналог flex-start, flex-end.

Остальные свойства идентичны

-webkit-box-ordinal-group (order) – определяет порядковый номер элемента в группе.
В обоих случаях задается цифрой.


Других вариантов либо нет, либо они не работают. Например:

-webkit-box-lines – это, по идее, аналог свойства flex-wrap, но у меня он почему-то не работает.

И напоследок.

Если вам нужно применить любое CSS-свойство только для -webkit-, можете использовать рабочий CSS-хак. Он проверен и он РАБОТАЕТ:

@media all and (-webkit-min-device-pixel-ratio:0) {
/*Всё, что вы сюда напишете, будет работать только с -webkit-*/
}

Делитесь своим опытом и удачи!

Автор статьи: Виктор Рябовол
Поделиться публикацией
Комментарии 15
    +1
    А зачем вам float если все на флексах?
      0
      Тут нюанс в том, что сайт был на половину на флексе а на половину на float, и когда нужно как то быстро сделать «на велосипедах» то вот такая штука может спасти. Но снова таки, тут пример для реально плохих сайтов
        0
        странное решение делать половину сайта на float, а половину на flexbox, если мы по условию задачи используем только те версии браузеров, которые поддерживают flexbox))))
          0
          специфика такая) достается сайт, который до тебя делает еще пару вебстудий или фрилансеров, и тебе приходится «плыть в потоке костылей» что бы поддерживать его работу)
      0
      Пробовали использовать Autoprefixer для совместимости со старой версией?
        0
        Нет, такой штуки еще не использовал, надо будет глянуть. Тут еще проблема в том, что специфика работы такая, что работаем на чистом CSS, и сборщиком типа gulp никто на фирме не пользуется
          0
          очень советую попробовать :) Autoprefixer облегчает жизнь
            0
            Спасибо) на следующем проекте обязательно протестирую!
        +3
        В Safari же ситуация иная, поскольку поддержка современной спецификации flexbox (по мнению Caniuse.com) начинается с версии IOS Safari 9.2+.

        Проблема именно в этом! Ведь по статистике Apple, только 47% обладателей iPhone имеют возможность использовать Safari 9.2+.
        Вообще-то Safari 9+. Он идёт вместе с iOS 9+, который поддерживается, начиная с iPhone 4s. Причём для маков он был выпущен как минимум даже для Mac OS X Mavericks (10.9).

        Откуда у вас взялось 47%, если по приведённой вами же картинке iPhone 4s+ занимают долю 87%?

        Но и это ещё не всё. Flexbox делится на старую версию и новую. -webkit-box-* и тому подобное — это старая версия, которая была вплоть до Safari 6, включительно.

        Safari 7+ поддерживают новую версию, только с префиксами, которые были опущены в 9 версии. На том же caniuse это можно видеть по жёлто-зелёным partial support и зелёным prefixed. Поддерживать старую версию уже попросту незачем. Её распространённость — сотые доли процента.
          0
          Начну по порядку!
            0
            Тут вопрос стоит в том что не все люди обновляют свои девайсы, IOS 9+ это отлично, но вот safari там идет версии 9.0 А не 9.2+

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

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

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

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

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

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

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

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


            .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);
            }
              0
              Autoprefixer конечно круто, но только box и flex ведут себя очень по-разному, при одном и том же расположении блоков в родителе) Я бы не так яро не полагался на autoprefixer ))
                0

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

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое