CSS regions

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

Поток содержания

В обычных документах HTML текст может отображаться в разных колонках, но текст в каждой из этих колонок отдельный. Если вы хотите отображать текст в несколько колонок или использовать другие, более сложные механизмы области, вам нужно будет вручную создавать колонку для каждого региона в соответствии с текстом. Это не очень хорошо работает, когда пользователь увеличивает текст или даже если текст имеет разные шрифты в системе чем указанны для текста. Такой подход делает невозможным адаптацию содержимого при изменении размера окна или при отображении содержания страницы на мобильном устройстве в книжной или альбомной ориентации.

Содержимое потока CSS3 regions
Текст в три колонки различной ширины.

Что делать если нужно указать отдельно поток содержания (например, текст и изображение), и как поток должен проходить через цепь колонок?

Для того чтобы сделать это, группа веб-стандартов W3C предложила свойство CSS3 regions. Это позволит объединить обычное содержание HTML в поток.

Разметка CSS3 regions
Разметка CSS3 regions для трех колонок

Разметка CSS для трех колонок:

#source {
       flow-into: main-thread;
    }

    .region {
        flow-from: main-thread;
        background: #C5DFF0;
    }

HTML

<div id="source">
Lorem ipsum dolor ... 
</div>
<div id="region" class="region"></div>
<div id="region" class="region"></div>
<div id="region" class="region"></div>

Вы можете объединить несколько потоков на одной странице.

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

CSS3 regions для трех колонок.
CSS3 regions для трех колонок.
к меню ↑

Произвольные формы

С помощью CSS shapes можно менять формы содержания текст как на рисунке ниже. Вы можете использовать это свойство в сочетании или независимо от содержимого потока для создания более интересного дизайна.

Формы CSS3 regions
Формы содержащие текст.

Разметка текста в виде сердца выглядит следующим образом:

CSS

.circle{
	/* shape the element as a circle */
	shape-inside: polygon(0px, 150px /* ...more points */);
}

.heart{
	/* shape the element as a heart */
	shape-inside: polygon(150px, 32px /* ...more points */);
}

HTML

<div class="circle"></div>
<div class="heart"></div>
к меню ↑

Исключения произвольной формы

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

Исключения произвольной формы
Формы, вокруг которых обтекает текст.

CSS

.exclusion{
        /* flow text around this element */
        shape-outside: polygon(…);
    }

HTML

<div class="exclusion circle">
Lorem ipsum dolor [...]
</div>
к меню ↑

Стиль для области регионов

Обычно в журнальных или газетных статьях, назначают другой стиль для содержимого протекающего через конкретную область дизайна. Мы называем эту область моделирование. Пример показывает, что текст протекает в первой области (включая Заголовок статьи) выполнен темно-синим, в то время как остальной текст серого цвета.

Стиль текста в зависимости от региона
Стиль текста в зависимости от региона где впадает

CSS

p {
       color: gray:
   }

   @region-style #region_1 {
       p {
           color: #0C3D5F;
       }
   }

HTML

<div id="article">
  <h1>Introduction</h1>
   This is an example [...]
</div>
<div id="region_1"></div>
<div id="region_2"></div>
<div id="region_3"></div>
<div id="region_4"></div>
к меню ↑

Поддержка

Для ie10 и ie11 требуются префиксы CSS. Скачать полифилл CSS regions можно на странице сайта Adobe.