You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p> If the links in the main nav element are placed in a namedflow, that flow can be directed through both the main nav element and the overflow nav box in the menu:
309
+
<p> If the links in the main nav element are placed in a <aclass=cssdata-link-type=maybehref=#named-flow0title="named flow">named flow</a>, that flow can be directed through both the main nav element and the overflow nav box in the menu:
An example of aggregating content can fill a named flow with content from multiple sources.
338
+
339
+
<p> Since content is assigned to a <aclass=cssdata-link-type=maybehref=#named-flow0title="named flow">named flow</a> using a CSS selector, the content can come from multiple sources. The resulting aggregation can be displayed in a single box or flowed through multiple boxes as above.
<p> You can take the "breaking" stories and display them above all the others using two lines of CSS:
353
+
354
+
<pre><codeclass=css>
355
+
.breaking {
356
+
flow-into: breaking-news;
357
+
}
358
+
.breaking-news {
359
+
flow-from: breaking-news;
360
+
}
361
+
</code></pre>
362
+
<p> Given more data accessible to CSS selectors, you could rearrange the articles in other ways (sports on top, etc.) depending on the user’s preferences.
Copy file name to clipboardExpand all lines: css-regions/Overview.src.html
+47-11Lines changed: 47 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -23,8 +23,8 @@ <h2 id="introduction">
23
23
24
24
The core concept behind CSS Regions
25
25
is the ability to say,
26
-
"Display <em>this</em> content (a named flow)
27
-
over <em>there</em> (a region chain)."
26
+
"Display <em>this</em> content (a ''named flow'')
27
+
over <em>there</em> (a ''region chain'')."
28
28
The simplest example is:
29
29
30
30
<divclass="example">
@@ -44,12 +44,13 @@ <h2 id="introduction">
44
44
put it into a flow named "my-flow",
45
45
and display the contents of "my-flow"
46
46
in the box from the element that matches <code>#there</code>.
47
-
This example has a single content source for the named flow,
48
-
and a single box for the region chain.
47
+
This example has a single content source for the ''named flow'',
48
+
and a single box for the ''region chain''.
49
49
Named flows can also have multiple sources
50
-
and use multiple boxes for the region chain.
50
+
and use multiple boxes for the ''region chain''.
51
51
52
-
This building block allows multiple uses -
52
+
The ''named flow'' mechanism can be used
53
+
in several different ways -
53
54
some of which are
54
55
custom overflow handling,
55
56
aggregating content,
@@ -101,7 +102,7 @@ <h2 id="introduction">
101
102
}
102
103
</code></pre>
103
104
104
-
So the top box in the region chain
105
+
So the top box in the ''region chain''
105
106
is limited to 80% of the viewport height.
106
107
If the article content doesn't fit in that box,
107
108
the article will continue
@@ -127,7 +128,7 @@ <h2 id="introduction">
127
128
the red outline indicates the size of the viewport.
128
129
129
130
<p>This example links just two boxes together,
130
-
but more boxes could be added to the region chain
131
+
but more boxes could be added to the ''region chain''
131
132
to regularly interleave other content with the article.
132
133
</div>
133
134
@@ -143,7 +144,7 @@ <h2 id="introduction">
143
144
</div>
144
145
</code></pre>
145
146
146
-
If the links in the main nav element are placed in a named flow, that flow can be directed through both the main nav element and the overflow nav box in the menu:
147
+
If the links in the main nav element are placed in a ''named flow'', that flow can be directed through both the main nav element and the overflow nav box in the menu:
147
148
148
149
<pre><codeclass="css">
149
150
nav a {
@@ -175,7 +176,34 @@ <h2 id="introduction">
175
176
</div>
176
177
177
178
<divclass="example">
178
-
An example of aggregating content can fill a named flow with content from multiple sources.
179
+
180
+
Since content is assigned to a ''named flow'' using a CSS selector, the content can come from multiple sources. The resulting aggregation can be displayed in a single box or flowed through multiple boxes as above.
0 commit comments