«Старый» и «новый» 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. Это тоже может быть интересно:
Попробовал микс нового и старого синтаксиса, например вот хелпер класс для флекс бокса:
.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
Пока что пашет, но в ближайшем будущем поддержка старого синтаксиса может отвалиться.
Интересная идея. По-видимому, в простых случаях (где не нужна многострочность и т.п.) так действительно можно добиться максимального охвата. Только, конечно, беспрефиксный вариант нужно оставлять только новый, а старый задавать только с теми префиксами, которые реально работают.
Да, конечно этот способ подходит только для тех реализованных фич которые есть и в старой и в новой спецификациях. К примеру в спеке 2012 года есть новое свойство align-self аналогов которому нет в варианте 2009 года.
Обновление сведений о поддержке: Firefox будет поддерживать сразу без префикса (но первое время — только при включении соотв. настройки). Так что новому синтаксису теперь не нужны никакие префиксы, кроме -webkit-, но на «боевых» проектах его пока особо не поиспользуешь. Но уже через полгода-год ситуация должна исправиться.
Спс за уточнения, Илья!
opera 12.10 поддерживает без префикса
а вот хром сбоит
float элементы позиционируются весьма странно
Будьте осторожны, в IE10 flexbox не очень хорошо дружит с модельню box-sizing.
Не знаю у кого как, а у меня Firefox 18 понимает только с префиксом -moz