[css3-layout] Minor text changes.

Author: bert-github

css-template/Overview.src.html

@@ -115,11 +115,11 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
 possible break points (see the 'break-*' properties from
 [[CSS3-BREAK]]).
 
-<p>The <a href="#region-based">'@region'
-rule</a> [[!CSS3-REGIONS]] allows to select
+<p>The '@region'
+rule [[!CSS3-REGIONS]] allows to select
 (parts of) elements based on whether they fall in a certain slot or
 not, and thus style content differently in different slots
-(region-based styling).
+(<em>region-based styling</em>).
 
 <!--=================================================================-->
 
@@ -208,18 +208,19 @@ <h3>Summary and use cases</h3>
 
 <li><p>Complex forms, where the alignment of labels and form fields may
 be easier with the properties of this module than with the properties
-for tables and margins.
+for tables, floats and margins.
 
 <li><p>GUIs, where buttons, toolbars, labels, icons, etc., are aligned in
 complex ways and have to stay aligned (and not wrap, for example) when
 the window is resized.
 
 <li><p>Paged displays (e.g., printed media) where each page
-is divided in fixed areas for different kinds of content.
+is divided into fixed areas for different kinds of content.
 
 <li><p>Complex pages with multiple regions, where the style
 of the text does not only depend on the type of element it comes from,
-but also on the region it is displayed in.
+but also on the region it is displayed in (<em>region-based
+styling</em>).
 
 <li>Paged displays with complex running headers and footers, e.g.,
 running headers that are in between parts of the page content, rather
@@ -374,7 +375,7 @@ <h3>Summary and use cases</h3>
 <p>That is not needed for the grid template, but, on the other hand,
 if we want the template to fit its contents, we would need to say so:
 
-<pre>.group {grid: "a b c"; width: auto}</pre>
+<pre>.group {grid: "a b c"; width: fit-content}</pre>
 
 <p>(See [[!CSS3BOX]] for the definition of the 'width' property.) The
 columns of the template are by default all the same size. The columns
@@ -415,8 +416,8 @@ <h3>Summary and use cases</h3>
 
 <p>(However, setting 'display' to 'grid' on the grid element creates a
 different kind of grid, that <em>does</em> grow, see <a
-href="#absolute">“Elements with 'display' set to ''grid'' or
-''inline-grid''”</a> below.)
+href="#absolute">“Comparison with 'display: grid' and 'display:
+inline-grid'”</a> below.)
 
 <p>In both models, elements can have borders, but only in the table
 model can borders be collapsed, which makes setting borders easier in
@@ -2228,7 +2229,7 @@ <h2 id=flow>Flowing content into slots: 'flow'</h2>
 </pre>
 
 <p>would repeat the H1 at the top of all three
-columns. With <a href="#region-based" >region-based styling,</a> the
+columns. With <em>region-based styling,</em> the
 three instances could even be styled differently, e.g., with generated
 content: ''@region ::slot(b) { H1::before {content: "cont'd "} }''
 </div>
@@ -2352,8 +2353,8 @@ <h3 id=slot-pseudo>The ''::slot()'' pseudo-element</h3>
 than what corresponds to the ''contents'' keyword. (I.e., not to the
 content that is flowed into the slot via the 'flow' property or
 because the slot is the <span>default slot.</span> See <a
-href="#region-based" >“Styling the contents of slots with
-''@region''”</a> for how to style that part of the content.)
+href="#region-based" >“Styling the contents of slots”</a> for how to
+style that part of the content.)
 
 <ul>
 <li>'color'
@@ -2520,22 +2521,25 @@ <h3 id=content>Slots and the 'content' property</h3>
 
 <!--=================================================================-->
 
-<h2 id=region-based>Styling the contents of slots with
-''@region''</h2>
+<h2 id=region-based>Styling the contents of slots</h2>
 
-<p>The '<span class=index>@region</span>' at-rule [[!CSS3-REGIONS]]
-provides a way to select an element, or a part of an element, based on
-the <em class=index>region</em> it
-is rendered in. For this purpose, a <em>slot</em> is a particular kind
-of <em>region.</em>
+<p><dfn>Region-based styling</dfn> refers to style rules that are
+attached to parts of a document that do not correspond to an element,
+but to an area of the canvas. In level 2, there were only two such
+regions, the pseudo-elements ''first-line'' and ''first-letter.'' This
+module adds <span class=index>slots.</span>
+
+<p>A slot may contain parts of multiple elements and the style rules
+for those elements and for the slot are cascaded together in a
+specific way, defined below.
 
 <div class=example>
 <p>For example, with a style sheet like this
 
 <pre>
 BODY { grid: "a ." 10em ". b"; chains: a b }
 P { flow: a; color: blue }
-@region BODY::slot(b) { P { color: orange } }
+BODY::slot(b) P { color: orange }
 </pre>
 
 <p>and a document fragment like this:
@@ -2551,20 +2555,21 @@ <h2 id=region-based>Styling the contents of slots with
 <p>The three paragraphs will be rendered inside slot a and, if there
 is more content than fits in that slot, the rest will be rendered in
 slot b. Ps are blue by the second line in the style sheet, but the
-''@region'' rule says that any part of a P that is inside slot b will
+third line says that any part of a P that is inside slot b will
 be orange.
 </div>
 
-<p class=note>Note that ''@region BODY::slot(b) { P {…} }'' cannot be
-replaced by ''BODY::slot(b) P {…}'', because pseudo-elements can only
-occur as the last component in a selector. Compare also ''@region
-::first-line { em {…} }'', which is a valid way to style (the part of)
-an EM that occurs on a first line, vs ''::first-line em {…}'' which is
-an invalid selector.
+<p>In CSS level 2, pseudo-elements could only occur at the end of a
+selector. Thus an attempt to select 'P::first-line EM' fails. That
+restriction does not apply to the <span class=index>'::slot()'
+pseudo-element,</span> as shown in the example above.
+
+<p>To resolve which style rules apply to an element or part of an
+element that is inside a slot…
 
-<p>To select a slot for use in an '@region' rule, the selector after
-the ''@region'' keyword must be a selector that ends with the
-pseudo-element '::slot(<var>X</var>)'.
+<p class=issue>Fix. Can we use a fictional tag sequence as in level 2?
+Only for inherited properties, maybe. Or only for a restricted set of
+properties, e.g., only those that apply to first-letter.
 
 <p class=issue>See <a href="#select-after-pseudo">“Style the contents
 of slots (region-based styling)”</a> below for a discussion of