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

Введение в CSS Regions



Никогда раньше разработка комплексных гибких шаблонов не была такой простой, но CSS3 действительно исключил некоторые сложнейшие препятствия.

Такие CSS3-свойства как Flexbox и Columns позволили нам использовать сложную разметку в повседневной работе, и это лишь часть из одного из главных нововведений под названием CSS Regions.

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

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

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

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


Популярные публикации


















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