«Старый» и «новый» Flexbox

От редакции css-live.ru: Flexbox — один из самых ожидаемых «раскладочных» модулей CSS3, но с непростой судьбой. Мы уже писали о нелегких приключениях этой спецификации. В последнее время интерес к этому механизму особенно вырос, благодаря тому, что новый синтаксис уже поддерживается в Chrome 21+ и вот-вот начнет поддерживаться в Опере. Но изменения спецификации привели к огромной путанице как в учебных материалах, так и в справочниках о браузерной поддержке, и разобраться, где о какой редакции идет речь — об актуальной или об устаревшей — очень непросто. Надеемся, что эта статья Криса Койера поможет вам сориентироваться во всей этой путанице.

Перевод статьи “Old” Flexbox and “New” Flexbox с сайта css-tricks.com, автор Крис Койер, переводчик Илья Стрельцын

7 августа 2012 г.

Просто ради того, чтобы прояснить для всех: «Flexbox» (точнее, CSS Flexible Box Layout Module — модуль «гибкой» раскладки) претерпел за последних три года много изменений. Изменений как в спецификации, так и в том, что реализовано в браузерах.

Как отличить

При поиске информации о Flexbox вы наткнетесь на множество устаревшей информации. Вот как можно быстро ее опознать:

Если вы читаете запись в блоге (или что угодно) о Flexbox и видите display: box; или свойство с именем box-{*}, значит, перед вами старая версия Flexbox 2009 года.

Если вы читаете запись в блоге (или что угодно) о Flexbox и видите display: flexbox; или функцию flex(), значит, перед вами неуклюжий промежуточный вариант 2011 года, про который я не уверен, что его вообще хоть один браузер реализовал.

Если вы читаете запись в блоге (или что угодно) о Flexbox и видите display: flex; и свойства flex-{*}, то перед вами текущая (на момент написания этой статьи) спецификация

Примеры устаревших материалов

Все эти материалы были потрясающими на момент создания, но сейчас они устарели:

Flexie – JavaScript-полифилл (библиотечка, компенсирующая отсутствие поддержки в старых браузерах) для Flexbox, использует старый синтаксис 2009 года.

Эта статья Ричарда Шепарда в Smashing Magazine периода неуклюжей стадии 2011 года. Она мельком упоминает синтаксис 2011 года, но больше сосредоточена на синтаксисе 2009 года.

Стивен Хей уже достаточно давно пишет о Flexbox. Его вводный пост использует старый синтаксис 2009 года, затем он переработал его для синтаксиса 2011 года, к сожалению, буквально за месяц до выхода теперешнего синтаксиса.

Я впервые узнал о Flexbox благодаря статье Пола Айриша, использующей синтаксис 2009 года. На ней сверху красуется предупреждение, но ссылается на статью Стивена с синтаксисом 2011 года.

Поддержка

С браузерной поддержкой всё еще сложнее.

У старого синтаксиса 2009 года «поддержка» на удивление хороша: Chrome, Firefox 2+, Safari 3.1+… Почти всё, кроме IE9- и всех Опер. Я сказал «поддержка», потому что фактические реализации были неполными и слегка различались (из-за чего спецификацию и переписали).

Несмотря на лучшую поддержку, использовать старый синтаксис неразумно. Старая спецификация канула в Лету. Браузеры могут прекратить поддержку старого синтаксиса в любой момент. Наконец, новый синтаксис проще для понимания и наверняка будет реализован основательнее и единообразнее. Браузеры, не поддерживавшие Flexbox до сих пор, наверняка реализуют новую спецификацию, у которой уже статус CR (кандидат в рекомендации, т.е. «без пяти минут стандарт»).

Примеры

Недавно я кому-то помогал с созданием макета вида «резина-фикс-резина». Оба синтаксиса легко с этим справляются (другими средствами эта задача решается с трудом). Эти примеры могут служить хорошим индикатором для проверки браузерной поддержки (и отказа браузеров от поддержки старья).

Пример СТАРОГО синтаксиса

Пример НОВОГО синтаксиса

От редакции css-live.ru: по состоянию на текущий момент, судя по всему, новый синтаксис Flexbox реально поддерживается только в Chrome 21+, с префиксом -webkit- и в последних экспериментальных сборках Opera.Next 12.10 и Opera Mobile 12.1 (без префикса). Firefox обещает экспериментальную поддержку с 18-й версии (с префиксом -moz- уже без префикса), но для ее включения нужно будет изменить настройки браузера (в соответствии с новой политикой W3C в отношении экспериментальных фич, о которой упоминалось в статье "Горячие новости веб-стандартов"). IE10 — пока, видимо, единственный браузер, реализовавший временный синтаксис 2011 года (с префиксом -ms-). Мы будем рады любым уточнениям и дополнениям по этому поводу!

P.S. Это тоже может быть интересно:

9 Комментарии

  1. sergeya

    Попробовал микс нового и старого синтаксиса, например вот хелпер класс для флекс бокса:
     
    .flex{
      /* old syntax */
      display: -webkit-box;
      display: -moz-box;
      display: -o-box;
      display: box;
      
      /* new syntax */
      display: -webkit-flex; 
      display: -moz-flex; 
      display: -o-flex; 
      display: -ms-flex; 
      display: flex; 
      }
    И ничо, пашет во всех браузерах где проверял — хром 24, файерфокс 16, сафари 5

    1. psywalker (Автор записи)

      Пока что пашет, но в ближайшем будущем поддержка старого синтаксиса может отвалиться. 

    2. SelenIT

      Интересная идея. По-видимому, в простых случаях (где не нужна многострочность и т.п.) так действительно можно добиться максимального охвата. Только, конечно, беспрефиксный вариант нужно оставлять только новый, а старый задавать только с теми префиксами, которые реально работают.

      1. sergeya

        Да, конечно этот способ подходит только для тех реализованных фич которые есть и в старой и в новой спецификациях. К примеру в спеке 2012 года есть новое свойство align-self аналогов которому нет в варианте 2009 года. 

  2. SelenIT

    Обновление сведений о поддержке: Firefox будет поддерживать сразу без префикса (но первое время — только при включении соотв. настройки). Так что новому синтаксису теперь не нужны никакие префиксы, кроме -webkit-, но на «боевых» проектах его пока особо не поиспользуешь. Но уже через полгода-год ситуация должна исправиться.

    1. psywalker (Автор записи)

      Спс за уточнения, Илья!

  3. Иван

    opera 12.10 поддерживает без префикса
    а вот хром сбоит

    float элементы позиционируются весьма странно

  4. LeonidKreator

    Будьте осторожны, в IE10 flexbox не очень хорошо дружит с модельню box-sizing.

  5. LeonidKreator

    Не знаю у кого как, а у меня Firefox 18 понимает только с префиксом -moz

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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