Skip to content

Commit

Permalink
[css-gaps-1] Drop 'gap-' from shorthand names per WG resolution. #11495
Browse files Browse the repository at this point in the history
  • Loading branch information
@kbabbitt
kbabbitt committed Feb 21, 2025
1 parent 90c4b82 commit 3e16a53
Showing 1 changed file with 33 additions and 33 deletions.
66 changes: 33 additions & 33 deletions css-gaps-1/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,8 @@ Layout and painting {#layout-painting}
<a>Gap decorations</a> are painted relative to pairs of <a>gap intersection points</a>,
in the center of the corresponding gap and parallel to its edges.

Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break', and 'gap-rule-break' properties {#break}
---------------------------------------------------------------------------------------------------------------------------
Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break', and 'rule-break' properties {#break}
-----------------------------------------------------------------------------------------------------------------------

<pre class='propdef'>
Name: column-rule-break, row-rule-break
Expand Down Expand Up @@ -189,7 +189,7 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
Issue: Bikeshed these values.

<pre class='propdef shorthand'>
Name: gap-rule-break
Name: rule-break
Value: <<'column-rule-break'>>
Applies to: Same as 'column-rule-break' and 'row-rule-break'
</pre>
Expand Down Expand Up @@ -306,8 +306,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
<div class="example">
<pre>
.break-intersection {
gap-rule-break: intersection;
gap-rule-outset: 0px;
rule-break: intersection;
rule-outset: 0px;
}
</pre>
<img src="images/example-break-intersection.png">
Expand All @@ -319,8 +319,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
<div class="example">
<pre>
.break-spanning-item {
gap-rule-break: spanning-item;
gap-rule-outset: 0px;
rule-break: spanning-item;
rule-outset: 0px;
}
</pre>
<img src="images/example-break-spanning-item.png">
Expand All @@ -333,8 +333,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
<div class="example">
<pre>
.break-none {
gap-rule-break: none;
gap-rule-outset: 0px;
rule-break: none;
rule-outset: 0px;
}
</pre>
<img src="images/example-break-none.png">
Expand All @@ -344,8 +344,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
</figcaption>
</div>

Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset', and 'gap-rule-outset' properties {#outset}
---------------------------------------------------------------------------------------------------------------------------
Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset', and 'rule-outset' properties {#outset}
-----------------------------------------------------------------------------------------------------------------------

<pre class='propdef'>
Name: column-rule-outset, row-rule-outset
Expand All @@ -367,7 +367,7 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
where positive values may extend beyond the content bounds of the container.

<pre class='propdef shorthand'>
Name: gap-rule-outset
Name: rule-outset
Value: <<'column-rule-outset'>>
Applies to: Same as 'column-rule-outset' and 'row-rule-outset'
</pre>
Expand Down Expand Up @@ -477,10 +477,10 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
For details on how the offset is applied,
see the steps to <a>determine pairs of gap decoration endpoints</a>.

Gap decoration paint order: The 'gap-rule-paint-order' property {#paint-order}
------------------------------------------------------------------------------
Gap decoration paint order: The 'rule-paint-order' property {#paint-order}
--------------------------------------------------------------------------
<pre class='propdef'>
Name: gap-rule-paint-order
Name: rule-paint-order
Value: row-over-column | column-over-row
Initial: row-over-column
Applies to: <a>grid containers</a>, <a>flex containers</a>, and <a>masonry containers</a>
Expand All @@ -490,12 +490,12 @@ Gap decoration paint order: The 'gap-rule-paint-order' property {#paint-order}

Sets the paint order for <a>gap decorations</a> in two-dimensional containers.

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

<div class="example">
<pre>
.row-over-coulumn {
gap-rule-paint-order: row-over-column;
rule-paint-order: row-over-column;
row-rule: 6px solid red;
column-rule: 6px solid blue;
}
Expand All @@ -508,7 +508,7 @@ Gap decoration paint order: The 'gap-rule-paint-order' property {#paint-order}

<div class="example">
<pre>
gap-rule-paint-order: column-over-row;
rule-paint-order: column-over-row;
row-rule: 6px solid red;
column-rule: 6px solid blue;
</pre>
Expand Down Expand Up @@ -766,23 +766,23 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties {#gap-dec

<pre class='propdef shorthand'>
Name: column-rule, row-rule
Value: <<gap-rule-list>> | <<auto-gap-rule-list>>
Value: <<rule-list>> | <<auto-rule-list>>
</pre>

<pre class='prod'>
<dfn>&lt;gap-rule-list&gt;</dfn> = <<gap-rule-or-repeat>> [ / <<gap-rule-or-repeat>> ]*
<dfn>&lt;rule-list&gt;</dfn> = <<rule-or-repeat>> [ / <<rule-or-repeat>> ]*
<dfn>&lt;auto-gap-rule-list&gt;</dfn> = [ [ <<gap-rule-or-repeat>> ] / ]*
<<auto-repeat-gap-rule>>
[ / [ <<gap-rule-or-repeat>> ] ]*
<dfn>&lt;auto-rule-list&gt;</dfn> = [ [ <<rule-or-repeat>> ] / ]*
<<auto-repeat-rule>>
[ / [ <<rule-or-repeat>> ] ]*
<dfn>&lt;gap-rule-or-repeat&gt;</dfn> = [ <<gap-rule>> | <<repeat-gap-rule>> ]
<dfn>&lt;rule-or-repeat&gt;</dfn> = [ <<rule>> | <<repeat-rule>> ]
<dfn>&lt;repeat-gap-rule&gt;</dfn> = repeat( [ <<integer [1,∞]>> ] , [ <<gap-rule>> ]# )
<dfn>&lt;repeat-rule&gt;</dfn> = repeat( [ <<integer [1,∞]>> ] , [ <<rule>> ]# )
<dfn>&lt;auto-repeat-gap-rule&gt;</dfn> = repeat( auto , [ <<gap-rule>> ]# )
<dfn>&lt;auto-repeat-rule&gt;</dfn> = repeat( auto , [ <<rule>> ]# )
<dfn>&lt;gap-rule&gt;</dfn> = [ <<line-width>> || <<line-style>> || <<color>> ]
<dfn>&lt;rule&gt;</dfn> = [ <<line-width>> || <<line-style>> || <<color>> ]
</pre>

These shorthands set the corresponding width, style, and color properties as a set.
Expand All @@ -792,32 +792,32 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties {#gap-dec
Note that commas are reserved for future extension of the grammar to support
<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md#placement-of-gap-decorations">gap decoration areas</a>.

Bi-directional gap decoration shorthands: The 'gap-rule-color', 'gap-rule-style', 'gap-rule-width', and 'gap-rule' properties {#gap-rule-bi-directional}
--------------------------------------------------------------------------------------------------------------------------------------------------------
Bi-directional gap decoration shorthands: The 'rule-color', 'rule-style', 'rule-width', and 'rule' properties {#rule-bi-directional}
------------------------------------------------------------------------------------------------------------------------------------

<pre class='propdef shorthand'>
Name: gap-rule-color
Name: rule-color
Value: <<'column-rule-color'>>
Inherited: no
Applies to: Same as 'column-rule-color' and 'row-rule-color'
</pre>

<pre class='propdef shorthand'>
Name: gap-rule-style
Name: rule-style
Value: <<'column-rule-style'>>
Inherited: no
Applies to: Same as 'column-rule-style' and 'row-rule-style'
</pre>

<pre class='propdef shorthand'>
Name: gap-rule-width
Name: rule-width
Value: <<'column-rule-width'>>
Inherited: no
Applies to: Same as 'column-rule-width' and 'row-rule-width'
</pre>

<pre class='propdef shorthand'>
Name: gap-rule
Name: rule
Value: <<'column-rule'>>
Inherited: no
Applies to: Same as 'column-rule' and 'row-rule'
Expand Down

0 comments on commit 3e16a53

Please sign in to comment.