—»     —»   CSS3 Regions: как это работает?
  Раздел: CSS/Style Sheets   Нет комментариев  

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

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

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
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 6994   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031