Переход на CSS Flexbox с помощью метода обнаружения

Переход на CSS Flexbox с помощью метода обнаружения

От автора: для front-end разработчиков пришло время отказаться от использования свойства float в CSS и погрузиться в новый захватывающий мир flexbox. Поддержка Flexbox в CSS уже достаточно хороша, свойство flexbox поддерживают все современные браузеры. Float устаревший метод стилизации; он поддерживается в браузере IE, начиная с 4 версии, и часто требовались различные обходные пути для его полной работоспособности (такие как clearfix и использование псевдокласса nth-child для блока-обертки колонок).

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

Кроссбраузерная flexbox верстка возможна?

Главная задача этой статьи – как создать кроссбраузерную flexbox верстку, учитывая фрагментацию flexbox. К концу этой статьи вы:

Поймете, какая версия flexbox нужна для отзывчивого сайта.

Будете использовать flexbox посредством метода обнаружения (Cutting the mustard) и научитесь делать фиксы для старых браузеров.

Откажетесь от использования условных комментариев для IE в большинстве случаев.

На практике создадите базовую сетку 2х2 с резервированием для старых браузеров.

Краткая история Flexbox

Модуль верстки с помощью гибких блоков (или flexbox) новый способ структурирования кода верстки в CSS. За относительно короткий срок flexbox значительно эволюционировал, и вышло несколько версий. На момент написания статьи flexbox был еще рабочим стандартом W3C, но, как и другие стандарты, это не делает его «непривлекательным» для разработки. Существует 3 типа стандарта, обычно упоминают старый синтаксис, переходной и новый.

Ограничения flexbox строго задокументированы:

Старый синтаксис не поддерживает flex-wrap.

Переходной синтаксис поддерживает flex-wrap только в IE10(включая мобильные браузеры).

Новый синтаксис не полностью реализован в Firefox(22-27) – отсутствуют свойства flex-wrap и flex-flow.

Обертывание flex-wrap важное свойство в спецификации, оно необходимо для создания отзывчивой сетки. По этой причине лучше всего работать с переходным синтаксисом и версиями браузеров, которые полностью поддерживают новый синтаксис. В этой связи предлагаются следующие версии браузеров:

IE10 (переходной синтаксис с -ms- префиксом)

IE11 и Edge (новый синтаксис)

Firefox28+ (новый синтаксис)

Chrome21-28 (новый синтаксис c -webkit- префиксом)

Chrome29+ (новый синтаксис)

Safari6.1+ (новый синтаксис c -webkit- префиксом)

iOS Safari7.0+ (новый синтаксис c -webkit- префиксом)

Так как достаточная доля браузеров не поддерживает flexbox необходимо делать резервирование через float CSS. Но как это реализовать в коде? Какой из способов лучше подходит для того, чтобы различать версии браузеров и использовать float вместо flexbox? Какой подход для подстраховки применять к устаревшим версиям Firefox, которые поддерживают новый синтаксис, но не поддерживают обертывание? Представляю – Cutting the mustard.

Обнаружение особенностей (Cutting the Mustard)

Если вы еще не слышали об этом техническом термине, «Cutting the mustard» был придуман командой разработчиков BBC News. Значение термина вытекает из того, что сайт BBC обязан удовлетворять интерес огромной международной аудитории, и ориентация на различные версии браузеров и спецификации устройств была громоздким решением.

Суть концепции заключается в определении, какой браузер/устройство/user agent используется и служит полизаполнением для работы сайта. Эти особенности определяются на стороне клиента, и для них подбирается подходящее решение.

Метод обнаружения не нов. Вышеупомянутая статья была опубликована в марте 2012 года. Пока этот метод только набирал популярность, удивительно было видеть сайты, которые все еще использовали специальные условные классы для IE, изобретенные Полом Иришем в 2008.

Modernizr – тут есть все о методе обнаружения:

Применение преимуществ новых крутых веб-технологий очень весело до тех пор, пока вам не нужно поддерживать устаревшие браузеры. Поддерживает ли браузер данную функцию или нет, Modernizr облегчает написание условий на JavaScript и CSS для обработки каждого случая. Идеально подходит для легкого создания прогрессивных улучшений.

Хотя сейчас CSS имеет нативный метод обнаружения, в настоящий момент его использование не достаточно распространено, чтобы быть жизнеспособным. Далее в этой статье мы обсудим, как отказаться от условных комментариев IE в пользу метода обнаружения на JavaScript.

