Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/ below:

CSS Gap Decorations Module Level 1

This section is not normative.

CSS Multicol 1 § 4 Column Gaps and Rules allows for rules to be drawn between columns in a multicol container. This specification expands upon the column-rule-width, column-rule-style, and column-rule-color properties, adding equivalents in the row direction, expanding their application to other container layouts, and giving advanced control over where and how gap decorations are painted.

This specification follows the CSS property definition conventions from [CSS2] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly.

Various layouts in CSS such as multicol containers, flex containers, grid containers, and masonry containers position child boxes adjacent to each other with gaps, also known as gutters, between them. Each such gap may contain a gap decoration, which is a visible separator (such as a line) painted between adjacent boxes.

.grid-with-spans {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

This specification does not generally define the geometry of gaps in container layouts; that is left to other specifications. See CSS Box Alignment 3 § 8 Gaps Between Boxes for definitions pertaining to multicol containers, flex containers, and grid containers.

Gap decorations do not take up space. That is, the presence or width of a gap decoration will not alter the placement of anything else. If a gap decoration is wider than its gap, any adjacent boxes will overlap the decoration, and in some cases the decoration may extend outside the box of the container. Gap decorations are painted just above the border of the container. For scrollable containers, note that while the border and background of the container aren’t scrolled, the decorations need to scroll along with items in the container.

A gap intersection point is defined to exist in each of the following locations:

• The center of an intersection between a gap and the content edge of the container.
• The center of an intersection between gaps in different directions.

The following examples illustrate the locations of gap intersection points, marked with a magenta + in each case.

.grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  background: rgb(255 255 128);
}
.grid > * {
  border: 1px dashed black;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  background: rgb(255 255 128);
}
.flex > * {
  border: 1px dashed black;
}

Note: CSS Box Alignment 3 § 8.1 Row and Column Gutters: the row-gap and column-gap properties defines cross-direction gaps in flex containers as being between adacent flex items in a single line. Thus, in the example above, even though the right edges of #4 and #7 line up, and the left edges of #5 and #8 line up, the spaces between those two pairs of items are two distinct gaps since they are on different lines. Therefore, the intersection between #4, #5, #7, and #8 contains two gap intersection points whose locations coincide: one at the bottom of the gap between #4 and #5, and one at the top of the gap between #7 and #8.

Gap decorations are painted relative to pairs of gap intersection points, in the center of the corresponding gap and parallel to its edges.

Sets the behavior for breaking decorations within a given gap into segments at visible "T" or "cross" intersections formed by items in the container. Precise details for how to apply these values are given in the steps to determine pairs of gap decoration endpoints.

none

Gap decorations do not start or end at visible "T" or "cross" intersections. Instead, a single continuous decoration is painted from one end of the gap to the other.

spanning-item

Gap decorations start and end at visible "T" intersections but continue through visible "cross" intersections.

intersection

Gap decorations start and end at visible "T" and "cross" intersections.

Bikeshed these values.

Sets the column-rule-break and row-rule-break properties to the same value.

In the context of a given

, a pair of

and

is considered

if a line segment from

to

, with the same width as

, intersects a child item in the container.

Note: The primary use case for this definition is to avoid having gap decorations intersect spanning items when not intended by the author, for example when a spanning item touches the edge of the container, or when a spanning item forms a "T intersection". However, the specific phrasing of the definition is also intended to address cases such as the one below:

The four marked gap intersection points fall along a common gap centerline. However, because item 3 is slightly wider than items 1 and 5, the second and third points from the top are discontiguous. Thus, the two upper gap intersection points form a pair, and the two lower gap intersection points form a pair. (There is an additional pair of gap intersection points, slightly offset to the right of the two middle points, which are not marked. These points will form another pair.)

To

within a given

:

1. Let pairs be an empty list. Let endpoints be the list of gap intersection points that fall along the centerline of gap, ordered from start to end along gap’s axis. Let break be the used value of either column-rule-break or row-rule-break, whichever applies to gap.
2. If endpoints contains fewer than 2 items, return pairs.
3. If break is other than none, and the first two items in endpoints are discontiguous, remove the first item from endpoints, then go back to step 2.
4. Remove the first item from endpoints. Let start be equal to that item.
5. Remove the first item from endpoints. Let end be equal to that item.
6. If endpoints is non-empty, and any of the following conditions are true...
   1. break is none.
   2. break is spanning-item, and start is not discontiguous with the first item in endpoints.
   3. break is intersection, and start is not discontiguous with the first item in endpoints, and the intersection is flanked by spanning items on opposing sides.
   ...then go back to step 5.
