От автора: для некоторых читать огромные куски текста затруднительно. Люди стараются не пропустить строку, а не сосредоточиться на тексте. Данную проблему можно легко решить с помощью колонок. В печатных журналах колонки уже давно распространены. С помощью модуля CSS Multi-column Layout Module мы можем воссоздать эффект нескольких колонок на веб-сайте.
Затруднение при использовании нескольких колонок в дизайне вызывает только тот факт, что мы не можем контролировать размер документа. В этом уроке я покажу вам, как создать адаптивный шаблон с несколькими колонками, который будет отлично смотреться на различных размерах экрана. Начнем мы с основ и постепенно перейдем к более сложным вещам.
Поддержка в браузерах
Поддержка многоколоночного макета отличная в том случае, если вы не против вендорных префиксов. По данным статистики Can I use данная функция поддерживается в 95.32% браузеров. Несколько браузеров, такие как IE10+, Edge и Opera Mini полностью поддерживают многоколоночные макеты. Другим же браузерам, таким как Firefox и Chrome нужны префиксы.
Если вы поддерживаете старые браузеры, вам пригодится старый полифил polyfill (т.е. IE9 и ниже). Ну и если браузер не поддерживает несколько колонок, то по технике изящной деградации макет перестроится в одну колонку. В таком случае полифил, может быть, и не самый лучший вариант.
В CSS multi-column layout module есть множество различных свойств. В следующей части я расскажу про каждое из них по отдельности.
Column Count и Column Width
Свойство column-count задает количество колонок для элемента. Принимаются или положительные целые числа, или auto. Если задать значение auto, количество колонок будет определяться от значения column-width. Если задать положительное целое число, все колонки будут иметь одинаковую ширину.
Свойство column-width задает ширину отдельных колонок элемента. Свойство не строгое. К примеру, колонки будут чуть уже заданного значения, если места недостаточно. Данное свойство также принимает значения auto или положительные целые числа. Если задать auto, ширина будет определяться свойством column-count. Свободное пространство будет распределено между всеми колонками по ровну.
Также оба значения можно задать одновременно с помощью сокращенного свойства columns. Синтаксис свойства columns:
|
1 2 3 |
.example { columns: <'column-width'> || <'column-count'> } |
Ниже показаны несколько примеров использования данного свойства с комментариями слева:
|
1 2 3 4 5 6 7 8 |
.example { columns: 10em; /* column-width: 10em / column-count: auto */ columns: 4; /* column-width: auto / column-count: 4 */ columns: 4 auto; /* column-width: auto / column-count: 4 */ columns: auto 10em; /* column-count: auto / column-width: 4 */ columns: auto; /* column-count: auto / column-width: auto */ columns: auto auto; /* column-count: auto / column-width: auto */ } |
Как видно, первый пример columns это сокращенный четвертый, а второй пример это сокращенный третий. На самом деле, если у целого числа нет единиц измерения, то значение относится к column-count. На CodePen продемонстрировано демо со всеми озвученными свойствами. Если изменить размер окна, можно заметить:
Свойство column-count всегда поддерживает количество заданных вами колонок. Меняется только их ширина.
Свойство column-width автоматически изменяет количество колонок на основе свободного пространства. Количество колонок выставляется таким образом, чтобы их ширина была больше заданной. Также если места не достаточно, ширина всех колонок может быть чуть меньше заданной.
Свойство columns использует column-count как максимальное количество разрешенных колонок. Ширина колонок все так же будет подстраиваться, чтобы column-count никогда не превышало число заданных колонок, а column-width будет приблизительно равно заданной ширине.
Column Gap и Column Rule
С помощью column-gap можно задать пространство между колонок. Принимаются normal или числовые значения. Можно задать 0, но только не отрицательное значение. Если задано normal, будет использовано значение по умолчанию в браузере для расстояния между колонок.
column-rule – сокращение, с помощью которого можно добавить линию между двух колонок. Это то же самое, что свойства border-left или border-right. Синтаксис свойства:
|
1 2 3 |
.example { column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'> } |
Свойству column-rule-width можно задать ширину 3px, или же использовать ключевые слова thin, medium или thick. column-rule-style принимает значения типа dashed, dotted, solid и т.д. Все значения свойства border-style можно применить к column-rule-style, а значением column-rule-color может быть любая валидная форма записи цвета. На CodePen продемонстрировано демо обоих свойств.
Column Fill и Column Span
Свойство column-fill определяет, как будет распределен контент, чтобы он заполнил колонки. Свойство принимает значения auto и balance, колонки заполняются последовательно. Если задать balance, контент равномерно распределится по всем колонкам.
Стоит учесть только то, что, если задать фиксированную высоту колонок, то Firefox автоматически сбалансирует контент. В других браузерах контент будет заполняться последовательно.
Свойство column-span контролирует то, как элемент будет растягиваться на все колонки. Оно имеет два возможных значения: all и none. Если задать all, элемент растягивается на все колонки. Свойство не поддерживается в Firefox.
На CodePen демонстрируется демо, в котором показано, как цитата растягивается на все колонки. В Firefox цитата располагается в центральной колонке, что можно считать приемлемым фолбэком.
Как создать адаптивный макет с несколькими колонками
Теперь, когда вы узнали про различные свойства и их значения, давайте сделаем наш шаблон адаптивным и дружелюбным к пользователю.
Со свойствами column-count и column-width есть свои проблемы. Свойство column-count поддерживает нужное число колонок на больших экранах устройств, однако макет может посыпаться на маленьких экранах. Схожий принцип и у column-width, которое обеспечивает не слишком узкие колонки на маленьких экранах, но на больших экранах дает слишком много колонок.
Чтобы ваш макет выглядел хорошо на всех экранах, необходимо задать оба свойства, column-count и column-width. Так вы сможете контролировать ширину и количество колонок. Вам нужно будет пофиксить пару проблем, о них мы поговорим чуть ниже.
Исправляем горизонтальную прокрутку
Если высота колонок фиксирована, а окно браузера уменьшилось, то появится горизонтальная прокрутка. Так как контент не может расширяться вертикально, то он будет делать это по горизонтали. Чтобы это исправить, необходимо изменить ширину окна браузера до тех пор, пока не появится горизонтальная прокрутка. Затем, с помощью медиа запросов необходимо задать высоту колонок в auto, чтобы она стала меньше ширины. Код:
|
1 2 3 4 5 6 7 8 9 |
.responsive-height { height: 250px; } @media (max-width: 1040px) { .responsive-height { height: auto; } } |
В демо на CodePen показаны обе проблемы и возможные решения. Измените размер окна браузера, чтобы увидеть как работают оба примера.
Исправляем очень длинные колонки
Если колонки стали слишком длинными, пользователям надоест листать их вверх и вниз. Когда высота колонок станет больше высоты окна браузера, лучше избавиться от нескольких колонок и оставить одну. Сделать это можно опять же с помощью медиа запросов:
|
1 2 3 4 5 |
@media (min-width: 800px) { .long-columns { columns: 3 200px; } } |
В нашем примере я использую несколько колонок только когда ширина окна браузера такая, чтобы пользователю не приходилось листать страницу вверх и вниз. Просмотрите демо с несколькими колонками и медиа запросами
Заключение
Надеюсь, это введение в CSS multi-column layout module познакомило вас с его свойствами. Эти свойства могут стать прекрасным дополнением вашей копилки в адаптивном дизайне. А если вы все еще поддерживаете старые браузеры, несколько колонок превосходно трансформируются в одну по технике изящной деградации.
Автор: Baljeet Rathi
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
