column-rule в CSS


column-rule

Свойство CSS column-rule объединяет в себе сразу несколько подсвойств для создания линий между колонками (столбами) многоколоночного элемента и указания их цвета, стиля и толщины.

Тип свойства

Применяется: к незамещаемым элементам уровня блока (кроме и элементов с display: table ). К ячейкам таблиц — , и элементам с display: table-cell . А также к встроенным блокам — display: inline-block .

Значения

Значением свойства column-rule является одно или несколько (разделенных пробелом) значений его следующих подсвойств.

Процентная запись: не существует.

Значение по умолчанию: зависит от значений по умолчанию каждого подсвойства column-rule .

Свойство column-rule

Свойство column-rule свойства линии-разделителя между колонками текста (цвет, стиль, ширина).

Свойство column-rule определено в спецификации CSS 3 модуль Multi-column Layout (многоколоночная разметка), применяется к многоколоночным элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение medium none currentColor . На данный момент свойство поддерживается во всех основных браузерах.

CSS column-rule

The CSS column-rule property is a shorthand property for setting multiple column rule related properties in one place.

Specifically, the property sets the column-rule-width , column-rule-style , and column-rule-color properties.

The column rule appears as a kind of border that appears in between the columns on a multi-column layout.

The CSS column-rule property is a time-efficient way of adding a rule to your multi-column layouts.

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

This example uses vendor prefixes for the multi-column layout due to lack of browser support for the official standard at the time of writing.

CSS Specifications

  • The column-rule property is defined in CSS Multi-column Layout Module (W3C Candidate Recommendation 12 April 2011).

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

column-rule

Easily manage projects with monday.com

To make columns distinct, you can add a vertical line between each column. The line sits in the center of the column gap. If you’ve ever styled border , then you are ready to style column-rule .

The property is shorthand for column-rule-width , column-rule-style , and column-rule-color , which is the same pattern as border and accepts the same values.

column-rule-width can be a length like 3px or a keyword value like thin .

column-rule-style can be any of the border-style values like solid , dotted , and dashed .

column-rule-color can be any color value.


Unlike column-gap , column-rule doesn’t take up space. If the column-rule-width is thicker than the column-gap then the rule will expand underneath the columns.

The vertical rule will only exist between columns that have content.

Свойство column-rule

Обратите внимание: данное свойство поддерживается в браузерах IE 10+ и Opera. Для браузеров Chrome и Safari требуется префикс -webkit, а для браузера Firefox префикс -moz.

С помощью свойства column-rule Вы можете установить все свойства оформления разделителя столбцов текста за одно определение.

Илон Маск рекомендует:  Предопределённые константы msql

Свойства должны устанавливаться в следующем порядке:

  1. column-rule-width устанавливает ширину разделителя;
  2. column-rule-style устанавливает стиль разделителя;
  3. column-rule-color устанавливает цвет разделителя.

CSS column rule styling?

ok, so basically i am trying to apply a gradient to a column rule but the results are not. as expected.

maybe i am missing something?

ok, so this is how it ended up. without column rule and using :before and :after selectors. fully scalable. thanks for all the answers. https://jsfiddle.net/VileTouch/0exLthpq/3/

2 Answers 2

Instead of using an , which doesn’t act as expected in a lot of cases, simply use a

‘s actually have their border colored (by default), not via color: or background:. Plus, there are a ton of browser-specific things you must override, like shadows.

Divs will act more like you expect when you want more custom styling.

If you wanted to get fancy, you could use an :after element on the column itself, but that’s a whole new CSS lesson.

CSS column-rule

The column-rule property is a shorthand property which allows you to change the style, color and width of the rule between adjacent columns in a multi-column layout.

There is no specific order in which the three values are given in the declaration.

A column rule is like a border drawn between adjacent columns in a multi-column document, which can make it easier to distinguish between different columns if the column gap is small and can make the layout look more presentable.

A column rule does not take up any space. It appears in the middle of the space between adjacent columns. The space between columns can be changed using the column-gap property.

Values

The possible values which can be given for the three longhand properties are given below.

column-rule-style

This property is used to set the style of the rule. It can take the following values. Its default value is none .

