Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions css-multicol-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,48 @@ Stacking context</h3>

Issue: Add final content from previous level

<h3 id=column-pseudo>
Styling Columns: the ''::column'' pseudo-element</h3>

The <dfn selector>::column</dfn> pseudo-element
represents the individual columns
in a [=multi-column container=].
It only exists on [=multi-column containers=].

A [=multi-column container=] has as many ''::column'' pseudo-elements
as it has columns.
They cannot be individually addressed;
any styles applied to a multicol's ''::column'' pseudo-elements
apply to all of them on that element.
Each ''::column'' has the same size and position
as its corresponding column:
the same size as the column's [=available space=] in the [=inline axis=]
and the container's [=content box=] in the [=block axis=].
(It does not cover the gaps/rules between columns.)

''::column'' pseudo-elements are treated as children of their [=multi-column container=],
without any contents.
They <em>do not</em> wrap the contents of the column,
just fill the same space.
Comment on lines +104 to +107
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this is true. I think we might reasonably say that they do wrap the contents of the column; and in the far future when we allow fragment-based styling, we might want to.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We very specifically resolved that ::column was a leaf node, with no contents. See #10715 (comment) You even made some comments in support of that. ^_^


The ''::column'' pseudo-element accepts only a very limited set of properties:

* 'scroll-margin', 'scroll-snap-align', and 'scroll-snap-stop'
(the scroll snap properties that apply to elements <em>inside</em> a [=scroll container=])

Additionally, a ''::column'' pseudo-element can have a ''::scroll-marker'' pseudo-element of its own,
as ''::column::scroll-marker''.
(Other pseudo-elements do not exist on ''::column''.)
Such ''::scroll-marker'' pseudo-elements
inherit from the ''::column'' pseudo-element's [=superior parent=],
rather than the ''::column'' itself.

Note: This list of properties and pseudo-elements that work on ''::column''
will likely be expanded in the future,
as we develop more features
that could usefully care about the <em>position</em> of a column
without caring about the <em>contents</em>.

<h2 id="column-gaps-and-rules">
Column gaps and rules</h2>

Expand Down