Трепачёв Д.П. 2012-2020 г.
Ученикам: у меня до 6 января каникулы, на каникулах буду отвечать по возможности,
иногда могу на пару дней пропадать
Свойство column-count
Синтаксис
Селектор { column-count: число | auto; }
Значения
Значение по умолчанию: auto .
Пример
В данном примере текст разобьется на 3 колонки (конечно же, в браузерах, которые поддерживают многоколоночность, в остальных будет просто обычный текст в одну колонку):
Пример . Значение auto
В данном примере указана ширина колонки column-width в 150px , а их количество column-count стоит в значении auto - браузер сам подберет необходимое количество колонок и промежуток между ними:
Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей , либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).
Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout , но и получила достаточно широкую поддержку в браузерах : где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.
Замечание
В случае Internet Explorer 10 это автоматически означает возможность использования CSS3 Multi-column при разработке приложений в стиле Metro для Windows 8 с использованием HTML/CSS/JS.
В рамках статьи я не буду использовать браузерные префиксы, чтобы на запутывать код, но при реальном использовании не забудьте добавить поддержку префиксов для Firefox, Safari и Chrome.
Сразу отмечу еще две немаловажные детали.
Во-первых, в большинстве случаев применение многоколоночной верстки для текста можно рассматривать как развитие отображения контента сайта по пути Progressive Enhancement , в рамках которого пользователи более современных сайтов будут получать больше плюшек:
Во-вторых, многоколоночное отображение хорошо сочетается с возможностями Media Queries (и идеями отзывчивого дизайна, ), например, при разных размерах экрана можно форматировать текст в разное количество колонок:
И последнее, что я хотел бы отметить во введении, чтобы на этом не останавливаться далее и со спокойной совестью перейти к техническим деталям: при использовании многоколоночной верстки текста надо помнить, что подобное расположение предполагает и определенный порядок чтения (для европейских языков слева направо). Поэтому важно, чтобы для перевода взгляда от одной колонки к другой было необходимо совершать как можно меньше дополнительных действий, особенно это касается вертикальных скроллов:
В этом смысле горизонтальная природа колонок лучше сочетается с горизонтальным скроллом (как это, используется во многих приложениях для Win8 — например, это хорошо видно по приложению USA Today):
В общем, колонки — это прекрасно, но не забывайте об удобстве пользователей. А теперь в бой!
Колонки
Итак, у нас есть текст (контент), который мы хотим разместить в несколько колонок. С чего начать?
Чтобы превратить такой элемент в многоколоночный нужно через стили в CSS выставить одно из свойств: column-width
или column-count
в значение, отличное от auto
. Например,
чтобы разбить текст на две колонки, достаточно сделать так:
Article { column-count: 2; }
Все остальное сделает браузер:
Альтернативное свойство — column-width — позволяет задать оптимальную ширину колонок:
Article { column-width: 150px; }
При этом браузер сам разбивает контент на нужное количество колонок, чтобы заполнить внешний контейнер, подстраиваясь под указанную ширину колонок. Важный момент заключается в том, что реальная ширина может отличаться от заданной в большую или меньшую сторону: на картинке выше серая полоска имеет как раз ширину в 150px — и, как видно, она меньше, чем реальная ширина колонки.
Такое поведение определено спецификацией и позволяет (автоматически) добиться большей гибкости при разработке адаптивной разметки:
Например, если у вас контейнер шириной 100px и вы задали колонки шириной 45px, то браузер посчитает, что влезет только две колонки, а чтобы заполнить все место, увеличит размер каждой до 50px. (Здесь также учитывается отступ между колонками, о чем будет рассказано в следующем разделе.)
В определенном смысле, это можно рассматривать как альтернативу указанию с помощью Media Queries разного количества колонок в зависимости от размера окна и с автоматическим рассчетом ширины колонок:
@media (min-width:400px) { article { column-count: 2; } } @media (min-width:600px) { article { column-count: 3; } } ...
Я второй раз говорю про альтернативу — и вот почему.
count vs. width
Как уже должно быть понятно из описания выше, спецификация дает два способа для задания количества и ширины колонок (кстати, у всех колонок она одинаковая!):- column-count позволяет указать число колонок, на которые нужно поделить контент, при этом ширину колонок определяет браузер с учетом доступного пространства.
- column-width заходит с обратной стороны: указывает, какими примерно должны быть колонки, однако, оставляет рассчет их количества на усмотрение браузера.
Columns: 12em; /* column-width: 12em; column-count: auto; */ columns: 2; /* column-width: auto; column-count: 2; */ columns: auto; /* column-width: auto; column-count: auto; */ columns: auto 12em; /* column-width: 12em; column-count: auto; */ columns: 2 auto; /* column-width: auto; column-count: 2; */
Что будет, если указать и количество колонок, и оптимальную ширину? Согласно спецификации, в этом случае column-count определяет максимальное количество колонок:
Article { columns: 150px 3; /* column-width: 150px; column-count: 3; */ }
По существу дела, следя за развитием веб-стандартов, в том числе по некоторым моим статьям про CSS3 (см. например, ), я надеюсь, вы с не меньшим вдохновением смотрите на открывающиеся перед веб-разработчиками возможностями. Адаптивные, гибкие и мощные средства для управления размещением контента все ближе и доступнее. А решение сложных задач — все проще.
Интерактив
Поиграться с работой CSS3 Multi-column можно на ietestdrive.com :
Пробуйте, эксперементируйте. Сообщайте разработчикам браузеров о багах. И не забывайте продумать, что увидят пользователи старых (и вроде бы современных, но все еще не полностью поддерживающих стандарт) браузеров — например, можно использовать плагин для jQuery Columnizer . Помните об адаптивности и зрителях маленьких и больших экранов.
Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей , либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).
Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout , но и получила достаточно широкую поддержку в браузерах : где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.
Замечание
В случае Internet Explorer 10 это автоматически означает возможность использования CSS3 Multi-column при разработке приложений в стиле Metro для Windows 8 с использованием HTML/CSS/JS.
В рамках статьи я не буду использовать браузерные префиксы, чтобы на запутывать код, но при реальном использовании не забудьте добавить поддержку префиксов для Firefox, Safari и Chrome.
Сразу отмечу еще две немаловажные детали.
Во-первых, в большинстве случаев применение многоколоночной верстки для текста можно рассматривать как развитие отображения контента сайта по пути Progressive Enhancement , в рамках которого пользователи более современных сайтов будут получать больше плюшек:
Во-вторых, многоколоночное отображение хорошо сочетается с возможностями Media Queries (и идеями отзывчивого дизайна, ), например, при разных размерах экрана можно форматировать текст в разное количество колонок:
И последнее, что я хотел бы отметить во введении, чтобы на этом не останавливаться далее и со спокойной совестью перейти к техническим деталям: при использовании многоколоночной верстки текста надо помнить, что подобное расположение предполагает и определенный порядок чтения (для европейских языков слева направо). Поэтому важно, чтобы для перевода взгляда от одной колонки к другой было необходимо совершать как можно меньше дополнительных действий, особенно это касается вертикальных скроллов:
В этом смысле горизонтальная природа колонок лучше сочетается с горизонтальным скроллом (как это, используется во многих приложениях для Win8 — например, это хорошо видно по приложению USA Today):
В общем, колонки — это прекрасно, но не забывайте об удобстве пользователей. А теперь в бой!
Колонки
Итак, у нас есть текст (контент), который мы хотим разместить в несколько колонок. С чего начать?
Чтобы превратить такой элемент в многоколоночный нужно через стили в CSS выставить одно из свойств: column-width
или column-count
в значение, отличное от auto
. Например,
чтобы разбить текст на две колонки, достаточно сделать так:
Article { column-count: 2; }
Все остальное сделает браузер:
Альтернативное свойство — column-width — позволяет задать оптимальную ширину колонок:
Article { column-width: 150px; }
При этом браузер сам разбивает контент на нужное количество колонок, чтобы заполнить внешний контейнер, подстраиваясь под указанную ширину колонок. Важный момент заключается в том, что реальная ширина может отличаться от заданной в большую или меньшую сторону: на картинке выше серая полоска имеет как раз ширину в 150px — и, как видно, она меньше, чем реальная ширина колонки.
Такое поведение определено спецификацией и позволяет (автоматически) добиться большей гибкости при разработке адаптивной разметки:
Например, если у вас контейнер шириной 100px и вы задали колонки шириной 45px, то браузер посчитает, что влезет только две колонки, а чтобы заполнить все место, увеличит размер каждой до 50px. (Здесь также учитывается отступ между колонками, о чем будет рассказано в следующем разделе.)
В определенном смысле, это можно рассматривать как альтернативу указанию с помощью Media Queries разного количества колонок в зависимости от размера окна и с автоматическим рассчетом ширины колонок:
@media (min-width:400px) { article { column-count: 2; } } @media (min-width:600px) { article { column-count: 3; } } ...
Я второй раз говорю про альтернативу — и вот почему.
count vs. width
Как уже должно быть понятно из описания выше, спецификация дает два способа для задания количества и ширины колонок (кстати, у всех колонок она одинаковая!):- column-count позволяет указать число колонок, на которые нужно поделить контент, при этом ширину колонок определяет браузер с учетом доступного пространства.
- column-width заходит с обратной стороны: указывает, какими примерно должны быть колонки, однако, оставляет рассчет их количества на усмотрение браузера.
Columns: 12em; /* column-width: 12em; column-count: auto; */ columns: 2; /* column-width: auto; column-count: 2; */ columns: auto; /* column-width: auto; column-count: auto; */ columns: auto 12em; /* column-width: 12em; column-count: auto; */ columns: 2 auto; /* column-width: auto; column-count: 2; */
Что будет, если указать и количество колонок, и оптимальную ширину? Согласно спецификации, в этом случае column-count определяет максимальное количество колонок:
Article { columns: 150px 3; /* column-width: 150px; column-count: 3; */ }
По существу дела, следя за развитием веб-стандартов, в том числе по некоторым моим статьям про CSS3 (см. например, ), я надеюсь, вы с не меньшим вдохновением смотрите на открывающиеся перед веб-разработчиками возможностями. Адаптивные, гибкие и мощные средства для управления размещением контента все ближе и доступнее. А решение сложных задач — все проще.
Интерактив
Поиграться с работой CSS3 Multi-column можно на ietestdrive.com :
Пробуйте, эксперементируйте. Сообщайте разработчикам браузеров о багах. И не забывайте продумать, что увидят пользователи старых (и вроде бы современных, но все еще не полностью поддерживающих стандарт) браузеров — например, можно использовать плагин для jQuery Columnizer . Помните об адаптивности и зрителях маленьких и больших экранов.
(оптимальная ширина колонок) и column-count (оптимальное количество колонок).
Поддержка браузерами
CSS синтаксис:
columns: "auto | column-width column-count | initial | inherit" ; Если значение указано как целое число, то оно относится к значению свойства column-count, если указано в единицах измерения длины CSS (px, mm, pt, и т.п.), то к column-width. Допускается указывать как одно, так и два значения в одном объявлении. columns: "auto" columns: "auto auto" /* column-width: auto; column-count: auto */JavaScript синтаксис:
Object.style.columns = "auto auto"
Значения свойства
| Значение | Описание |
|---|---|
| auto | Указывает, что значения свойств column-width и column-count установлены в значение auto (ширина колонок и их количество определяется браузером автоматически - означает, что элемент не является многоколоночным). Значение по умолчанию auto auto . |
| column-width | Задает оптимальную ширину для колонок. Ширина колонки может быть шире при наличии свободного места, или уже в случае если указанное значение больше возможной ширины колонки. Значение ширины указывается в единицах измерения длины CSS (px, mm, pt, и т.п.). Значение должно быть строго положительным. Обращаю Ваше внимание, что в настоящее время значения указанные в процентах не допускаются. Значение по умолчанию auto . |
| column-count | Задает оптимальное количество колонок. Значение указывается как целое число. Значение по умолчанию auto . |
| Устанавливает свойство в значение по умолчанию. | |
| Указывает, что значение наследуется от родительского элемента. |
Версия CSS
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; } ).
Те свойства, что имеются, ишаком совсем не поддерживаются, не говоря уже о некоторых других разновидностей и версий браузера (вроде с оперой есть проблемы). Хотя, для ишака есть попытка написания плагина, но я бы его назвал в лучшем случае бетой. Впрочем, автор этого и не скрывает () .
Вот и всё на сегодня. Жаль, что свойство поддерживается не всеми и нет при этом хаков. Хотя больше всего жаль именно то, что функционал пока не весь доступен и пока нельзя этот метод считать ещё одним в серии для создание многоколоночных вёрсток. Остаётся надеяться, что в консорциуме подумают над этим как следует.