7. Compute the offset for start within gap. Offset start by the result, in the forward direction along gap’s axis.
8. Compute the offset for end within gap. Offset end by the result, in the reverse direction along gap’s axis.
9. Add to pairs a tuple consisting of start and end.
10. Go back to step 2.

A gap decoration is painted between each pair of endpoints identified using the steps above.

The following examples illustrate various settings for the *-rule-break properties. To make the differences more apparent, the *-rule-outset properties are set to 0.

.break-none-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: none;
  rule-outset: 0px;
}

.break-spanning-item-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: spanning-item;
  rule-outset: 0px;
}

.break-intersection-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
  rule-outset: 0px;
}

.break-none-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: none;
  rule-outset: 0px;
}

Note: Because flexbox has no concept of spanning items, spanning-item on a flexbox has the same effect as none.

.break-intersection-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
  rule-outset: 0px;
}

These properties can be used to offset the endpoints of gap decorations relative to the gap intersection points which would normally determine their endpoints. The initial value of 50% places the gap decoration endpoint in the center of the intersection. With a value of 0, the gap decoration endpoint will coincide with the edge of the intersection. Positive values extend towards the center of the intersection; negative values recede from it. These offsets also apply at the edges of the container, where positive values may extend beyond the content bounds of the container.

Sets the column-rule-outset and row-rule-outset properties to the same value.

.outset-0px {
  column-rule-outset: 0px;
  column-rule-break: intersection;
}

.outset-5px {
  column-rule-outset: 5px;
  column-rule-break: intersection;
}

.outset-50percent {
  column-rule-outset: 50%;
  column-rule-break: intersection;
}

.outset-negative-5px {
  column-rule-outset: -5px;
  column-rule-break: intersection;
}

When considering the gap intersection points within a given gap, each point is assigned a crossing gap width, defined as follows:

At the content edge of the container

The crossing gap width is 0.

At an intersection with another gap

The crossing gap width is the used value of the column-gap or row-gap property, whichever applies to the intersecting gap.

To

for a given

within a given

:

1. Let width be the crossing gap width for point.
2. Let outset be the computed value of either column-rule-outset or row-rule-outset, whichever applies to gap. Resolve any percentages in outset against width.
3. Let result be width multiplied by 50%. Subtract outset from result.
4. Return result.

For details on how the offset is applied, see the steps to determine pairs of gap decoration endpoints.

Sets the paint order for gap decorations in two-dimensional containers.

The following examples illustrate adjustment of gap decoration paint order using the rule-paint-order property.

