CSS Multi Column

Автор: Александр и Татьяна Головко Дата публикации:

Последнее обновление:

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

Демо-пример — позволяет использовать многоколоночный текст.

Проверено в:

IE 7-8
Firefox 4+
Opera 10.5
Safari
Chrome

Что качать?

Собственно скрипт: (36.5 Kb).

Быстрый старт

Подключаем библиотеку:

<script type="text/javascript" src="js/css3-multi-column.js"></script>

Собственно, это все. Скрипт не требует инициализации. Теперь любой элемент может отображать свой контент в несколько колонок.

Можно использовать следующие свойства:

Ограничения:

Значения для column-width и column-gap должно быть приведено в пикселях.
Реализация опирается на облегченные парсеры CSS и JavaScript. Избегайте сложных структур CSS (например, каскадных правил).

Такая запись должна отработать нормально:
```
.article {
   column-count: 3;
   column-gap: 20px;
} 
```
У такой записи велика вероятность сбоя:
```
#somearticleid {
    column-count: 3;
}
.different_selector {
    column-gap: 20px;
} 
```
Кроме того, на данный момент парсер скрипта выполняет закомментированные правила (разработчики обещали пофиксить, но с тех пор прошло много времени, а фикса все нет).
Скрипт работает только с внешними таблицами стилей. Вложенные таблицы стилей, встроенные стили и директива @import игнорируются.
Помните, что JavaScript модифицирует разметку на странице, поэтому вполне возможно, что некоторые CSS правила могут не работать после применения скрипта.

Вывод

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

Материал:

CSS3 — Multi Column

Xiper