Flexbox – новая и старая интерпретация CSS3 модуля.

Перевод статьи:  «Old» Flexbox and «New» Flexbox.
Автор:  Chris Coyier.

*Данный пост содержит перевод статьи Криса Койера, в которой автор разъясняет причины возникновения разночтений, связанных с применением модуля гибкой компоновки третьего уровня — «флэксбокс» (Flexbox CSS3).

Цель статьи – доведение до каждого заинтересованного в данном вопросе информации о том, что Flexbox (модуль, который в спецификации именуется как "CSS Flexible Box Layout Module") за последние три года претерпел массу изменений. И эти изменения коснулись обеих сторон его существования – спецификации и практической реализации в браузерах.

Признаки определения актуальности информации.

Разыскивая с помощью Google интересующие вас материалы касательно Flexbox, вы натолкнетесь на массу устаревшей информации. И вот несколько советов, которые помогут вам быстро сориентироваться в этом вопросе:

  • Если, читая блог-пост или черпая информацию о Flexbox из любого другого источника, вам встретятся такие выражения как display: box; или свойства подобные box- {*}, то перед вами устаревшая версия Flexbox 2009 года.
  • В том случае, если в найденном вами источнике информации о Flexbox присутствует значение display: flexbox; и функция flex(), то перед вами не совсем удачный, промежуточный вариант этой модели, представленный в 2011 году.
  • Если же какое-либо руководство или блог-пост (как, кстати, и этот) о Flexbox содержат такие конструкции как display: flex; и flex- {*}, то они отображают самую свежую информацию, содержащуюся в текущей версии спецификации.

Экземпляры устаревших инструментов и материалов.

Все представленные ниже материалы на момент их создания были незаменимыми в своем роде, но теперь от них мало толку, так как они уже устарели:

  • Flexie — представляет собой JavaScript полифил, реализующий функционал Flexbox с использованием старого синтаксиса 2009 года.
  • В период неудачной попытки модификации модели Flexbox в 2011 году на "Smashing Magazine" был опубликован пост Ричарда Шепарда (Richard Shepard). В нем вскользь упоминается о новом на тот момент синтаксисе 2011 года, хотя в большинстве своем этот материал сфокусирован на его старом варианте 2009 года.
  • Известный финский веб-дизайнер Стефен Хей (Stephen Hay) уже давно пишет о Flexbox и его первоначальный пост на эту тему посвящен старому синтаксису (2009 г.), в его следующей публикации речь идет о его обновленном варианте 2011 года, но, к сожалению, она вышла не за долго до релиза новой, действующей на данный момент версии синтаксиса и поэтому размещенные в ней материалы уже потеряли свою актуальность.
  • Что касается лично меня, то впервые о Flexbox я узнал из статьи Пола Айриша (Paul Irish), где также изложен материал о старом варианте синтаксиса 2009 года. Однако, автор статьи поместил предупреждение о том, что предоставленный им материал устарел и рекомендует обратиться к упомянутому выше посту Стефена Хея, который посвящен более новому синтаксису 2011 года.

Поддержка браузерами.

Если рассматривать вопрос кроссбраузерной поддержки модуля Flexbox, то здесь ситуация еще больше запутанна.

Как ни странно, но именно устаревший синтаксис 2009 года имеет достаточно неплохую «поддержку» со стороны большинства браузеров, а точнее она реализована в: Chrome, Firefox 2+, Safari 3.1+ и т.д. Практически везде за исключением IE 9- и полностью в Opera. Я выделил слово «поддержка» в кавычки, так как фактическая реализация этой технологии в браузерах была неполной и отчасти несогласованной, что и послужило причиной пересмотра спецификации.

Несмотря на то, что старый синтаксис достаточно неплохо поддерживается браузерами, его использовать не рекомендуется, по той причине, что старая версия спецификации уже не актуальна и в будущем, через определенное время браузеры непременно прекратят ее поддержку. В любом случае, поскольку новый синтаксис значительно проще в изучении и применении, то вероятней всего именно его реализация будет более глубокой. Те браузеры, которые до сих пор еще не поддерживали модули Flexbox, начнут это делать уже в новой форме, предусмотренной последней спецификацией, которая получила статус CR. (Candidate Recommendation*кандидат в рекомендации стандарта, а значит технически уже готов к реализации и не должен подвергаться изменениям.)

Новый синтаксис поддерживается в: Chrome 21+, Safari 6.1+, Firfox 22+, Opera (а также Opera Mobile) 12.1+, IE 11+ и Blackberry 10+.

Что касается IE 10, то это пожалуй единственный случай поддержки промежуточной, не совершенной версии Flexbox (в которой используется значение display: flexbox;). (*Более того, она требует применения вендорного префикса -ms-).

Примеры использования.

Не так давно мне пришлось посодействовать в вопросе создания макета страницы типа "fluid-fixed-fluid" (*Фиксированная средняя часть и плавающие боковые колонки). Оба синтаксиса справились с решением этой задачи (без них подобный макет реализовать очень сложно). Приведенные ниже примеры использования могут сослужить неплохую службу в процессе тестирования поддержки браузерами различных версий техники Flexbox (а также их отказа от устаревшего варианта):

Пример использования УСТАРЕВШЕГО синтаксиса.

Пример использования НОВОГО синтаксиса.

*Если кто-нибудь из вас располагает более свежей информацией на эту тему, буду рад вашим комментариям. Мой следующий пост будет переводом новой статьи Криса Койера, в которой для реализации Flexbox он предлагает использовать комплексный подход, предусматривающий задействование сразу двух синтаксисов — нового и старого.

* Примечание переводчика.

Добавить комментарий

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