Многоколоночный текст на CSS3
Дата публикации: 04.10.2011
Задача
Нужно распределить текстовый контент в несколько столбцов. И мы хотим сделать это при помощи средств CSS.
Решение
CSS3 предлагает нам новый вариант организации текстового контента при помощи модуля Multi-column. Это дает возможность разбить на столбцы текст без дополнительной разметки вроде плавающего <div> или <table>.
Об истории и поддержке
Впервые модуль Multi-Column был опубликован еще 10 лет назад — в 2001 году, но только в апреле 2005, с выпуском Firefox 1.5 беты (основанный на Gecko 1.8) появилась хотя бы частичная поддержка CSS3 Multi-Column.
Сегодня модуль Multi-column поддерживается в браузерах Mozilla, Webkit (Safari и Chrome) и Opera 11, соответственно в IE и ранних версиях Opera многоколоночность не сработает.
Справка от W3C:
… таблицы стилей могут указывать, что контент элемента должен быть размечен как многоколоночный.
Хорошо, как использовать эту функцию?
Для поддержки в браузерах Mozilla и Webkit нужно использовать вендорные префиксы -moz- и -webkit-.
Свойства CSS3-модуля
- column-count — требуемое количество столбцов для данного элемента;
- column-width — ширина каждого столбца;
- column-gap — расстояние (padding) между столбцами;
- column-rule — определяет разделитель как границу между столбцами.
Так, хватит уже теории. Переходим к практике!
Есть два способа определения столбцов:
- column-count — сколько тебе нужно столбцов;
- column-width — какой ширины должен быть столбец.
Количество столбцов:
#multi-column1 { column-count: 3 -moz-column-count: 3; -webkit-column-count: 3; сolumn-gap: 20px; -moz-column-gap: 20px; -webkit-column-gap: 20px; text-align: justify; }
Ширина столбца:
#multi-column2 { column-width: 200px; -moz-column-width: 200px; -webkit-column-width: 200px; column-gap: 30px; -moz-column-gap: 30px; -webkit-column-gap: 30px; text-align: justify; }
Или же, как альтернативный вариант, можно использовать короткое свойство columns.
Граница между столбцами
Если для определения столбцов ты выбираешь column-count или column-width, можно добавить между ними разграничитель при помощи следующего CSS:
column-rule: 2px solid #9c9c9c; -moz-column-rule: 2px solid #9c9c9c; -webkit-column-rule: 2px solid #9c9c9c;
Если хочешь еще глубже разобраться в CSS3-модуле Multi-column — стоит почитать спецификацию W3C.
А как же браузеры, не понимающие Multi-column?
Специально для них очень давно был разработан скрипт css3-multi-column.js. Он парсит CSS-файл и с помощью javascript пререразбивает нужные блоки на несколько колонок.
Демо-пример — используем многоколоночный текст на CSS3 и скрипт для IE.
Проверено в:
- IE 7-8
- Opera 11
- Firefox 6
- Safari
- Chrome