.row-over-coulumn {
  rule-paint-order: row-over-column;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

rule-paint-order: column-over-row;
row-rule: 6px solid red;
column-rule: 6px solid blue;

Property definitions in this section supersede the definitions of properties with the same names in [CSS-MULTICOL-1].

<line-color-list>          = [ <line-color-or-repeat> ]+

<auto-line-color-list>     = [ <line-color-or-repeat> ]*
                             <auto-repeat-line-color>
                             [ <line-color-or-repeat> ]*

<line-color-or-repeat>     = [ <color> | <repeat-line-color> ]

<repeat-line-color>        = repeat( [ <integer [1,∞]> ] , [ <color> ]+ )

<auto-repeat-line-color>   = repeat( auto , [ <color> ]+ )

<color>

Sets the color of gap decorations.

<line-style-list>          = [ <line-style-or-repeat> ]+

<auto-line-style-list>     = [ <line-style-or-repeat> ]*
                             <auto-repeat-line-style>
                             [ <line-style-or-repeat> ]*

<line-style-or-repeat>     = [ <line-style> | <repeat-line-style> ]

<repeat-line-style>        = repeat( [ <integer [1,∞]> ] , [ <line-style> ]+ )

<auto-repeat-line-style>   = repeat( auto , [ <line-style> ]+ )

These properties set the styles of gap decorations. The <line-style> values are interpreted as in the collapsing border model.

<line-width-list>          = [ <line-width-or-repeat> ]+

<auto-line-width-list>     = [ <line-width-or-repeat> ]*
                             <auto-repeat-line-width>
                             [ <line-width-or-repeat> ]*

<line-width-or-repeat>     = [ <line-width> | <repeat-line-width> ]

<repeat-line-width>        = repeat( [ <integer [1,∞]> ] , [ <line-width> ]+ )

<auto-repeat-line-width>   = repeat( auto , [ <line-width> ]+ )

This property sets the widths of gap decorations. Negative values are not allowed.

If the computed value of column-rule-style is none or hidden, then the computed value of column-rule-width is 0. This behavior is for backwards compatibility with CSS Multicol 1 § 4.4 The Width Of Column Rules: the column-rule-width property.

Should the "force to 0" behavior apply when lists of values are involved? If so, how should this be handled with unaligned lists?

Each of the properties in this section accepts a space-separated list of values. Setting multiple values in this way allows for varying gap decorations within a given container.

An author might specify alternating red and blue column rules as follows:

column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: red blue;

Such a list may contain repeat() notations. Similar to CSS Grid Layout 1 § 7.2.3 Repeating Rows and Columns: the repeat() notation, these notations allow a series of gap decorations that exhibit a recurring pattern to be written in a more compact form.

The generic form of the repeat() syntax is, approximately,

repeat( [ <integer [1,∞]> | auto ] , <value>+ )

The first argument to repeat() specifies the number of repetitions.

<integer>

Specifies an integer repeater. An integer repeater expands out to the list of values in the second argument, repeated as many times as specified by the first argument.

An author may write:

column-rule-color: gray red blue red blue red blue gray;

Or shorten to the following, which produces the same sequence of colors:

column-rule-color: gray repeat(3, red blue) gray;

auto

Specfies an auto repeater. An auto repeater will be used to fill in values for gaps that would not otherwise receive values from other parts of the list. At most one repeat() in a given list of values may be an auto repeater.

Continuing from the previous example, if the author does not know how many columns will be in the final layout, they might instead write:

column-rule-color: gray repeat(auto, red blue) gray;

Which will produce a gray decoration in the first and last column gaps, and alternating red and blue decorations in the in-between column gaps.

The second argument to repeat() is a space-separated list of values that would be accepted by the property in which the repeat() appears.

To

to a list of

using a list of

:

1. Replace any integer repeaters in values with their expanded-out equivalents.
2. If the list contains no auto repeater, then:
   1. Beginning from the first item in values and the first item in gaps, assign each value to the corresponding gap. If there are fewer values than gaps, repeat beginning from the first item in values, as many times as needed.
   2. End this algorithm.
3. values contains an auto repeater. Let leading count be the number of items in values before the auto repeater. Let trailing count be the number of items in values after the auto repeater.
4. Partition gaps as follows:
   1. Let leading gaps contain the first leading count items in gaps.
   2. Let trailing gaps contain the last trailing count items in gaps, excluding any items in leading gaps.
   3. Let auto gaps contain any items in gaps that are not in either leading gaps or trailing gaps.
5. If leading gaps is non-empty, assign gap decoration values to leading gaps using the first leading count items in values.
6. If trailing gaps is non-empty, assign gap decoration values in reverse to trailing gaps using the last trailing count items in values.
7. If auto gaps is non-empty, assign gap decoration values to auto gaps using the list of values in the second argument of the auto repeater.

To

to a list of

using a list of

, follow the same steps as to

, except that in step 2, change all instances of "first" to "last".

<gap-rule-list>        = <gap-rule-or-repeat>#

<gap-auto-rule-list>   = <gap-rule-or-repeat>#? ,
                         <gap-auto-repeat-rule> ,
                         <gap-rule-or-repeat>#?

<gap-rule-or-repeat>   = <gap-rule> | <gap-repeat-rule>

<gap-repeat-rule>      = repeat( <integer [1,∞]> , <gap-rule># )

<gap-auto-repeat-rule> = repeat( auto , <gap-rule># )

<gap-rule>             = <line-width> || <line-style> || <color>

These shorthands set the corresponding width, style, and color properties as a set.

These shorthands set the corresponding column and row properties to the same values.

No new privacy considerations have been reported on this specification.

No new security considerations have been reported on this specification.

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <strong class="advisement">, like this: UAs MUST provide an accessible alternative.

A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4