Веб-дизайнеры во многом ограничены доступными свойствами шаблона.

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

Поддержка.

Regions – это новая часть спецификации CSS, поэтому еще не все браузеры реализовали данную функцию. В некоторых случаях, чтобы их использовать, вам придется активировать флажок. Regions недавно получили поддержку в iOS7 Safari 7, а также Safari 6.1. Компания Adobe создала список браузеров, поддерживающих данную функцию, а также инструкцию по подключению Regions и других свойств. Тем не менее, поддержка Regions постоянно растет. Для большей уверенности относительно того, в каких браузерах реализована поддержка regions и другие доступные функции ознакомьтесь со страницей Adobe «Поддержка CSS Regions».

Regions 101.

CSS regions позволяет нам распределить контент в нескольких элементах-контейнерах. Этот класс обеспечивают возможность создания потока, который состоит из контента и который может использоваться в рамках нескольких элементов. Также можно создать region цепочку, которая представляет собой набор элементов потока. Достаточно всего лишь один раз определить эти элементы и далее будет происходить динамическое заполнение области region цепочки. Таким образом, мы сможем задавать вертикальный размер наших контейнеров, не беспокоясь о необходимости обрезать контент, который будет просто перетекать в следующий элемент цепочки. Благодаря подобному механизму у шаблона с адаптивным дизайном появляются новые возможности.

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

#myContent {
	flow-into: myNamedFlow;
}

.myRegion {
	flow-from: myNamedFlow;
}

Ваша HTML разметка будет содержать элемент с контентом и поддерживать все объекты regions, через которые будет проходить поток контента. При использовании regions, элемент с контентом нельзя будет увидеть на его реальном месте. Вся HTML разметка в пределах region элементов исчезнет, уступив место потоку контента. В связи с этим, внутри region элементов мы можем использовать указатель места заполнения или резервный контент.

<div class="myRegion"></div>
<div class="myRegion"></div>
<div class="myRegion"></div>

<div id="myContent">...</div>

При использовании regions поток контента не будет считаться его дочерним элементом. Вы будете изменять только место отображения контента. В соответствии с DOM (объектная модель документов, модель DOM обеспечивает стандартный интерфейс для доступа и управления HTML-объектами) всё остается прежним, поэтому контент не наследует стили из области, в которой он размещается. Вместо этого, CSS спецификация определяет псевдо-селектор, ::region(), который позволяет управлять стилем контента внутри region. Вы можете применить псевдо-элемент для выбора region, а затем передать селектор в качестве аргумента с указанием элементов, которые будут стилизированы в пределах определенного объекта region.

.myRegion::region(p){
    /*styles for all the paragraphs flowing inside our regions*/
}

Адаптивный дизайн с Regions.

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

Использование классов Region позволяет упростить адаптивный дизайн сразу в нескольких направлениях. Во-первых, вам больше не придется полагаться на значение height: auto каждого элемента, чтобы определить подходит ли контент. Вместо этого вы можете позволить контенту протекать через различные элементы в пределах шаблона. Это означает, что контент не привязан к определенному месту, а скорее адаптируется к запланированному дизайну. Вы можете использовать height: auto в последнем элементе цепочки region. Это позволит вам гарантировать, что оставшийся контент будет отображаться надлежащим образом. Вы можете увидеть эту технику в примере CodePen ниже.

Смотрите Pen Region Auto Height от СиДжей Гэммона (@cjgammon) на CodePen.

Regions и события.

Вы можете использовать JavaScript события совместно с Regions. Вы сможете управлять шаблоном и гарантируете, что контент отображается правильно. Regions спецификация определяет события, которые вы можете использовать для создания определенных условий. Событие regionoversetchange координирует изменение regionOverset свойства для любого region. Наличие такого события необходимо в ситуациях, когда пользователь изменяет размер страницы, растягивает контейнер элемента таким образом, что контент выходит за рамки допустимой области. Значение regionOverset может быть либо fit, overset, либо empty. Значение empty говорит о том, что внутри region отсутствует содержимое. Свойство regionOverset принимает значение overset, когда последний region в цепочке не может отобразить весь оставшийся контент, что делает некоторые области нечитаемыми.

Значение fit подгоняет контент таким образом, чтобы он соответствовал отведенной области, либо полностью (если находится в основной части цепи), либо же частично (если это последний region в цепи). То, как вы реагируете на эти события, будет зависеть от дизайна, содержимого и других особенностей вашего шаблона. Эти события могут быть использованы для динамического добавления или удаления областей, а также для применения класса, который изменяет компоновку. Вы можете ознакомиться с примером данного метода в CodePen ниже.

Примечание: некоторые реализации предполагают вызов события regionlayoutupdate, вместо события regionoversetchange, основанного на более ранних версиях спецификации.

Смотрите Pen OkmGu от СиДжей Гэммона (@cjgammon) на CodePen.

Regions и информационные запросы.

Regions могут полностью определяться в CSS, что позволяет достаточно легко использовать их в сочетании с информационными запросами. Помимо изменения размера и положения элементов, вы можете полностью изменить принцип назначения элементов, определяемых в качестве regions. Вы также можете установить region для свойства display: none, которое позволит пропустить целую область в region цепи. Данный механизм предоставляет возможность с легкостью удалять отдельные области из шаблона, не беспокоясь об изменении расположения ко� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров