Одно из самых полезнейших свойств новой спецификации. Вспомните, как нужно задрочмучиться, чтобы в резиновом дизайне сделать область из 3, 4 или 5 колонок одинаковой ширины и при этом не использовать таблицы. Правильно, ацкий ад. Теперь это можно сделать всего лишь несколькими строчками CSS. Правда пока имеется небольшая ложка дёгтя, но об этом попозже.
Итак, какими же средствами мы обладаем, чтобы создать многоколоночный блок.
|
Свойство
|
Описание
|
Пример
|
|---|---|---|
| column-count | количество колонок | column-count: 3; |
| column-gap | расстояние между колонками | column-gap: 2em; |
| column-width | ширина столбца | column-width: 200px; |
| column-rule |
разделительная линия между колонками (формат записи аналогичен свойству border)
|
column-rule: 1px solid #000; |
| column-rule-width | ширина разделительной линии | column-rule-width: 5px; |
| column-rule-style | стиль разделительной линии | column-rule-style: dotted; |
| column-rule-color | цвет разделительной линии | column-rule-color: #fff; |
Не забываем, что для мозиллы и вебкит браузеров необходимо дублировать свойства с приставками -webkit- и -moz-.
Думаю как с этими свойствами работать итак понятно. Однако подмечу следующее. По-умолчанию, column-count имеет значение auto. Это означает, что если задать column-width, то количество колонок будет высчитано автоматически.
Теперь несколько слов о том для чего это надо, где это можно применить и какие есть ограничения.
Зачем?
В принципе, column-count отсылает нас ещё к газетам, а если полнее сказать, то к полиграфии. Для чего же оно делалось? Прежде всего – это удобство для чтения, т.к. человеческий глаз лучше всего воспринимает строки текста длиной в среднем 10 слов. Также, разделения текста по колонкам позволяет лучше организовать контент и снизить количество свободного пространства на странице.
Применение
Для чего же можно применить это свойство. Полагаю, что оптимальным использованием можно считать следующее – на сайтах с большим центральным полем можно разделить текст на колонки. Плюс в том, что если он не разделится, то ничего страшного от этого не будет.
Вторым местом для использования я бы предложил какое-нибудь массивное вертикальное меню, где нужны блоки одинаковой ширины. Но, если column-count не сработает, то выйдет косяк.
Ограничения
-
Нельзя задавать свойства отдельной колонки, типа бэкграунда и ширины, так что для вёрстки сайта свойство пока не применить
-
Если задать высоту колонки, то если текста будет очень много, будут добавлены дополнительные колонки. чтобы его уместить. Но благо оно лечится через overflow: hidden.
-
Если блок делится на колонки и задан column-rule, то в случае, когда текст помещается в одну колонку, вебкит браузеры разделительную линию покажут, а мозиллоподобные браузеры – нет.
-
Есть ещё два свойства, которые есть в спецификации, но не поддерживаются ни одним браузером. Это column-break, которым можно указать, когда начинать следующую колонку ( .container h3 { column-break-before:always; } ). Второе свойство – column-span, позволяет отобразить элемент через все колонки, к примеру, заголовок ( .container h1 { column-span:all; } ).
-
Те свойства, что имеются, ишаком совсем не поддерживаются, не говоря уже о некоторых других разновидностей и версий браузера (вроде с оперой есть проблемы). Хотя, для ишака есть попытка написания плагина, но я бы его назвал в лучшем случае бетой. Впрочем, автор этого и не скрывает.
Вот и всё на сегодня. Жаль, что свойство поддерживается не всеми и нет при этом хаков. Хотя больше всего жаль именно то, что функционал пока не весь доступен и пока нельзя этот метод считать ещё одним в серии для создание многоколоночных вёрсток. Остаётся надеяться, что в консорциуме подумают над этим как следует.
(голосов: 2, средний: 5.00 из 5)
Загрузка ...