column-rule-width

This is used to set the width of the rule. It can take the following values. Its default value is medium .

Since no column-rule-width value is specified in the above example, so the rules took the default width, which is medium.

column-rule-color

This property is used to set the color of the rule. It can take the following values. Its default value is black.

Since no column-rule-color value is specified in the above example, so the rules took the default color, which is black (or #000).

Apart from these, the column-rule property can also take the following universal values.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

To be noted

  • The column-rule-style value must be defined other than none or hidden to make a rule visible. This is because there is no rule present by default. So in order to make a rule visible, you must first define it with the column-rule-style value.
  • Rules take the default value for the longhand property whose value is not defined in the declaration. For example, column-rule: solid blue will make the rule take the default value for the column-rule-width property which is medium .

Browser Support

This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.

CSS :: Свойство column-rule

css -свойство column-rule (от англ. column rule – разделительная линия колонки) позволяет одновременно задавать ширину, стиль и цвет разделительной линии колонок, перечисляя их через пробел в любом порядке.


Характеристики

  • Значение по умолчанию: см. каждое свойство .
  • Применяется: к многоколоночным элементам .
  • Наследуется: см. каждое свойство .
  • Анимируется: см. каждое свойство .
  • JavaScript: object.style.columnRule=»value» .

Синтаксис

column-rule: column-rule-width || column-rule-style || column-rule-color

Значения

Можно указывать через пробел значения свойств column-rule-width, column-rule-style и column-rule-color, задавая тем самым ширину, стиль и цвет разделительной линии колонок в одном месте. При этом значения могут быть указаны в любом порядке. Стиль разделительной линии должен указываться обязательно. Цвет и ширину можно не указывать, тогда браузер использует для них соответствующие значения по умолчанию.

Введение в CSS3 Multicolumn. Работаем с колонками

Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на 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.

Илон Маск рекомендует:  Шаблон сайта новости HTML, CSS, JavaScripts, 1 страница

Сразу отмечу еще две немаловажные детали.
Во-первых, в большинстве случаев применение многоколоночной верстки для текста можно рассматривать как развитие отображения контента сайта по пути Progressive Enhancement, в рамках которого пользователи более современных сайтов будут получать больше плюшек:

Во-вторых, многоколоночное отображение хорошо сочетается с возможностями Media Queries (и идеями отзывчивого дизайна, Responsive Design), например, при разных размерах экрана можно форматировать текст в разное количество колонок:

И последнее, что я хотел бы отметить во введении, чтобы на этом не останавливаться далее и со спокойной совестью перейти к техническим деталям: при использовании многоколоночной верстки текста надо помнить, что подобное расположение предполагает и определенный порядок чтения (для европейских языков слева направо). Поэтому важно, чтобы для перевода взгляда от одной колонки к другой было необходимо совершать как можно меньше дополнительных действий, особенно это касается вертикальных скроллов:

В этом смысле горизонтальная природа колонок лучше сочетается с горизонтальным скроллом (как это, используется во многих приложениях для Win8 — например, это хорошо видно по приложению USA Today):

В общем, колонки — это прекрасно, но не забывайте об удобстве пользователей. А теперь в бой!

Колонки

Итак, у нас есть текст (контент), который мы хотим разместить в несколько колонок. С чего начать?

Чтобы превратить такой элемент в многоколоночный нужно через стили в CSS выставить одно из свойств: column-width или column-count в значение, отличное от auto. Например,
чтобы разбить текст на две колонки, достаточно сделать так:

Все остальное сделает браузер:

Альтернативное свойство — column-width — позволяет задать оптимальную ширину колонок:

При этом браузер сам разбивает контент на нужное количество колонок, чтобы заполнить внешний контейнер, подстраиваясь под указанную ширину колонок. Важный момент заключается в том, что реальная ширина может отличаться от заданной в большую или меньшую сторону: на картинке выше серая полоска имеет как раз ширину в 150px — и, как видно, она меньше, чем реальная ширина колонки.

Такое поведение определено спецификацией и позволяет (автоматически) добиться большей гибкости при разработке адаптивной разметки:

Например, если у вас контейнер шириной 100px и вы задали колонки шириной 45px, то браузер посчитает, что влезет только две колонки, а чтобы заполнить все место, увеличит размер каждой до 50px. (Здесь также учитывается отступ между колонками, о чем будет рассказано в следующем разделе.)

В определенном смысле, это можно рассматривать как альтернативу указанию с помощью Media Queries разного количества колонок в зависимости от размера окна и с автоматическим рассчетом ширины колонок:

Я второй раз говорю про альтернативу — и вот почему.

count vs. width

Как уже должно быть понятно из описания выше, спецификация дает два способа для задания количества и ширины колонок (кстати, у всех колонок она одинаковая!):

  • column-count позволяет указать число колонок, на которые нужно поделить контент, при этом ширину колонок определяет браузер с учетом доступного пространства.
  • column-width заходит с обратной стороны: указывает, какими примерно должны быть колонки, однако, оставляет рассчет их количества на усмотрение браузера.

В большинстве случаев вы будете использовать либо одно, либо другое, оперируя соответственно числами, либо длинами. Для упрощения записи есть такое короткое свойство columns, реагирующее на формат указываемых данных:

Что будет, если указать и количество колонок, и оптимальную ширину? Согласно спецификации, в этом случае column-count определяет максимальное количество колонок:

В спецификации вы также найдете псевдо-код, описывающий алгоритм рассчета количества колонок и их ширины.

Отступы и разделительные линии

Теперь, когда мы научились создавать колонки, самое время научиться управлять тем, что происходит между ними: отступами и разделительными линиями.

Чтобы изменить отступ между колонками, определено свойство column-gap. Чтобы визуально обозначить раздел между колонками, введено еще одно свойство — column-rule-*:

column-gap

column-gap позволяет указать ширину пространства между колонками. Свойство принимает в качестве значения длину, либо определяемое браузером значение normal (спецификация рекомендует использовать 1em), являющееся также значением по умолчанию:

Важно учитывать, что размер отступа между колонками используется при расчете ширины колонок и их количества. Например, если указано только количество колонок (как в примере выше), то ширина рассчитывается так:

column-rule


Если для обозначения колонок свободного пространства недостаточно, можно использовать свойства column-rule-*, добавляющие линию между колонками. По своему поведению и заданию аналогичные свойствам border-*:

  • column-rule-color — цвет линии,
  • column-rule-style — стиль линии,
  • column-rule-width — ширина линии.

Как и в случае с границами блоков, есть краткая форма записи — просто column-rule:

Важный момент: разделительная линия отрисовывается ровно посередине отступа между колонками, при этом не занимая места. Если вдруг разделительная линия оказывается больше по ширине, она начинает пересекаться с контентом:

Причем отрисовывается разделитель сразу после фона (background) контейнера.

Разрывы

Распределение контента по колонкам — еще одна интересная задача, требующая иногда тонкого управления. По умолчанию, контент — это сплошная «масса», весьма прямолинейным образом, перетекающая из одной колонки в другую. Но что делать, если, скажем, я хочу быть уверенным, что в конце колонки у меня не повиснет одинокий заголовок? Или если мое визуально-эстетическое чувство требует, чтобы цитата не разрывалась на несколько колонок или даже больше: единолично занимала целиком всю колонку?

Для решения всех этих задач есть специальные свойства. Знакомьтесь:

  • break-before — что должно происходить перед блоком контента,
  • break-after — что должно происходить после блока контента,
  • break-inside — что должно происходить внутри блока контента.
Илон Маск рекомендует:  Что такое код open

Если вы знакомы с аналогичными свойствами, отвечающими за разбивку контента на страницы (page-break-*), то данные свойства для колонок ведут себя схожим образом: используют те же значения плюс несколько дополнительных (отмечены курсивом):

  • break-before: auto, always, avoid, left, right, page, column, avoid-page, avoid-column
  • break-after: auto, always, avoid, left, right, page, column, avoid-page, avoid-column
  • break-inside: auto, avoid, avoid-page, avoid-column

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

Важный момент: на сегодня управление разрывами в колонках поддерживается только в Opera 11.10+, — что не удивительно, учитывая, что редактор спецификации Хокон Виум Ли, — и IE10.

Мои эксперименты со свежей версией Оперы и предварительной публичной версией IE10 показывают, что местами имеющиеся реализации отличаются друг от друга. Однако тут я затрудняюсь ответить, какой браузер ведет себя «правильней», так как спецификация хотя и содержит отдельный раздел, посвященный переполнению (overflow), все же оставляет некоторые нюансы на усмотрение браузера (например, позволяет появление дополнительных экстра-колонок при явном указании разрывов).

Растягивание на несколько колонок

Теперь, когда мы научились создавать колонки и немного управлять поведением контента, давайте научимся еще одному трюку — растягиванию контента на несколько колонок. Для этого есть специальное свойство: column-span, принимающее значения none и all.

Нас интересует второе значение. Оно выдергивает блок контента из общего многоколоночного потока и растягивает его на все колонки. При этом контент до этого элемента и контент после автоматически балансируются на все имеющиеся колонки.

В данном случае написанная крупным фраза из диалога растянута на все колонки. Обратите внимание на порядок следования текста: верхняя левая колонка, верхняя правая, фраза диалога, нижняя левая и далее нижняя правая.

Кстати, важный нюанс: если высота колонок ограничена, и дополнительного места под растягивание элементов нет, браузер может вполне легально игнорировать требование растягивания.

Растягивание элементов на сегодня все еще не поддерживается в Firefox.

Заполнение

И последняя деталь, которой вы, наверняка, уже должны были озадачиться: а как, собственно говоря, браузер решает, как ему заполнять колонки?

Для ответа на этот вопрос спецификация вводит свойство column-fill. Заполнять можно сбалансированно (balance), — именно так делается по умолчанию, — стараясь выдержать одинаковую высоту колонок; либо автоматически (auto), заполняя колонки последовательно.

Сравните, вот так браузер балансирует по умолчанию:

А вот так в автоматическом последовательном режиме:

Управление заполнением на сегодня поддерживают только Internet Explorer и Opera.

Итоги

Прежде всего, продолжение повести А.П. Чехова «За яблочки» можно
найти в Викитеке.

По существу дела, следя за развитием веб-стандартов, в том числе по некоторым моим статьям про CSS3 (см. например, статью про CSS3 Grid Layout), я надеюсь, вы с не меньшим вдохновением смотрите на открывающиеся перед веб-разработчиками возможностями. Адаптивные, гибкие и мощные средства для управления размещением контента все ближе и доступнее. А решение сложных задач — все проще.

Интерактив

Поиграться с работой CSS3 Multi-column можно на ietestdrive.com:

Пробуйте, эксперементируйте. Сообщайте разработчикам браузеров о багах. И не забывайте продумать, что увидят пользователи старых (и вроде бы современных, но все еще не полностью поддерживающих стандарт) браузеров — например, можно использовать плагин для jQuery Columnizer. Помните об адаптивности и зрителях маленьких и больших экранов.

Properties for the CSS Columns

Contents

Working with CSS columns

CSS columns is a shorthand for both column-width and column-count properties:

The syntax for this property is rather intuitive:

columns: width count;

We will explain both column-width and column-count properties in the following sections.

Defining column w >

To specify the optimal CSS column width, use the column-width property:

The syntax is simple, as you only need to define one value:

You can either use the default value auto which will simply divide the content into the number of columns specified by column-count equally, or define the width in any CSS unit (e.g., px or ems).

Setting column count

By using the CSS column-count property, you can specify the number of columns an element should be divided into:

Just like column-width , column-count only takes one value:

The default value for CSS column-count is auto , which lets column-width define the number of columns. The browser will divide the window into columns of specified width.

If you need an exact number of columns, define one in a unitless number.

Manipulating the CSS column rule

Just like columns , the column-rule property is actually a shorthand for three subproperties:

  • column-rule-width
  • column-rule-style
  • column-rule-color

The CSS column rule is a kind of border that separates CSS columns from one another.
Using this shorthand, you can define three values for it:

column-rule: width style color;

In the following sections, we will explain each subproperty in more detail.

The w >

The CSS column-rule-width property is used to specify the width of rule between columns:

The syntax only requires you to define one value:

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL