Руководство по созданию удобных и отзывчивых CSS-колонок

Руководство по созданию удобных и отзывчивых CSS-колонок

От автора: С помощью CSS-колонок вы можете создать макет, добавив немного разметки, наподобие страницы печатного издания, который сможет адаптироваться вне фиксированных размеров рабочей области. Браузер, поддерживающий данную технологию, произведет необходимые вычисления, чтобы разбить содержимое на составные части и аккуратно распределить его по колонкам. Если вы уже работаете над созданием резинового макета, тогда колонки будут перестраиваться автоматически. В процессе создания макета, при грамотном подборе свойств, CSS-колонки могут стать интересным решением, которое будет удобным и отзывчивым, а также не будет нарушать принципа отказоустойчивости (graceful degradation).

Где объявлять колонки

Вы можете объявить колонки на уровне любого блочного элемента. Колонки могут быть применены к одиночному элементу или к нескольким элементам, находящимся внутри родительского элемента.

С левой стороны, на картинке внизу, показано применение правил по созданию CSS-колонки для второго абзаца, чтобы разбить содержимое только этого абзаца на колонки. А с правой стороны показано применение правил для целого контейнера с несколькими элементами, что позволяет создать многоколоночный макет.

Как объявлять колонки

Существует три разных способа объявления колонок:

Объявить свойство column-count.

Объявить свойство column-width.

Объявить оба свойства (рекомендуется).

Давайте рассмотрим данные способы объявления колонок.

1. Объявление свойства column-count

Используйте свойство column-count, чтобы указать количество колонок.

article {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

Демо-пример

Количество колонок остается неизменным даже когда ширина окна браузера изменяется (см. ниже gif-изображение)

2. Объявление свойства column-width

Используйте свойство column-width, чтобы указать ширину колонок.

Указанное вами значение не будет являться абсолютной величиной, а скорее будет означать минимальную ширину. Если значение для свойства column-width будет указано, то браузер определит, какое минимальное количество колонок с заданной шириной может поместиться в доступном пространстве. Браузер, производя вычисления, будет также учитывать межстолбцовый промежуток, т.е. пустое пространство между колонками (об этом чуть позже). Затем браузер растянет колонки таким образом, чтобы они равномерно помещались в заданной ширине контейнера.

Например, если вы внимательно посмотрите на абзац из нижеприведенного демо-примера, то обнаружите, что ширина колонки на самом деле больше 150px (а именно такое значение было указано для свойства column-width).

article {
  -webkit-column-width: 150px;
     -moz-column-width: 150px;
          column-width: 150px;
}

Демо-пример

Как только браузер не сможет уместить хотя бы две колонки с указанным значением для свойства column-width, ни одна колонка больше не будет отображаться, и макет снова станет одноколоночным.

На следующем gif-изображении показано, что происходит с колонками, когда окно браузера сужается. В отличие от свойства column-count это свойство уже по умолчанию является отзывчивым.

3. Объявление двух свойств (рекомендуется)

Используйте вместе свойства column-count и column-width, чтобы лучше управлять CSS-колонками. Вы можете объявлять каждое свойство по отдельности или использовать сокращенную запись columns.

Когда объявляются оба свойства, column-count означает максимальное число колонок, а column-width – минимальную ширину этих колонок.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
}

/* или */

article {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
}

Демо-пример

На следующем gif-изображении показано, какой получается результат при совместном использовании свойств column-count и column-width, если окно браузера сужается.

Настройка колонок

Есть еще несколько свойств для осуществления дальнейшей настройки CSS-колонок.

column-gap

Чтобы отрегулировать межстолбцовый промежуток или расстояние между колонками, объявите свойство column-gap. Для большинства браузеров, значением по умолчанию для свойства column-gap является 1em. Вы можете указать любое другое значение при условии, что оно больше или равно 0.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
}

Демо-пример

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

На следующем gif-изображении показано, как браузер создает колонки и сбрасывает расстояние между ними, когда окно браузера сужается.

column-rule

Для того чтобы добавить вертикальную линию между каждой колонкой, нужно объявить свойство column-rule. Это свойство является сокращенной записью для свойств column-rule-width, column-rule-style, column-rule-color. В данной сокращенной записи используется такой же порядок следования свойств, как и для сокращенной записи border.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-rule: 1px dotted #ddd;
     -moz-column-rule: 1px dotted #ddd;
          column-rule: 1px dotted #ddd;
}

Демо-пример

Как и в случае со свойством column-gap, вертикальная линия исчезнет, как только окно браузера станет слишком узким (см. ниже gif-изображение).

column-span

Для того чтобы временно прервать поток текста, разбитого на колонки, нужно применить к дочернему элементу свойство column-span. В настоящее время, браузер Firefox не поддерживает данное свойство (но вы можете проголосовать за его поддержку на сайте Bugzilla).

