Главная > CSS/Style Sheets > CSS3 Regions: как это работает?

CSS3 Regions: как это работает?


8 июля 2013, 13:45. Разместил: Design FactoRy
Одно из главных преимуществ печатной продукции – вроде журнала или газеты – перед веб-сайтами заключается в том, что оно позволяет нам располагать контент в более чем одной колонке, а порой использовать даже гораздо более сложную структуру распределения контента, и он все равно останется читабельным. Для примера вы можете взглянуть на скриншот, приведенный ниже.

CSS3 Regions: как это работает?

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

Чтобы сделать веб-разметку более гибкой по примеру печатной продукции, был введен принципиально новый СSS3-модуль под названием CSS3 Regions. Вместо того, чтобы распределять контент на несколько элементов, данный модуль позволяет располагать его в определенных областях (regions) страницы.

Давайте рассмотрим работу модуля на примере.

Включение экспериментального свойства

Данный модуль все еще находится в экспериментальной стадии, и на данный момент в Google Chrome и Internet Explorer поддерживается с префиксом. Если вы используете Google Chrome, вам нужно сначала включить поддержку экспериментальных свойств. Чтобы сделать это, пройдите в chrome://flags/ и включите функцию “Enable experimental WebKit features” (пер. - Включить экспериментальные функции WebKit)

CSS3 Regions: как это работает?

Базовый пример применения

В данном примере у нас будет два типа контента: основной контент и дополнительный. Мы поместим основной контент в области Region 1, 2 и 4, а дополнительный контент будет отображен в области Region 3, как показано на изображении ниже.

CSS3 Regions: как это работает?

HTML-код

Давайте приступим к разбору HTML-разметки.

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

<header class="cf">
<h1><span>Lorem ipsum dolor sit amet,</span> consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut.</h1>
<h2>labore et dolore magna aliqua</h2>
</header>

<article class="cf">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</article>

<aside>
<p><img src="img/stat.jpg" width="500" height="300"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</aside>

Затем нам нужно добавить разметку областей, в которых должен быть размещен контент. Не важно, добавим мы эту разметку сверху или снизу самого контента.

<div class="regions cf">
<div id="region-1" class="region cf"></div>
<div id="region-2" class="region"></div>
<div id="region-3" class="region"></div>
<div id="region-4" class="region cf"></div>
</div>

CSS-код

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

.demo-wrapper #region-1,
.demo-wrapper #region-4 {
width: 100%;
height: 250px;
}
.demo-wrapper #region-4 {
height: 400px;
}
.demo-wrapper #region-2,
.demo-wrapper #region-3 {
width: 50%;
height: 700px;
margin-bottom: 25px;
}

Для того чтобы добавить контент в области, мы используем новые CSS-свойства flow-into и flow-from. Эти параметры используются для того, чтобы связать контент и области. Чтобы контент простирался на эти области, мы можем использовать следующие правила стилизации.

article {
-webkit-flow-into: article;
flow-into: article;
}
.demo-wrapper aside {
-webkit-flow-into: aside;
flow-into: aside;
}

#region-1,
#region-2,
#region-4 {
-webkit-flow-from: article;
flow-from: article;
}
#region-3 {
-webkit-flow-from: aside;
flow-from: aside;
}

При помощи некоторых дополнительных декоративных стилей мы можем получить следующий привлекательный результат.

CSS3 Regions: как это работает?

Вы можете посмотреть демо-страницу, чтобы увидеть работу модуля в действии.

Посмотреть демо | Скачать исходный код

Дополнительные ссылки

* Документация по CSS3 Regions - W3C
* Примеры использования CSS Regions - Adobe
* Распределение контента при помощи CSS3 Regions - CSS-Tricks
Вернуться назад