Css column count разрывает блоки. Введение в CSS3 Multicolumn. Работаем с колонками. Ширина разделительной линии: свойство column-rule-width
Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей , либо применения дополнительных библиотек на 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 . Помните об адаптивности и зрителях маленьких и больших экранов.
Одно из самых полезнейших свойств новой спецификации. Вспомните, как нужно за дроч мучиться, чтобы в резиновом дизайне сделать область из 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 для построения многоколночного шаблона. Так как это CSS3, использование его свойств требует предварительной тщательной проверки.
Используем несколько колонок
Для создания нескольких колонок вы можете использовать свойства:
- column-count
- column-width
Первое устанавливает точное количество выводимых колонок, а последнее - ширину каждой колонки. Все остальные параметры колонок будут определяться доступной шириной.
Используем разметку 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-rule-width
- column-rule-style
- column-rule-color
Интервал равен по высоте контейнеру колонок, а разделитель помещается в центр интервала. Интервал и разделитель имеют одинаковую высоту. Если колонка не имеет содержания, разделитель между ней и соседними колонками не будет выводиться.
Заполнение колонок и размах
Вероятно, что вы не будете часто использовать указание заполнения колонок с помощью свойства column-fill . Это способ указать браузеры сколько содержания нужно разместить в каждой колонке.
Вы можете использовать значения auto (автоматически, установлено по умолчанию) или balance (сбалансировано), которое вынудить браузер попытаться заполнить колонки равномерно. На практике большой разницы между результатами использования данных значений не заметно.
Размах, устанавливаемый с помощью свойства сolumn-span , значительно более полезная настройка. Он позволяет элементу HTML растянуться на несколько колонок. На выше приведенном рисунке заголовок использует именно это свойство.
H2 {column-span: all}
Возможны только два значения - all (все) или none (ничего). Использовать 2 из 3 колонок не получится.
Прерывание колонок
Имеется три похожих свойства, которые можно использовать для прерыванием содержания в колонке вокруг элемента.
- До элемента - break-before:
- В элементе - break-inside: auto | always | avoid | left | right | page | column | avoid-page | avoid-column
- После элемента - break-after: auto | avoid | avoid-page | avoid-column
Определения используемых значений:
- auto — Генерация или запрещение разрывов страницы/колонки отключены.
- always
- avoid — Запретить разрыв страницы/колонки.
- left — Генерировать один или два разрыва страницы так, чтобы следующая страница форматировалась как страница слева.
- right — Генерировать один или два разрыва страницы так, чтобы следующая страница форматировалась как страницы справа.ы
- page — Всегда генерировать разрыв страницы.
- column — Всегда генерировать разрыв колонки.
- avoid-page — Запретить разрыв страницы.
- avoid-column — Запретить разрыв колонки.
Смысл всех данных свойств и значений заключается в том, чтобы определённое содержание начиналось с новой колонки.
Если изображение или непрерывное слово превышает ширину колонки, то оно будет обрезано в середине интервала, где размещается разделитель.
Возможно ограничить колонки так, что элемент будет иметь больше колонок, чем места для вывода:
- Ограничение высоты колонки может привести к появлению дополнительных колонок, а не к появлению достаточного пространства для вывода.
- Ограничение размера страницы может привести к тому, что дополнительные колонки будут перемещены на следующую страницу.
- Задание разрыва колонки может привести к тому, что дополнительная колонка будет выведена вне доступного пространства для вывода или на следующей странице.
Заключение
Свойства CSS3 для создания многоколоночного шаблона могут стать отличным инструментом. Но их применение требует тщательной проверки поддержки в различных браузерах.
С их помощью можно изменить внешний вид уже имеющегося проекта без глобальных переделок структуры.