Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Тернистый путь к сегодняшнему Flexbox

Прежде чем Flexbox превратился в сегодняшнюю относительно стабильную версию, он прошел через несколько основных стадий. Рассмотрим, к примеру, изменения, произошедшие со времени выхода версии 2009 года (http://www.w3.org/TR/2009/WD-css3-flexbox-200 90723/), версии 2011 года (http://www.w3.org/TR/2011/WD-css3-flexbox-201 11129/) и версии 2014 года, на которой основаны приводимые здесь примеры (http://www.w3.org/TR/css-flexbox-1/). Можно заметить, что у этих версий имеются существенные синтаксические различия.

Наличие различных спецификаций означает, что есть три основные версии реализации. Скольким версиям следует уделить внимание, зависит от необходимого вам уровня поддержки со стороны браузеров.

Браузерная поддержка Flexbox

Сразу обозначим исключения: Internet Explorer 9, 8 и более ранних версий Flexbox не поддерживает.

Что же касается всех остальных браузеров, чью поддержку хотелось бы получить (и практически всех браузеров мобильных устройств), то у вас есть возможность воспользоваться большинством, если не всеми свойствами Flexbox. Информацию о поддержке можно получить по адресу http://caniuse.com/.

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

Кому-то все еще нужны префиксы

Я надеюсь, что, посмотрев на примеры Flexbox, вы отдадите должное пользе от его применения и вдохновитесь на его использование. Но вводить вручную весь код, необходимый для поддержки различных Flexbox-спецификаций, — задача не из легких. Вот пример, в котором я собираюсь задать три относящихся к Flexbox свойства и значения. Рассмотрим его код:

.flex {

display: flex;

flex: 1;

justify-content: space-between;

}

Именно так свойства и значения будут выглядеть в самой последней версии синтаксиса. Но если нужно получить поддержку со стороны Android-браузеров (v4 и ниже), а также IE 10, потребуется следующий код:

.flex {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}

Необходимость написания всего этого обусловлена тем, что в последние несколько лет во всех браузерах стали доступны экспериментальные версии новых функциональных возможностей, но с использованием так называемого префикса производителя (vendor prefix). У каждого производителя имелся собственный префикс. Например, -ms- для Microsoft, -webkit- для WebKit, -moz- для Mozilla и т. д. Для каждой новой функциональной возможности это означало необходимость написания нескольких версий одного и того же свойства, сначала в форме версий с префиксами, а в конце — в форме официальной версии консорциума W3C.

Результатом такого написания в веб-истории является код CSS, подобный приведенному в предыдущем примере. Это единственный способ получить функцию, работающую на широком круге устройств. В наши дни производители довольно редко добавляют префиксы, но в обозримом будущем нам придется жить, со­образуясь с реальностью существования множества браузеров, по-прежнему требующих использования префиксов для включения конкретных функций. Это возвращает нас к Flexbox, который является ярким примером необходимости указания префиксов производителей не только из-за нескольких версий от разных производителей, но и из-за различных спецификаций функций. Но понимание и запоминание всего, что необходимо для написания текущего формата и каждого предыдущего формата, не составляет полной картины сомнительных удовольствий.

Не знаю, как вы, а я предпочитаю тратить свое время на более продуктивные занятия, чем всякий раз записывать весь этот объем кода! Короче говоря, если вы собираетесь тратить свои нервы на использование Flexbox, потратьте время на настройку решения для автоматической расстановки префиксов.

Выбор решения для автоматизации расстановки префиксов

Чтобы сберечь нервы и аккуратно, без особых усилий добавить к CSS префиксы производителей, воспользуйтесь решением для автоматической расстановки префиксов. Лично я на данный момент предпочитаю пользоваться средством Autoprefixer (https://github.com/postcss/autoprefixer). Оно работает довольно быстро, легко настраивается и отличается высокой точностью работы.

Существуют версии Autoprefixer для большинства настроек, и вам не обязательно пользоваться средством создания на основе использования командной строки (например, Gulp или Grunt). К примеру, если пользоваться средством Sublime Text, то существует версия, которая будет работать непосредственно из его палитры команд: https://github.com/sindresorhus/sublime-autoprefixer. Есть также версии Autoprefixer для Atom, Brackets и Visual Studio.