CSS3 columns — концепция многоколоночной разметки, которая позволяет разбивать контент на колонки. Колонки могут содержать заголовки, текст, таблицы, картинки и любые другие inline -элементы.
IE: 10.0
Firefox: 9.0 -moz-
Chrome: 4.0 -webkit-
Safari: 3.0 -webkit-
Opera: 11.1, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: 8
Android Browser: 2.1 -webkit-
Chrome for Android: 44 -webkit-
Свойство позволяет явно задать необходимое число колонок, а их ширина будет рассчитываться, исходя из ширины доступного пространства. По умолчанию браузер добавляет промежуток между колонками по горизонтали, равный 1em . Если ширина изображения больше ширины колонки, то оно будет обрезано. Если одновременно с column-count задается column-width , то значение column-count будет считаться максимальным числом колонок (столбцов). Свойство не наследуется.
Синтаксис
Section {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
Рис. 1. Пример многоколоночной разметки
Свойство позволяет разбить контент на колонки без задания свойства column-count . Количество колонок будет зависеть от того, сколько колонок заданной ширины может поместиться в контейнер. Не наследуется.
Синтаксис
Section { -webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px; }
Свойство управляет промежутком между колонками. Если для колонок установлена разделительная линия с помощью свойства column-rule , то эта линия будет расположена посредине промежутка, а ее ширина не изменит общую ширину. Свойство не наследуется.
Синтаксис
Section {
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
Рис. 2. Промежутки между колонками
Свойство задаёт количество колонок, которое пересечет выбранный элемент. Указывается не для блока-контейнера, а для для конкретного элемента внутри, например, для заголовка.
Если нужно, чтобы изображение растянулось на все колонки, задаётся img {display: block; -webkit-column-span: all; column-span: all;} . Свойство не наследуется.
Синтаксис
H1 {
-webkit-column-span: all;
column-span: all;
}
Рис. 3. Позиционирование заголовка на все колонки
Свойство создаёт внутри пустого пространства между колонками вертикальную полосу — разделительную линию. Если не задан цвет линии, то некоторые эффекты не будут отображаться. Не наследуется.
| Значения: | |
| none | Значение по умолчанию, означает отсутствие линии. Цвет и ширина, заданные для линии, игнорируются. |
| hidden | Аналогично со значением none , линия скрыта. |
| dotted | Отображает линию набором квадратных точек. |
| dashed | Отображает линию как последовательность из тире. |
| solid | Обычная линия. |
| double | Отображает разделительную линию в виде двух параллельных тонких линий, расположенных на некотором расстоянии между собой. Толщина разделительной линии не указывается, но сумма линий и промежутка между ними равна значению column-rule-width . |
| groove | Отображает линию объемной, вдавленной в полотно. Это достигается путем создания тени из двух цветов, один из которых темнее, другой — светлее. |
| ridge | Отображает разделительную линию объемной, т.е. эффект, противоположный groove . |
| inset | Отображает сплошную линию цветом темнее, чем заданный цвет линии. |
| outset | Отображает сплошную линию цветом, заданным свойством column-rule-color . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Section {
-webkit-column-rule-style: dotted;
-moz-column-rule-style: dotted;
column-rule-style: dotted;
}
Рис. 4. Стиль разделительной линии
Свойство устанавливает ширину разделительной линии. Не работает без свойства column-rule-style . Не наследуется.
Синтаксис
Section {
-webkit-column-rule-style: dotted;
-moz-column-rule-style: dotted;
column-rule-style: dotted;
-webkit-column-rule-width: 10px;
-moz-column-rule-width: 10px;
column-rule-width: 10px;
}
Рис. 5. Ширина разделительной линии
Свойство позволяет изменить цвет разделительной линии, которая наследует цвет текста. Не наследуется.
Синтаксис
Section {
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 5px;
-webkit-column-rule-color: #59ACE7;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 5px;
-moz-column-rule-color: #59ACE7;
column-rule-style: dotted;
column-rule-width: 5px;
column-rule-color: #59ACE7;
}
Рис. 6. Цвет разделительной линии
Свойство позволяет задать в одном объявлении три свойства разделительной линии — ширину column-rule-width , стиль column-rule-style и цвет column-rule-color . Не наследуется.
Синтаксис
Section { -webkit-column-rule: 5px dotted #59ACE7; -moz-column-rule: 5px dotted #59ACE7; column-rule: 5px dotted #59ACE7; }
Свойство представляет собой краткую запись свойств column-width и column-count , одновременно задает ширину и количество колонок. Не наследуется.
Синтаксис
Section { -webkit-columns: 100px 3; -moz-columns: 100px 3; columns: 100px 3; }
В данном уроке мы расскажем о использовании свойств CSS3 для построения многоколночного шаблона. Так как это CSS3, использование его свойств требует предварительной тщательной проверки.
Для создания нескольких колонок вы можете использовать свойства:
Первое устанавливает точное количество выводимых колонок, а последнее - ширину каждой колонки. Все остальные параметры колонок будут определяться доступной шириной.
Используем разметку HTML:
Код CSS будет таким:
Div {column-count: 3}
или таким:
Div {column-width: 15em} /* Вы можете использовать также px */
Также доступна короткая запись:
Div {columns: 3 20em}
В короткой записи можно задавать и количество колонок и их ширину. Однако на практике, как правило, требуется только что-то одно.
Определение колонок с помощью свойства column-count больше подходит для резиновых шаблонов, так как ширина колонок будет адаптироваться при изменении ширину экрана браузера.
Использование свойств column-count или column-width приводит к созданию нового контейнера между внешним элементом и содержанием. Он называется контейнер колонок, хотя для него и нельзя изменять свойства.
Колонки выравниваются в строке. Все контейнеры колонок в строке будут иметь одинаковую высоту, хотя их содержание может существенно отличаться.
Если сделать какой-либо элемент плавающим в контейнере колонки, то он будет ограничен именно контейнером колонки, а не внешним контейнером. Также будет работать задание ширины элемента колонки в % - ширина будет рассчитываться от ширины контейнера колонки, а не внешнего контейнера.
Имеется небольшой контроль над колонками. Мы можем задавать интервал между колонками с помощью свойства column-gap . По умолчанию свойство column-gap имеет значение 1em.
Div {column-gap: 2em}
Также можно устанавливать вертикальный разделитель с помощью свойства column-rule:
Div {column-rule: thin solid #ccc}
Короткая запись может быть представлена 3 свойствами, действующими также, как и при определении рамок элементов:
Интервал равен по высоте контейнеру колонок, а разделитель помещается в центр интервала. Интервал и разделитель имеют одинаковую высоту. Если колонка не имеет содержания, разделитель между ней и соседними колонками не будет выводиться.
Вероятно, что вы не будете часто использовать указание заполнения колонок с помощью свойства column-fill . Это способ указать браузеры сколько содержания нужно разместить в каждой колонке.
Вы можете использовать значения auto (автоматически, установлено по умолчанию) или balance (сбалансировано), которое вынудить браузер попытаться заполнить колонки равномерно. На практике большой разницы между результатами использования данных значений не заметно.
Размах, устанавливаемый с помощью свойства сolumn-span , значительно более полезная настройка. Он позволяет элементу HTML растянуться на несколько колонок. На выше приведенном рисунке заголовок использует именно это свойство.
H2 {column-span: all}
Возможны только два значения - all (все) или none (ничего). Использовать 2 из 3 колонок не получится.
Имеется три похожих свойства, которые можно использовать для прерыванием содержания в колонке вокруг элемента.
Определения используемых значений:
Смысл всех данных свойств и значений заключается в том, чтобы определённое содержание начиналось с новой колонки.
Если изображение или непрерывное слово превышает ширину колонки, то оно будет обрезано в середине интервала, где размещается разделитель.
Возможно ограничить колонки так, что элемент будет иметь больше колонок, чем места для вывода:
Свойства CSS3 для создания многоколоночного шаблона могут стать отличным инструментом. Но их применение требует тщательной проверки поддержки в различных браузерах.
С их помощью можно изменить внешний вид уже имеющегося проекта без глобальных переделок структуры.
Одно из самых полезнейших свойств новой спецификации. Вспомните, как нужно за дроч мучиться, чтобы в резиновом дизайне сделать область из 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; } ).
Те свойства, что имеются, ишаком совсем не поддерживаются, не говоря уже о некоторых других разновидностей и версий браузера (вроде с оперой есть проблемы). Хотя, для ишака есть попытка написания плагина, но я бы его назвал в лучшем случае бетой. Впрочем, автор этого и не скрывает () .
Вот и всё на сегодня. Жаль, что свойство поддерживается не всеми и нет при этом хаков. Хотя больше всего жаль именно то, что функционал пока не весь доступен и пока нельзя этот метод считать ещё одним в серии для создание многоколоночных вёрсток. Остаётся надеяться, что в консорциуме подумают над этим как следует.
Макет CSS3 нескольких столбцов позволяет легко определение нескольких столбцов текста - так же, как в газетах:
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit- или -moz- указать первую версию, которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
В этой главе вы узнаете о следующих свойствах нескольких столбцов:
column-count свойство задает число столбцов элемент должен быть разделен на.
В следующем примере будет делить текст в
column-gap свойство задает промежуток между столбцами.
Следующий пример определяет зазор 40 пикселей между колонками:
column-rule-style свойство определяет стиль правила между колоннами:
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
column-rule-width свойство задает ширину линейки между колонками:
column-rule-color свойство задает цвет правила между колоннами:
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
column-rule свойство является сокращённое свойство для установки всех столбцов-rule- * свойства выше.
Следующий пример устанавливает ширину, стиль и цвет правило между колоннами:
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
column-span свойство определяет, сколько колонок элемент должен охватывать поперек.
Следующий пример указывает, что
Следующий пример указывает, что предложенная, оптимальная ширина для колонн должна быть 100px:
В следующей таблице перечислены все свойства мульти-колонки.
