Введение в CSS Regions



    С появлением большого количества мобильных устройств сайты становятся все более «адптивными», это требует новых, более удобных способов отображения контента. В скором будущем помочь в этом смогут CSS-регионы (CSS Regions) — новый веб-стандарт Adobe.

    Говоря просто, CSSRegions предназначены для «умного» обтекания объектов текстом. Пока этот стандарт не готов к использованию на живых сайтах, но уже сейчас можно поэкспериментировать с регионами.

    Поддержка браузерами


    Проверить, поддерживает ли CSS regions ваш браузер можно на сайте caniuse.com. В Хроме включаем поддержку следующим образом:

    1. Заходим в экспериментальные функции — chrome://flags
    2. Находим пункт «Включить CSS-регионы (Enable CSS regions)» и включаем его:

    3. Перезапускаем Хром


    Один блок текста в несколько колонок (демо)


    Это самый простой пример использования CSS-регионов — один блок текста перетекает в три колонки:



    HTML простой:

    <p class="example-text">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
    
    <div class="regions"></div>
    <div class="regions"></div>
    <div class="regions"></div>
    


    CSS не сложнее:

    .example-text {
    	-webkit-flow-into: example-text-flow;
    	padding: 0;
    	margin: 0;
    }
      
    .regions {
    	-webkit-flow-from: example-text-flow;
    	border: 1px solid black;
    	padding: 2px;
    	margin: 5px;
    	width: 200px;
    	height: 50px;
    }
    


    Результат можно посмотреть в демо, там же несколько примеров чуть более сложнее.

    Расположение блоков внутри контента (демо)


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

    Например вот так выглядит страница с контентом и рекламными блоками:



    А на мобильном устройстве на необходимо, чтобы получился вариант справа:



    HTML-код конструкции:

    <section class="main-content">
      <article> ... </article>
      <div class="ad-region-1">
        <!-- empty, ads flow into here as needed -->
      </div>
      <article> ... </article>
      <div class="ad-region-2">
        <!-- empty, ads flow into here as needed -->
      </div>
      <article> ... </article>
      <div class="ad-region-3">
        <!-- empty, ads flow into here as needed -->
      </div>
    </section>
    <aside>
       <!-- Fallback content in this flow region, probably clone #ad-source -->
    </aside>
    <!-- Source of flowing content, essentially hidden as an element -->
    <div id="ad-source">
      <a href="#"><img src="ads/1.jpg"></a>
      <a href="#"><img src="ads/2.jpg"></a>
      <a href="#"><img src="ads/3.jpg"></a>
      <a href="#"><img src="ads/4.png"></a>
    </div>
    


    CSS для блоков рекламы — «ad-source»:

    #ad-source {
      -webkit-flow-into: ads;
      -ms-flow-into: ads;
    }
    


    CSS для контента:

    aside, [class^='ad-region'] {
      -webkit-flow-from: ads;
      -ms-flow-from: ads;
    }
    


    CSS для разной ширины окна браузера:

    [class^='ad-region'] {
      display: none;
      height: 155px;
      width: 100%; /* Weird that this is required */
    }
    
    @media (max-width: 800px) {
      [class^='ad-region'] {
        display: block;
      }
      [class^='ad-region']:last-child {
        height: 300px; /* I wish height auto worked */
      }
      aside {
        display: none;
      }
    }
    


    Примеры от Adobe



    Отличные примеры использования CSS-регионов показала сама компания Adobe.

    Еще можно будет делать такое:




    А при использовании Javascript можно заставить текст динамически обтекать объекты:





    Документация


    Подробная документация по CSS-регионам от Adobe. Пока еще находится в разработке и постоянно меняется.

    Использованные материалы и полезные ссылки по теме


    Поделиться публикацией

    Похожие публикации

    Комментарии 14

      +8
      Вот этого действительно сейчас не хватает! Только, к сожалению, пока это стандарт будет принят всеми браузерами, пройдет несколько лет(((
        +3
        Не факт. Я могу предположить, что через год во всех последних браузерах уже будет поддержка, а какой-нить западный разраб напишет скрипт для старых браузеров, да и всё.
          +2
          Даже если кто-то и напишет, боюсь это будет настолько тормозить, что о сколь-либо серьёзном пррименении вряд ли придётся говорить. Представьте сами, надо считать ширину строчек текста, для чего нужна куча перерисовок, это всё будет очень и очень медленно. Вот почему надо, чтобы это делалось средствами браузера.
            –1
            Та-да :(
        +4
        о, как же это будет тормозить!
        *про последние 3 шота с машинкой*
          +4
          Радует, что при рисовании мобильного устройства (планшета) все чаще перестают рисовать уже известные всем планшет с экраном 4:3 и кнопкой внизу в центре, а рисуют абстрактный прямоугольник 16:9/16:10 явно не указывающий производителя и т.д. А расширение нужное, и с приходом популярности планшетом, которые имеют признак смены ориентации будет полезно перестраивать интерфейс.
          Например хабр читать на Kindle Fire (или Nexus7) было бы удобнее, если бы правая панель+отступы в книжной ориентации не тратили пространство.
            0
            согласен про хабр, мне приходится делать зум текста на всю рабочую область, в итоге не так уж страшно
            +3
            замечательные функции. Достала уже прямоугольная формация. +++
              0
              угу, давно пора
              +1
              Красота-то какая! Как приятно видеть внедряемые новинки в старых добрых вещах. Вот прям сижу, гляжу и насмотреться не могу!
                0
                Подобный эффект обтекания текста уже давным давно доступен. С помощью размещения внутри основного блока нескольких флоатных элементов, которые ограничат силуэт обьекта. В реализации от Эдоби они только упростили сам подход.
                  +1
                  Обтекание, да, хоть и там есть нюансы. А вот перетекание текста из одного блока в другой — нет и вряд ли будет не в браузерной реализации.
                  0
                  Для обтекания вообще то создается другая спецификация CSS Exclusions and Shapes Module Level 3, реализация которой есть в IE10.
                  Интересная статья по теме
                    0
                    Будем ждать с нетерпением!

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое