CSS-области и почему вы будете их использовать

CSS-области (CSS Regions) — это рабочий черновик спецификации, которая позволяет распределять текст между различными частями страницы. Самый простой пример использования: создание колонок текста, в которой каждая из колонок является отдельной областью. Однако огромным преимуществом CSS-областей является то, что у них нет ограничений по размеру или возможному размещению. Колонки едва ли даже поверхностно отражают весь потенциал CSS-областей, о чём можно судить по созданной для них отдельной спецификации W3C.

Самый быстрый способ понять насколько огромными возможностями обладают области — посмотреть на пример с изменением размера окна. В этом примере используется один div-блок с содержимым и четыре области, которые это содержимое заполняет. Перераспределение между областями происходит при изменении размера окна, при чём каждому слову органично отведено место в соответствующей области. На снимке экрана можно увидеть конечный результат:

Чтобы испытать пример на codepen, прочтите следующие три раздела, в которых я объясню:

1. где/когда можно использовать CSS-области (состоянием на сентябрь 2013 года).
2. Как использовать CSS-области.
3. Почему мы, без сомнения, будем использовать CSS-области в будущем.

После прочтения этой статьи, надеюсь, вы сможете добавить эти чудесные области на ваш собственный сайт!

Где и когда можно использовать CSS-области?

Как работают css-регионы вы можете посмотреть в нашем примере, но только при условии, что вы запустите его в самой свежей версии браузера. Сaniuse говорит нам, что css-регионы будут работать в IE10 и выше и бета-версии Safari, но на самом деле все не так плохо:

• в IE10+ они работают, но контент должен быть помещён в iframe. (Пока не будем обращать на это внимание).
• В Safari 6.1 (пока доступна бета-версия) они работают без оговорок, но с префиксом -webkit-.
• В MobileSafari под iOS7 они работают без оговорок, но с префиксом -webkit-.
• В Google Chrome Canary (или версии 29+) они работают если активирована «Поддержка экспериментальных функций», также с префиксом -webkit-.
• В Opera они работают только если это версия на базе движка webkit, с префиксом -webkit-.
• Firefox CSS-области пока не поддерживает, отдавая предпочтение черновику CSS Overflow, в котором предложены решения для тех же ситуаций, которые покрывают области.

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

Как использовать CSS-области

Для CSS-областей нужны два простых компонента: блок, в который будет помещено содержимое, и один или несколько блоков, в которые оно будет распределяться. Это отображено в следующем дереве элементов:

<div class="content">Lorem ipsum и т.д… Весь контент помещаем сюда</div>
<div class="myregion" id="region1"></div>
<div class="myregion" id="region2"></div>
<div class="myregion" id="region3"></div>

Следующий CSS превращает блоки myregion в CSS-области. Если добавить float и ограничение по ширине блоков, то контент будет распределен между тремя колонками:

.content {
  flow-into: myipsum;
  -webkit-flow-into: myipsum;
}

.myregion {
  flow-from: myipsum;
  -webkit-flow-from: myipsum;

  float: left;
  width: 100px;
}

В примере выше myipsum — это имя, которым мы назвали данную группу областей. Отдельные имена позволяют использовать области для разметки разных частей контента.

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

Взгляните на интерактивный пример на codepen, который я создал, чтобы посмотреть, как контент распределяется по областям.

Почему мы, без сомнений, будем использовать CSS-области в будущем

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

Можно создать отзывчивую вёрстку, которая будет подстраиваться для наилучшего отображения на телефоне, планшете или настольном компьютере, а также под огромные дисплеи вместо того, чтобы растягиваться до какой-то определённой или до абсурдно бесконечной ширины.

Когда поддержка браузеров станет более обширной, наступит время таких явлений как Book.js. Это экспериментальная библиотека на Javascript, которая на основе семантической разметки и простых настроек делает веб-страницы похожими на книжные страницы. Под капотом у неё CSS-области. В этом источнике можно просмотреть полную инструкцию по использованию.

И наконец, сочетание жестов на сенсорных устройствах и областей даёт нам возможность разрабатывать действительно интересные интерактивные приложения. Это можно наблюдать уже в MobileSafari под iOS7 (согласно докладу о iOS7 представленному на международной конференции разработчиков).

Следующие шаги

Установите браузер, поддерживающий CSS-области — можете скачать Google Chrome Canary и активировать «Поддержку экспериментальных функций» на странице about:flags, IE10+ или бета версию браузера от центра разработчиков Safari.

Поэкспериментируйте с примером из codepen: скопируйте его, разберите по частям, усовершенствуйте, а затем разместите ссылку на ваше творение в комментариях.

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

И что бы вы не делали с областями, получайте удовольствие!