Никогда раньше разработка комплексных гибких шаблонов не была такой простой, но CSS3 действительно исключил некоторые сложнейшие препятствия.
Такие CSS3-свойства как Flexbox и Columns позволили нам использовать сложную разметку в повседневной работе, и это лишь часть из одного из главных нововведений под названием CSS Regions.
CSS Regions позволяет вам разделять контент на серию контейнеров на отдельной странице. Это эквивалент линковки текстовых блоков в приложении вроде того, что можно было видеть в InDesign. Он позволяет нам добиться такой разметки, которая ранее была возможна только при помощи размытия черты между данными и стилями.
Браузерная поддержка
Как и всегда, браузерная поддержка далека от идеала.
CSS Regions пока что находится в черновом варианте, что означает, что использовать его можно лишь в экспериментальных целях. Изначально это свойство поддерживал лишь один браузер – Internet Explorer 10 (и мы не шутим), даже несмотря на то, что IE10 в качестве источника контента использовал iframe.
Safari вроде как должен поддерживать это свойство с приставкой.
В Chrome вы можете протестировать поддержку, открыв браузер, введя в адресную строку about:flags и активировав enable-experimental-webkit-features, после чего браузер нужно будет перезагрузить.
К счастью, существует некий javascript polyfill, разработанный Adobe, который активирует функционал CSS Regions в браузерах, которые на данный момент не поддерживают его. Найти его можно на github.
Применение CSS Regions
Так как предназначение CSS Regions заключается в том, чтобы позволить вашему тексту распространяться на разные контейнеры, первое, что вам потребуется, это какой-нибудь текст:
<div class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque. Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae. </div>
А затем несколько контейнеров:
<div class="containers"></div> <div class="containers"></div> <div class="containers"></div>
Теперь, когда у нас есть основа, мы можем связать контейнеры при помощи ‘flow-into’ и ‘flow-from’. В примере вы наверное обратили внимание, что мы использовали префикс –webkit-.
.text {
-webkit-flow-into: text-flow;
padding: 0;
margin: 0;
color: #F2F2F2;
font-family: helvetica, arial;
font-size: 16px;
line-height: 22px;
}
.containers{
-webkit-flow-from: text-flow;
background: #333333;
padding: 5px;
margin-top: 100px;
width: 200px;
height: 300px;
float: left;
margin-right: 20px;
}
Если вы проверите этот пример в браузере, то увидите, что текст просто перетекает из одного контейнера в другой. Если вы примените к этим контейнерам позиционирование, то текст все равно будет перетекать так, как нужно.
Учимся использовать flow-into
-webkit-flow-into: text-flow;
Это свойство принимает идентификатор как значение. Когда вы вносите значение в это свойство, оно становится частью именованного потока, и прекратит рендеринг в качестве стандартного потока страницы. Этот функционал можно отключить, указав в свойстве значение none.
Название потока может быть установлено по вашему усмотрению, просто убедитесь, что все сочетается. У нас также может быть несколько элементов с одним и тем же именем потока, как можно видеть в нашем примере.
Здесь все не ограничивается только текстом, так как мы можем использовать изображения, списки и много других HTML-элементов.
Учимся использовать flow-from
-webkit-flow-from: text-flow;
Мы используем это свойство для того, чтобы указать, какие элементы должны принимать указанный поток.
Значение – это название потока, который мы указали в свойстве flow-into.
Учитывайте, что любые стили контента, которые вы применяете к оригинальному тексту, будут сохранены по всему потоку. Так что, если окрасите текст в синий цвет, то он будет синим во всех контейнерах.
В завершение
Чтобы увидеть пример CSS Regions в действии, взгляните на это.
Браузерная поддержка CSS Regions на данный момент очень слаба, и пройдет еще много времени до тех пор, когда мы сможем свободно использовать его. Но гибкость данного свойства просто впечатляет, и скорее всего после введения полной поддержки это свойство останется с нами на долгие годы.
Впечатлены ли вы работой CSS Regions? Как думаете, как скоро мы сможем использовать это свойство? Поделитесь с нами размышлениями в комментариях.
