Главная > CSS/Style Sheets > CSS3 Regions: как это работает?
CSS3 Regions: как это работает?8 июля 2013, 13:45. Разместил: Design FactoRy |
Одно из главных преимуществ печатной продукции – вроде журнала или газеты – перед веб-сайтами заключается в том, что оно позволяет нам располагать контент в более чем одной колонке, а порой использовать даже гораздо более сложную структуру распределения контента, и он все равно останется читабельным. Для примера вы можете взглянуть на скриншот, приведенный ниже. Тем не менее, ввиду того, каким образом контент принято распределять в мире веб, может быть довольно сложно и малоэффективно располагать контент в подобной структуре. Чтобы сделать веб-разметку более гибкой по примеру печатной продукции, был введен принципиально новый СSS3-модуль под названием CSS3 Regions. Вместо того, чтобы распределять контент на несколько элементов, данный модуль позволяет располагать его в определенных областях (regions) страницы. Давайте рассмотрим работу модуля на примере. Включение экспериментального свойства Данный модуль все еще находится в экспериментальной стадии, и на данный момент в Google Chrome и Internet Explorer поддерживается с префиксом. Если вы используете Google Chrome, вам нужно сначала включить поддержку экспериментальных свойств. Чтобы сделать это, пройдите в chrome://flags/ и включите функцию “Enable experimental WebKit features” (пер. - Включить экспериментальные функции WebKit) Базовый пример применения В данном примере у нас будет два типа контента: основной контент и дополнительный. Мы поместим основной контент в области Region 1, 2 и 4, а дополнительный контент будет отображен в области Region 3, как показано на изображении ниже. HTML-код Давайте приступим к разбору HTML-разметки. Модуль CSS3 Regions не имеет строгой структуры расположения контента, поэтому мы можем просто добавить дополнительный код за пределами основного следующим образом (тем не менее, как уже было отмечено выше, нам нужно отобразить его в центре основного контента).
Затем нам нужно добавить разметку областей, в которых должен быть размещен контент. Не важно, добавим мы эту разметку сверху или снизу самого контента.
CSS-код В каскадных таблицах стилей мы указываем ширину и высоту областей. Высота нужна для того, чтобы определить область преломления контента, иначе контент может «перескочить» и на другие области.
Для того чтобы добавить контент в области, мы используем новые CSS-свойства flow-into и flow-from. Эти параметры используются для того, чтобы связать контент и области. Чтобы контент простирался на эти области, мы можем использовать следующие правила стилизации.
При помощи некоторых дополнительных декоративных стилей мы можем получить следующий привлекательный результат. Вы можете посмотреть демо-страницу, чтобы увидеть работу модуля в действии. Посмотреть демо | Скачать исходный код Дополнительные ссылки * Документация по CSS3 Regions - W3C * Примеры использования CSS Regions - Adobe * Распределение контента при помощи CSS3 Regions - CSS-Tricks Вернуться назад |