Колонки - это широко распространённый в полиграфии способ для упрощения чтения. При использовании этого способа длинный текст разбивается на более удобные для чтения суженные блоки. В веб-вёрстке данный способ слабо распространён: из-за небольшой относительно газет и журналов высоты большинства дисплеев длинный текст не уместится во всю его высоту, поэтому для его чтения потребуется постоянная прокрутка вверх-вниз, что неудобно. Но всё же есть несколько сценариев, где колонки будут крайне полезны, с их реализацией в этой статье и разберёмся.
Вариант 1. CSS 3
В CSS 3 появилось замечательное свойство columns. Вместе с column-gap, column-rule и другими подобными они составляют мощный инструмент по организации колонок.
#columnized {
columns: auto 150px;
-moz-columns: auto 150px;
-webkit-columns: auto 150px;
column-gap: 20px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-rule: 1px solid #ccc;
-moz-column-rule: 1px solid #ccc;
-webkit-column-rule: 1px solid #ccc;
}
Данная запись говорит браузеру разбивать содержимое #columnized на колонки с минимальной шириной 150 пк, между колонками сделать расстояние 20 пк и вставить сплошную серую полоску шириной 1 пк. Пример использования на jsfiddle.net.
Поддержка браузерами этих основных свойств хорошая - все современные браузеры поддерживают их или напрямую или с префиксами:
Данная информация взята с сайта webref.ru.
Картину портят всё ещё популярные версии Internet Explorer 8 и 9 - согласно hi-news.ru в 2014 году они вдвоём сотворили почти 30% всего интернет-трафика.
HTML5 Shiv
Спасти ситуацию вызвался html5shiv.js - js-плагин, который помогает старым браузерам понимать много CSS 3 стилей, что актуально для Internet Explorer версий 9 и ниже.
Скачать и получить инструкции по работе и установке можно на странице плагина на GitHub. Подключить его просто, какие-либо дополнительные манипуляции не требуются:
<html>
<head>
...
<!--[if lte IE 9]>
<script type="text/javascript" src="/path/to/html5shiv.min.js"></script>
<![endif]-->
...
</head>
<body>
...
Этот плагин позволит IE работать не только с колонками, но и со многими другими CSS 3 свойствами.
Вариант 2. Columnizer jQuery Plugin
Если функциональности CSS 3 недостаточно, то можно воспользоваться более мощным инструментом, вроде jQuery плагина Columnizer. Подробная документация есть на странице проекта в GitHub.
Простейший пример использования можно посмотреть на jsfiddle, остальные здесь в пункте Demos.