Идентифицирующие признаки и браузеры

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

Использование plain JavaScript (как в проекте BBC)

Использование библиотеки Modernizr (Которая будет использована в этой статье)

Самый эффективный метод – vanilla JavaScript. Он быстрый (не требует от пользователя загружать дополнительные библиотеки) и не требует дополнительной обработки. Данный метод далек от совершенства, так как есть известные проблемы; однако, есть способы преодоления общих проблем.

Определение типа браузера стало невыносимой путаницей, и в значительной степени вышло из употребления. Оно должно быть заменено чем-то гораздо лучшим – методом определения. …метод обнаружения тоже не вполне надежен – есть моменты, где он не работает. Джеймс Эдвардс

Библиотека Modernizr для метода обнаружения может быть не так эффективна (так как требуется загрузка и обработка на стороне клиента), но ручное обнаружение поддержки свойства flex-wrap не простая задача. Важно также отметить, что хоть Modernizr второй версии не определяет flex-wrap, зато третья версия это умеет! Эта функция названа Flex Line Wrapping.

Хоть в CSS и существует опция использования классов прикрепленных к корню документа Modernizr (к примеру: html.flexwrap), будет лучше, если для каждого случая будет создан отдельный CSS файл. Это необходимо для снижения веса загружаемых файлов.

Разработчики BBC News ссылаются на два типа браузеров:

Кто-то в команде начал называть их «HTML4» и «HTML5» браузеры. Так легче объяснить смысл человеку, не знающему технических особенностей.

Такое определение браузеров было совершенно справедливо, если учесть, то какие браузеры были в 2012; однако с появлением новых функций такое разделение стало не обязательным. К примеру, Firefox не полностью поддерживается во всех HTML5 браузерах.

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

Реализация подхода

Начнем с создания следующих файлов:

index.html – главный HTML файл

stylesheets/modern.css – стили для современных браузеров (медиа запросы, flexbox с обертыванием)

stylesheets/legacy.css – стили для старых браузеров (без медиа запросов, нет flexbox)

scripts/dependencies.js – выполняет функцию обнаружения.

Так выглядит наш index.html

<!DOCTYPE html>
<html class="no-js">
  <head>
    <title>Cutting the mustard</title>
    <script src="javascripts/dependencies.js"></script>
    <noscript>
    <link rel="stylesheet" href="stylesheets/legacy.css">
    </noscript>
    <!-- ... -->
  </head>
  <body>
    <div class="container">
      <div class="cell cell-1">Cell 1</div>
      <div class="cell cell-2">Cell 2</div>
      <div class="cell cell-3">Cell 3</div>
      <div class="cell cell-4">Cell 4</div>
    </div>
  </body>
</html>

Заметили, что нет условных комментариев IE? Просто чистый и валидный HTML код. И даже если в браузере отключен JavaScript, будет задействован для страховки файл legacy.css не зависимо от уровня его поддержки.

Также вы могли заметить, что теги JavaScript’а находятся в самом верху страницы. Это сделано для того, чтобы Modernizr мог обрабатывать и вставлять стили перед тем, как браузер отрисует страницу при первой загрузке. Это снижает возможность изменения цветов и помогает избежать Flash Of Unstyled Content (FOUC). Но помните, что большинство тегов скриптов будут внизу страницы. Файл legacy.css содержит:

.container {
}
 
/* clearfix */
.container:after {
  content: "";
  display: table;
  clear: both;
}
 
.cell {
  width: 50%;
  float: left;
}
 
/* wrapping */
.cell:nth-child(2n+1) {
  clear: left;
}
 
