Меньше года назад Трент Уолтон (Trent Walton) опубликовал статью Content Choreography (Хореография контента), где он сетовал на некоторые сложности и ограничения адаптивных макетов.

“Порой кажется, что вся планировка и архитектура сайта валится вон из окна, когда контент перекомпоновывается”

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

1.  Сжимает все в одну колонку

2.  Опускают сайдбар(ы) в самый низ

*кашляю* этот сайт подходит под описание *кашляю*

Трент заметил, что более подходящим подходом могло бы быть чередование блоков контента на манер переплетенных пальцев:

Т.е. уложить контент в одну колонку более осмысленным и полезным образом.

Практический пример: Свертываемость рекламы

Рассмотрим макет с большим окном браузера. Две колонки. Статьи внутри широкой левой колонки, реклама внутри узкой правой колонки.

При меньшем размере окна браузера мы решили сжимать все до одной колонки. Такой макет, вероятно построен с помощью плавающих блоков (float), которые являются самым популярным способ построения макетов на сегодняшний день. К сожалению это приводит к тому, что мы должны растянуть все колонки до 100% ширины и расположить их вертикально в таком же порядке, как они прописаны в коде. Смысл: опускаем всю рекламу вниз. Возможно не идеально. Было бы лучше если бы мы смешали рекламу с контентом.

Но как?

Есть несколько способов сделать это. С помощью JavaScript вы можете измерять ширину окна и перемешивать элементы внутри DOM. Это кажется тяжелым для меня, но поддержка браузерами будет весьма неплохой. Я предпочитаю опираться на CSS в таких случаях. Для этого CSS и предназначен (по крайне мере, так задумывалось). Сетки  (grid layout) могли бы нам помочь в этом случае, но, для этого урока, давайте воспользуемся свежими CSS Регионами (разработка Adobe)

Честно предупреждаю: эти свойства суперновые, могут измениться в будущем, и не исключено, что я всё тут делал неправильно.

HTML

<section class="main-content">
  <article> ... </article>
  <div class="ad-region-1">
    <!-- пусто, реклама уложится сюда, если надо -->
  </div>
  <article> ... </article>
  <div class="ad-region-2">
    <!-- пусто, реклама уложится сюда, если надо -->
  </div>
  <article> ... </article>
  <div class="ad-region-3">
    <!-- пусто, реклама уложится сюда, если надо -->
  </div>
</section>
<aside>
   <!-- Fallback контент в этом регионе, возможно копия #ad-source -->
</aside>
<!-- Источник укладываемого контента -->
<div id="ad-source">
  <a href="#"><img src="ads/1.jpg"></a>
  <a href="#"><img src="ads/2.jpg"></a>
  <a href="#"><img src="ads/3.jpg"></a>
  <a href="#"><img src="ads/4.png"></a>
</div>

Заметьте что «контент» (наша реклама) обернут в <div> внизу страницы. Кода мы настроим регионы, то этот элемент будет скрыт, а его содержимое перетечет в те регионы, которые мы назначим.

CSS.

Начнем с того, что дадим нашему диву с контентом div#ad-source команду, чтобы его контент стал перетекать в контейнер с определенным именем.

#ad-source {
  -webkit-flow-into: ads;
  -ms-flow-into: ads;
}

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

‘ads’ – произвольное имя, которое мы придумали. Оно может быть любым, как и при создании CSS анимации.

Теперь мы настраиваем регионы, в которые перейдет наш «контент». Во первых это элемент aside, а во-вторых блоки между статьями (с классом ad-region*)

aside, [class^='ad-region'] {
  -webkit-flow-from: ads;
  -ms-flow-from: ads;
}

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

Семантика

Таааак, мы имеем несколько пустых элементов в разметке. Не супер-семантично. Я не знаю как это повлияет на доступность (accessibility – англ.). Я знаю, что DOM не изменился. Весь контент, несмотря на то куда он «уложен» все ещё находится в его «источнике» (элемент со свойством flow-into) .

Еще одна вещь: регионы не зависимы от метода построения макета. Мы использовали плавающие блоки в этом примере, но что вы используете не имеет значения. Регионы в связке с CSS сетками могут быть более мощным и семантичным инструментом.

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

На момент написания статьи, CSS регионы поддерживаются в Chrome 16+ (стабильные версии) и Safari 5.2 (разрабатываемая). Предположительно, это работает и в IE 10, но я не могу это проверить

Демо и загрузка

Демо  |  Скачать

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

Также замечу, что при некторой ширине браузера, реклама в aside «обрезается». Я оставил это так, для того чтобы показать, что регионы не расширяются в высоту сами по себе, вы должны учитывать это.

Определение браузера

Этот HTML и CSS код будет смотреться не плохо в браузерах, которые не поддерживают CSS регионы. В них будет просто кусок рекламы внизу экрана. Вместо этого я написал немного JavaScript кода для проверки поддержки и добавления класса к элементу, если поддержка есть.

// Generic Testing Function
var supports = (function() {
   var div     = document.createElement('div'),
       vendors = 'Khtml Ms O Moz Webkit'.split(' '),
       len     = vendors.length;  
   return function(prop) {
      if ( prop in div.style ) return true;  
      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });  
      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         }
      }
      return false;
   };
})();  
// Test
if ( supports('flowInto') ) {
   $("html").addClass('cssregions');
} else {
   $("html").addClass('no-cssregions');
}

Теперь мы можем использовать регионы и быть уверенными, что отдача будет хорошей:

#ad-source {
  display: none;
}
.cssregions #ad-source {
  display: block;
  -webkit-flow-into: ads;
  -ms-flow-into: ads;
}

А также копировать контент из блока #ad-source в aside, то по крайней мере реклама появится там в самых широких окнах браузеров.

Если вы хотите использовать Modernizr, чтобы проверять поддержку регионов, вы должны добавить этот код:

Modernizr.addTest('regions', Modernizr.testAllProps('flow-into'));

Надеюсь, что они добавят регионы как опцию в следующих версиях.

Вещи которые могут быть лучше

• Я надеюсь вы сможете писать стили основываясь на контент. Это может быть проблемой, когда разные стили в разных контейнерах могут вызвать переполнение, которое выкинет контент обратно и вызовет бесконечную печаль. Но, возможно, есть какие-то решения этой проблемы.
• Я надеюсь, что блочные элементы остануться блочными даже если они со свйоством flow-from. Странно, что нам приходится назначать их ширину в 100%.
• Я надеюсь, что height:auto; будет работать на последнем регионе с небольшим количеством контента. Я понимаю, что большинство регионов не могут этого, т.к. они бы просто расширились и перестали бы складываться, но последний регион должен знать сколько контента осталось и расширятся правильно.
• Я надеюсь, что мы сможем использовать flow-from и flow-into на одном и том же элементе. Этот тот случай, когда один семантичный элемент может быть источником  и только если он сжимается или исчезает,  другие регионы заполнятся.

Источник:  css-live.ru