С появлением большого количества мобильных устройств сайты становятся все более «адптивными», это требует новых, более удобных способов отображения контента. В скором будущем помочь в этом смогут CSS-регионы (CSS Regions) — новый веб-стандарт Adobe.

Говоря просто, CSSRegions предназначены для «умного» обтекания объектов текстом. Пока этот стандарт не готов к использованию на живых сайтах, но уже сейчас можно поэкспериментировать с регионами.

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


Проверить, поддерживает ли CSS regions ваш браузер можно на сайте caniuse.com. В Хроме включаем поддержку следующим образом:

  1. Заходим в экспериментальные функции — chrome://flags
  2. Находим пункт «Включить CSS-регионы (Enable CSS regions)» и включаем его:

  3. Перезапускаем Хром


Один блок текста в несколько колонок (демо)


Это самый простой пример использования CSS-регионов — один блок текста перетекает в три колонки:



HTML простой:

<p class="example-text">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>

<div class="regions"></div>
<div class="regions"></div>
<div class="regions"></div>


CSS не сложнее:

.example-text {
	-webkit-flow-into: example-text-flow;
	padding: 0;
	margin: 0;
}
  
.regions {
	-webkit-flow-from: example-text-flow;
	border: 1px solid black;
	padding: 2px;
	margin: 5px;
	width: 200px;
	height: 50px;
}


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

Расположение блоков внутри контента (демо)


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

Например вот так выглядит страница с контентом и рекламными блоками:



А на мобильном устройстве на необходимо, чтобы получился вариант справа:



HTML-код конструкции:

<section class="main-content">
  <article> ... </article>
  <div class="ad-region-1">
    <!-- empty, ads flow into here as needed -->
  </div>
  <article> ... </article>
  <div class="ad-region-2">
    <!-- empty, ads flow into here as needed -->
  </div>
  <article> ... </article>
  <div class="ad-region-3">
    <!-- empty, ads flow into here as needed -->
  </div>
</section>
<aside>
   <!-- Fallback content in this flow region, probably clone #ad-source -->
</aside>
<!-- Source of flowing content, essentially hidden as an element -->
<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>


CSS для блоков рекламы — «ad-source»:

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


CSS для контента:

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


CSS для разной ширины окна браузера:

[class^='ad-region'] {
  display: none;
  height: 155px;
  width: 100%; /* Weird that this is required */
}

@media (max-width: 800px) {
  [class^='ad-region'] {
    display: block;
  }
  [class^='ad-region']:last-child {
    height: 300px; /* I wish height auto worked */
  }
  aside {
    display: none;
  }
}


Примеры от Adobe



Отличные примеры использования CSS-регионов показала сама компания Adobe.

Еще можно будет делать такое:




А при использовании Javascript можно заставить текст динамически обтекать объекты:





Документация


Подробная документация по CSS-регионам от Adobe. Пока еще находится в разработке и постоянно меняется.

Использованные материалы и полезные ссылки по теме