@@ -19,8 +19,8 @@ urlPrefix: https://drafts.csswg.org/css-grid-3/; type: dfn; spec: CSS-GRID-3; te
19
19
spec:css-color-5; type:type; text:<color>
20
20
</pre>
21
21
22
- Introduction {# intro}
23
- =====================
22
+ <h2 id=" intro">
23
+ Introduction</h2>
24
24
25
25
<em> This section is not normative.</em>
26
26
@@ -31,8 +31,8 @@ Introduction {#intro}
31
31
application to other container layouts, and giving advanced control over
32
32
where and how gap decorations are painted.
33
33
34
- Value Definitions {# values}
35
- ---------------------------
34
+ <h3 id=" values">
35
+ Value Definitions</h3>
36
36
37
37
This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
38
38
using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]] .
@@ -44,8 +44,8 @@ Value Definitions {#values}
44
44
also accept the <a>CSS-wide keywords</a> as their property value.
45
45
For readability they have not been repeated explicitly.
46
46
47
- Gap decorations {# gap-decorations}
48
- ==================================
47
+ <h2 id=" gap-decorations">
48
+ Gap decorations</h2>
49
49
50
50
Various layouts in CSS such as
51
51
<a>multicol containers</a> , <a>flex containers</a> , <a>grid containers</a> , and <a>masonry containers</a>
@@ -86,8 +86,8 @@ Gap decorations {#gap-decorations}
86
86
</figure>
87
87
</div>
88
88
89
- Layout and painting {# layout-painting}
90
- --------------------------------------
89
+ <h3 id=" layout-painting">
90
+ Layout and painting</h3>
91
91
92
92
This specification does not generally define the geometry of gaps in container layouts;
93
93
that is left to other specifications.
@@ -177,8 +177,8 @@ Layout and painting {#layout-painting}
177
177
<a>Gap decorations</a> are painted relative to pairs of <a>gap intersection points</a> ,
178
178
in the center of the corresponding gap and parallel to its edges.
179
179
180
- Breaking gap decorations into segments: The 'column-rule- break' , 'row-rule-break' , and 'rule-break' properties {#break}
181
- -----------------------------------------------------------------------------------------------------------------------
180
+ <h3 id=" break">
181
+ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break', and 'rule-break' properties</h3>
182
182
183
183
<pre class='propdef'>
184
184
Name : column-rule-break, row-rule-break
@@ -219,7 +219,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
219
219
220
220
Sets the 'column-rule-break' and 'row-rule-break' properties to the same value.
221
221
222
- <h4 id="pairing">Pairing gap intersection points into segments</h4>
222
+ <h4 id="pairing">
223
+ Pairing gap intersection points into segments</h4>
223
224
224
225
<div algorithm>
225
226
In the context of a given |gap|,
@@ -438,8 +439,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
438
439
</figure>
439
440
</div>
440
441
441
- Adjusting gap decoration endpoints: The 'column-rule- outset' , 'row-rule-outset' , and 'rule-outset' properties {#outset}
442
- -----------------------------------------------------------------------------------------------------------------------
442
+ <h3 id=" outset">
443
+ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset', and 'rule-outset' properties</h3>
443
444
444
445
<pre class='propdef'>
445
446
Name : column-rule-outset, row-rule-outset
@@ -579,8 +580,9 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
579
580
For details on how the offset is applied,
580
581
see the steps to <a>determine pairs of gap decoration endpoints</a> .
581
582
582
- Gap decoration paint order: The 'rule-paint-order' property {#paint-order}
583
- --------------------------------------------------------------------------
583
+ <h3 id="paint-order">
584
+ Gap decoration paint order: The 'rule-paint-order' property</h3>
585
+
584
586
<pre class='propdef'>
585
587
Name : rule-paint-order
586
588
Value : row-over-column | column-over-row
@@ -624,14 +626,14 @@ Gap decoration paint order: The 'rule-paint-order' property {#paint-order}
624
626
</figure>
625
627
</div>
626
628
627
- Color, style, and width {# color-style-width}
628
- ============================================
629
+ <h2 id=" color-style-width">
630
+ Color, style, and width</h2>
629
631
630
632
Property definitions in this section supersede the definitions of properties with the same names in
631
633
[[CSS-MULTICOL-1]] .
632
634
633
- Gap decoration color: The ' column-rule-color' and ' row-rule-color' properties {#column-row-rule-color}
634
- ------------------------------------------------------------------------------------------------------
635
+ <h3 id=" column-row-rule-color">
636
+ Gap decoration color: The 'column-rule-color' and 'row-rule-color' properties</h3>
635
637
636
638
<pre class='propdef'>
637
639
Name : column-rule-color, row-rule-color
@@ -663,8 +665,8 @@ Gap decoration color: The 'column-rule-color' and 'row-rule-color' properties {#
663
665
</dd>
664
666
</dl>
665
667
666
- Gap decoration style: The ' column-rule-style' and ' row-rule-style' properties {#column-row-rule-style}
667
- ------------------------------------------------------------------------------------------------------
668
+ <h3 id=" column-row-rule-style">
669
+ Gap decoration style: The 'column-rule-style' and 'row-rule-style' properties</h3>
668
670
669
671
<pre class='propdef'>
670
672
Name : column-rule-style, row-rule-style
@@ -692,8 +694,9 @@ Gap decoration style: The 'column-rule-style' and 'row-rule-style' properties {#
692
694
These properties set the styles of <a>gap decorations</a> .
693
695
The <<line-style>> values are interpreted as in the <a href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders">collapsing border model</a> .
694
696
695
- Gap decoration width: The 'column-rule-width' and 'row-rule-width' properties {#column-row-rule-width}
696
- ------------------------------------------------------------------------------------------------------
697
+ <h3 id="column-row-rule-width">
698
+ Gap decoration width: The 'column-rule-width' and 'row-rule-width' properties</h3>
699
+
697
700
<pre class='propdef'>
698
701
Name : column-rule-width, row-rule-width
699
702
Value : <<line-width-list>> | <<auto-line-width-list>>
@@ -727,8 +730,8 @@ Gap decoration width: The 'column-rule-width' and 'row-rule-width' properties {#
727
730
Issue: Should the "force to 0" behavior apply when lists of values are involved?
728
731
If so, how should this be handled with unaligned lists?
729
732
730
- Lists of values and the ''repeat-line-color/repeat()'' notation {# lists-repeat}
731
- -------------------------------------------------------------------------------
733
+ <h3 id=" lists-repeat">
734
+ Lists of values and the ''repeat-line-color/repeat()'' notation</h3>
732
735
733
736
Each of the properties in this section accepts a space-separated list of values.
734
737
Setting multiple values in this way allows for varying <a>gap decorations</a> within a given container.
@@ -867,8 +870,8 @@ Lists of values and the ''repeat-line-color/repeat()'' notation {#lists-repeat}
867
870
except that in step 2, change all instances of "first" to "last".
868
871
</div>
869
872
870
- Gap decoration shorthands: The 'column-rule' and 'row-rule' properties {# gap-decoration-shorthands}
871
- ---------------------------------------------------------------------------------------------------
873
+ <h3 id=" gap-decoration-shorthands">
874
+ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties</h3>
872
875
873
876
<pre class='propdef shorthand'>
874
877
Name : column-rule, row-rule
@@ -893,8 +896,8 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties {#gap-dec
893
896
894
897
These shorthands set the corresponding width, style, and color properties as a set.
895
898
896
- Bi-directional gap decoration shorthands: The ' rule-color' , 'rule-style' , 'rule-width' , and 'rule' properties {#rule- bi-directional}
897
- ------------------------------------------------------------------------------------------------------------------------------------
899
+ <h3 id=" rule-bi-directional">
900
+ Bi-directional gap decoration shorthands: The 'rule-color', 'rule-style', 'rule-width', and 'rule' properties</h3>
898
901
899
902
<pre class='propdef shorthand'>
900
903
Name : rule-color
@@ -926,10 +929,12 @@ Bi-directional gap decoration shorthands: The 'rule-color', 'rule-style', 'rule-
926
929
927
930
These shorthands set the corresponding column and row properties to the same values.
928
931
929
- <h2 class=no-num id=privacy>Privacy Considerations</h2>
932
+ <h2 id="privacy">
933
+ Privacy Considerations</h2>
930
934
931
935
No new privacy considerations have been reported on this specification.
932
936
933
- <h2 class=no-num id=security>Security Considerations</h2>
937
+ <h2 id="security">
938
+ Security Considerations</h2>
934
939
935
940
No new security considerations have been reported on this specification.
0 commit comments