/* for visiblity */
.cell-1 { background-color: #000; color: #fff; }
.cell-2 { background-color: #666; color: #fff; }
.cell-3 { background-color: #ccc; color: #000; }
.cell-4 { background-color: #fff; color: #000; }

Реализация включает clearfix хак и псевдокласс :nth-child для обертывания. Работает в большинстве браузеров; однако IE8 требуется Selectivizr или другое схожее решение для правильной работы селекторов. Дальше наш файл modern.css:

.container {
  /* Internet Explorer 10
   */
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
 
  /* Chrome 21-28
   * Safari 6.1+
   * Opera 15-16
   * iOS 7.0+
   */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
 
  /* Chrome 29+
   * Firefox 28+
   * Internet Explorer 11+
   * Opera 12.1 & 17+
   * Android 4.4+
   */
  display: flex;
  flex-wrap: wrap;
}
 
.cell {
  -webkit-flex: 1 0 50%;
      -ms-flex: 1 0 50%;
          flex: 1 0 50%;
}
 
/* for visiblity */
.cell-1 { background-color: #000; color: #fff; }
.cell-2 { background-color: #666; color: #fff; }
.cell-3 { background-color: #ccc; color: #000; }
.cell-4 { background-color: #fff; color: #000; }

Не пугайтесь размера файла. Комментарии добавляют пару лишних строк, зато облегчают понимание, для чего нужна каждая секция. Следующим будет файл dependencies.js. Как было уже сказано, нам необходимо сгенерировать третью версию Modernizr, которая определяет поддержку flex-wrap. Код ниже нужно добавить в начало скрипта.

/* Include Modernizr v3 with 'Flex line wrapping' here */
 
(function() {
  var isModern = Modernizr.flexwrap;
 
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = 'stylesheets/' + (isModern ? 'modern' : 'legacy') + '.css';
 
  document.getElementsByTagName('head')[0].appendChild(link);
})();

При желании вы можете увеличить требования для современных браузеров, добавив к isModern Boolean. К примеру:

var isModern = Modernizr.flexwrap && 'querySelector' in document;

Решение с помощью Sass

Вы можете использовать Saas чтобы сделать абстрактным метод реализации flexbox. Это уменьшит размер выходного CSS файла и облегчает обслуживание:

%flexbox {
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}
 
.container1 {
  @extend %flexbox;
}
 
.container2 {
  @extend %flexbox;
}

Прогрессивное улучшение и тестирование в браузерах

Важно понять разницу между flexbox и float CSS. Ваша реализация не будет выглядеть точно также каждый раз, но идея прогрессивного улучшения означает, что она и не обязательно должна такой быть.

Например, по умолчанию flexbox растягивает все ячейки в ряде до одной высоты. Поэтому если одна клетка длиной 3 и соседняя строка длиной 10, то фон растянется для обеих клеток до 10. Резервирование на float CSS так не может, и поэтому ячейки будут иметь разную высоту.

Тестирование верстки в множестве браузеров все еще необходимо, но важно не забывать, что приравнивание isModern к false в dependencies.js поможет протестировать устаревшие решения в любом браузере.

var isModern = false; // Modernizr.flexwrap;

Заключение

В этой статье я показал основы использования функции обнаружения для работы с двумя разными файлами стилей и одной версткой. Это крайне эффективный способ начать избавляться от свойства float CSS и снизить зависимость от условных комментариев IE.

Хотя, был сделан большой акцент на определении поддержки flexbox, важно отметить, что как новая функция, разработанная для браузеров, метод обнаружения может быть адаптирован и развит в соответствии с будущими требованиями.

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

Так что теперь у вас есть основы. И почему бы не использовать flexbox в вашем следующем проекте?

Автор: Bashkim Isai

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. димыч

    Изучить можно, а вот применять-рано. Отметим, что ИЕ 7,8, 9 вообще не поддерживают эту технологию, Ие 10 частично (надо использовать вебкиты) и тока ИЕ 11 полностью. Гул Хром и Опера полностью. ФаерФокс я не тестил. Учтем, что в вебе есть такая вещь, как кросбраузерность. Это я имею ввиду ТРУ-веб. Есть отчеты Консорциума. Пока ИЕ8-10 жив, я бы с осторожностью использовал эту технологию.

    • Артур

      Существует статистика использования браузеров в RUнете. По OpenStat IE используют 8% посетителей интернета, а по LiveInternet и того 3,2%. Из них IE 7, 8, 9 — менее 1%. И что, наша студия должна ориентироваться на этих динозавров? Да и используются эти допотопные браузеры в основном офисным планктоном, для совместимости с некоторыми банковскими программами. Глупее ничего не может быть, чем ориентироваться на эту мизерную часть интернета в заказах сайтов. Мы уже год как отказались от поддержки браузеров IE ниже 10 версии и успешно создаем сайты по стандартам HTML5 и CSS3.

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

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

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

Я не робот.

Spam Protection by WP-SpamFree