На следующем изображении показан заголовок, который указывает на начало новой главы в рассказе, но он расположен внутри потока текста, разбитого на колонки.

Чтобы вырвать заголовок из данного потока, нужно назначить ему свойство column-span: all. Данная запись позволит временно прервать поток текста, который разбивается на колонки. Это даст возможность создать отступ у заголовка и перенести его на новую строку, после чего, начиная со следующего элемента, текст продолжит разбиваться на колонки.

h3 { 
  -webkit-column-span: all; 
          column-span: all; 
}

Демо-пример

column-fill

Чтобы изменить то, как колонки наполняются контентом, нужно объявить свойство column-fill. В данный момент это свойство поддерживается только браузером Firefox.

Когда для элемента, который разбит на колонки, указывается высота, браузер Firefox ведет себя не так, как остальные браузеры. Firefox будет автоматически создавать одинаковые колонки, равномерно распределяя в них контент, в то время как другие браузеры будут просто последовательно заполнять колонки контентом.

На следующем изображении показано, как ведет себя Firefox по сравнению с другими браузерами, когда для элемента, разбитого на колонки, указана высота.

Вы можете управлять поведением браузера Firefox, используя запись column-fill: auto. В этом случае Firefox будет заполнять колонки последовательно (см. демо-пример).

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -moz-column-fill: auto;
       column-fill: auto;
  height: 350px;
}

Демо-пример

Поскольку необходимо указывать высоту для использования свойства column-fill в Firefox, «резиновость» макета будет нарушена из-за фиксированной высоты. Контент будет вынужден растягиваться по горизонтали, т.к. возможности сделать это по вертикали у него просто нет (см. ниже gif-изображение). В этом случае, чтобы решить вопрос с высотой, можно использовать медиа-запрос (об этом чуть позже).

Остальные браузеры не поддерживают свойство column-fill и будут последовательно заполнять колонки контентом, когда для элемента, разбиваемого на колонки, будет задана высота. Стоит заметить, что когда для элемента, разбиваемого на колонки, задается высота, то вне зависимости от браузера или использования свойства column-fill, макет перестанет быть резиновым из-за фиксированных ограничений по высоте.

Ограничения

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

Контент выходит за пределы области просмотра по горизонтали

Как видно из раздела, где говорится о свойстве column-fill, если для элемента, разбиваемого на колонки, задана высота, то сам элемент будет растягиваться по горизонтали, чтобы уместить контент. Выход контента за пределы области просмотра приведет к тому, что вид макета будет испорчен, и пользователь будет просматривать содержимое, двигаясь в другом направлении.

Возможное решение: создать медиа-запрос min-width, чтобы в нем прописать правило для параметра высоты.

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

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -moz-column-fill: auto;
       column-fill: auto;
}
@media (min-width: 500px) {
  article {
    height: 350px;
  }
}

Демо-пример

На следующем gif-изображении показано, что когда колонки появляются, правило для параметра высоты не действует, и колонки растягиваются по вертикали.

Колонки становятся длиннее области окна просмотра

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

Возможное решение: создать медиа-запрос min-height, чтобы активировать колонки.

В следующем примере колонки будут появляться только тогда, когда будет выполняться условие min-height: 400px;для элемента, разбиваемого на колонки. Я пришла к данному значению путем уменьшения ширины окна браузера до того момента, когда колонки будут появляться. Далее я подстроила высоту окна браузера таким образом, чтобы определить, когда колонки будут скрываться за пределами области окна просмотра. В результате я получила значение для медиа-запроса min-height.

@media (min-height: 400px) {
  article {
    -webkit-columns: 2 350px;
       -moz-columns: 2 350px;
            columns: 2 350px;
  }
}

Демо-пример

На следующем gif-изображении показано, что элемент, разбиваемый на колонки, должен быть как минимум 400px по высоте, чтобы контент начал разбиваться на колонки.

Поддержка

CSS-колонки имеют достаточно неплохую поддержку (IE10+) и по-прежнему требуют наличия вендорных префиксов для всех свойств. Более подробную информацию о свойствах, отвечающих за многоколоночность, вы можете посмотреть на сайте Can I Use….

Даже если ваш любимый браузер не поддерживает многоколоночных макетов, помните о том, что по принципу отказоустойчивости они сводятся к одноколоночному макету. CSS-колонки подобны эскалаторам, доставляющим контент (как это выразительно подметил американский комик Митч Хедберг (Mitch Hedberg)):

(прим. пер.: эскалатор не может сломаться, он может только превратиться в лестницу)

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

Автор: Katy Decorah (редакция: Jason Morris)

Источник: http://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Сергей

    Материал хорошо, но старый. Давно уже видел такой пост на Хабре.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree