forked from w3c/csswg-wiki
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
170 lines (160 loc) · 7.92 KB
/
Copy pathindex.html
File metadata and controls
170 lines (160 loc) · 7.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Row and Column Rule Styling - CSS Working Group Wiki (Archive)</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 900px; margin: 0 auto; padding: 1.5em 1em; line-height: 1.6;
color: #1f2328; background: #fff;
}
.archive-banner {
background: #fff8c5; border: 1px solid #d4a72c; border-radius: 6px;
padding: 0.75em 1em; margin-bottom: 1.5em; font-size: 0.9em;
}
.archive-banner strong { color: #6e5600; }
header { border-bottom: 1px solid #d1d5db; padding-bottom: 1em; margin-bottom: 1.5em; }
header h1 { margin: 0; font-size: 1.25em; }
header h1 a { color: #0366d6; text-decoration: none; }
header h1 a:hover { text-decoration: underline; }
nav { margin-top: 0.5em; font-size: 0.9em; }
nav a { color: #656d76; text-decoration: none; margin-right: 1em; }
nav a:hover { color: #0366d6; }
h1, h2, h3, h4 { color: #1f2328; margin-top: 1.5em; }
h1:first-child { margin-top: 0; }
a { color: #0366d6; }
code { background: #f6f8fa; padding: 0.15em 0.3em; border-radius: 3px; font-size: 0.9em; }
pre { background: #f6f8fa; padding: 1em; overflow: auto; border-radius: 6px; }
pre code { background: none; padding: 0; }
table { border-collapse: collapse; margin: 1em 0; }
th, td { border: 1px solid #d1d5db; padding: 0.4em 0.8em; }
th { background: #f6f8fa; }
img { max-width: 100%; }
.breadcrumb { font-size: 0.85em; color: #656d76; margin-bottom: 1em; }
.breadcrumb a { color: #656d76; }
ul, ol { padding-left: 1.5em; }
li { margin: 0.25em 0; }
.plugin_note { background: #f0f4f8; border-left: 4px solid #0366d6; padding: 0.75em 1em; margin: 1em 0; border-radius: 3px; }
abbr { text-decoration: underline dotted; cursor: help; }
@media (prefers-color-scheme: dark) {
body { background: #0d1117; color: #e6edf3; }
.archive-banner { background: #3d2e00; border-color: #6e5600; }
.archive-banner strong { color: #f0c000; }
header { border-bottom-color: #30363d; }
header h1 a { color: #58a6ff; }
nav a { color: #8b949e; }
nav a:hover { color: #58a6ff; }
h1, h2, h3, h4 { color: #e6edf3; }
a { color: #58a6ff; }
code, pre { background: #161b22; }
th, td { border-color: #30363d; }
th { background: #161b22; }
.breadcrumb, .breadcrumb a { color: #8b949e; }
.plugin_note { background: #161b22; border-color: #58a6ff; }
}
</style>
</head>
<body>
<div class="archive-banner">
<strong>Archive Notice:</strong> This is a read-only archive of the CSS Working Group Wiki.
The original wiki was hosted at wiki.csswg.org.
</div>
<header>
<h1><a href="/">CSS Working Group Wiki</a></h1>
<nav>
<a href="/">Home</a>
<a href="/spec/">Specs</a>
<a href="/ideas/">Ideas</a>
<a href="/test/">Testing</a>
<a href="/wiki/">About</a>
</nav>
</header>
<div class="breadcrumb"><a href="/">Home</a> / <a href="/ideas/">ideas</a> / gutter-styling</div>
<main>
<h1 id="row-and-column-rule-styling">Row and Column Rule Styling</h1>
<p>
See discussion in: <a href="https://github.com/w3c/csswg-drafts/issues/2748" title="https://github.com/w3c/csswg-drafts/issues/2748" rel="noopener">https://github.com/w3c/csswg-drafts/issues/2748</a> and <a href="https://github.com/w3c/csswg-drafts/issues/5080" title="https://github.com/w3c/csswg-drafts/issues/5080" rel="noopener">https://github.com/w3c/csswg-drafts/issues/5080</a>
</p>
<p>
Existing properties:
</p>
<pre class="code">column-rule: <color> || <line-style> || <line-width>
column-rule-color: <color>
column-rule-style: <line-style>
column-rule-width: <line-width></pre>
<p>
Proposed properties (plus also row- and unprefixed versions of all these):
</p>
<pre class="code">column-rule-extent: span-skip | no-skip | span-break | corner-break
column-rule-inset: nearest | center | farthest | <length>
column-rule-image: <border image syntax but with only one axis>
rule-image-source: none | <image>
rule-image-slice: [ <number [0,∞]> | <percentage [0,∞]> ]{1,2}
rule-image-width: [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]
rule-image-outset: [ <length [0,∞]> | <number [0,∞]> ]{1,2}
rule-image-repeat: [ stretch | repeat | round | space ]
</pre><h4 id="column-rule-image">column-rule-image</h4>
<p>
Following the <code>border-image</code> model, rules can have a three-part image that is sliced and applied. See <a href="https://github.com/w3c/csswg-drafts/issues/5080" title="https://github.com/w3c/csswg-drafts/issues/5080" rel="noopener">Issue 5080</a> The image is applied per rule segment, see <code>column-rule-extent</code>.
</p><h4 id="column-rule-extent">column-rule-extent</h4>
<p>
<code>column-rule-extent</code> specifies how column rules are segmented. Each segment is drawn separately, and has its own inset and image application, if any. See <a href="https://github.com/w3c/csswg-drafts/issues/5080#issuecomment-636545237" title="https://github.com/w3c/csswg-drafts/issues/5080#issuecomment-636545237" rel="noopener">Sebastian Zartner's illustrations</a>.
</p>
<ul>
<li class="level1"><code>no-skip</code> - extends across the grid, going behind grid items</li>
<li class="level1"><code>span-skip</code> - extends across the grid, not drawn behind grid items</li>
<li class="level1"><code>span-break</code> - spanning items split rule into individual segments</li>
<li class="level1"><code>corner-break</code> - split at every intersection</li>
</ul>
<p>
Note: In Flexbox, the cross-axis rules are always segmented between flex lines.
</p><h5 id="stacking-order-of-rules">Stacking Order of Rules</h5>
<p>
Rules are drawn in writing-mode order from start to end. Between rows and columns, three reasonable options are:
</p>
<ul>
<li class="level1">always columns first (like table backgrounds)</li>
<li class="level2">“warp then weft” based on <code>grid-auto-flow</code> or <code>flex-flow</code></li>
<li class="level2">add a switch for which axis paints on top</li>
</ul>
<p>
Thought: Since flexbox probably wants to switch depending on which axis is main (and draw the main axis second), probably grid should do the same and respond to grid-auto-flow.
</p>
<p>
Note that rules are already defined to paint over the container's backgrounds and borders, but below all its content.
</p>
<p>
ISSUE: Do we want to give them a z-index of 0 so they can be underpainted using z-index: -1?
</p><h4 id="column-rule-inset">column-rule-inset</h4>
<p>
<code>column-rule-inset</code> specifies how far a column rule extends into (or recedes from) an intersecting gap (or the edge of the container).
</p>
<ul>
<li class="level1"><code>nearest</code> - Segment not extend into the gap. Computes to zero.</li>
<li class="level1"><code>center</code> - Segment extends to the center of the gap.</li>
<li class="level1"><code>farthest</code> - Segment crosses the entire gap.</li>
<li class="level1"><code><length></code> - Segment intrudes by given length.</li>
</ul>
<p>
At the edge of a container, where there is no gap, a gap is assumed to exist for the purpose of calculating the rule's length. This ensures symmetry.
</p>
<p>
Note: <code>center</code> and <code>farthest</code> cannot compute to a length, because gaps can depend on layout, e.g. due to <code>place-content: space-around</code>.
</p>
<p>
Alternative syntax (positive numbers outward):
</p>
<pre class="code">column-rule-outset: <length> | gap-center | gap-width</pre><h3 id="styling-individual-gaps">Styling Individual Gaps</h3>
<p>
Styling individual gaps could be done with a pseudo-element that accepts all the above properties (and no other properties). Something like this might work:
</p>
<pre class="code">container::[column-|row-]?gap( <An+B> | <line-name> )</pre>
<p>
Styling individual segments would be much more complicated, as identifying the segments in a robust manner is not straightforward.
</p>
</main>
</body>
</html>