@@ -115,11 +115,11 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
115115possible break points (see the 'break-*' properties from
116116[[CSS3-BREAK]]).
117117
118- < p > The < a href =" #region-based " > '@region'
119- rule</ a > [[!CSS3-REGIONS]] allows to select
118+ < p > The '@region'
119+ rule [[!CSS3-REGIONS]] allows to select
120120(parts of) elements based on whether they fall in a certain slot or
121121not, and thus style content differently in different slots
122- (region-based styling).
122+ (< em > region-based styling</ em > ).
123123
124124<!--=================================================================-->
125125
@@ -208,18 +208,19 @@ <h3>Summary and use cases</h3>
208208
209209< li > < p > Complex forms, where the alignment of labels and form fields may
210210be easier with the properties of this module than with the properties
211- for tables and margins.
211+ for tables, floats and margins.
212212
213213< li > < p > GUIs, where buttons, toolbars, labels, icons, etc., are aligned in
214214complex ways and have to stay aligned (and not wrap, for example) when
215215the window is resized.
216216
217217< li > < p > Paged displays (e.g., printed media) where each page
218- is divided in fixed areas for different kinds of content.
218+ is divided into fixed areas for different kinds of content.
219219
220220< li > < p > Complex pages with multiple regions, where the style
221221of the text does not only depend on the type of element it comes from,
222- but also on the region it is displayed in.
222+ but also on the region it is displayed in (< em > region-based
223+ styling</ em > ).
223224
224225< li > Paged displays with complex running headers and footers, e.g.,
225226running headers that are in between parts of the page content, rather
@@ -374,7 +375,7 @@ <h3>Summary and use cases</h3>
374375< p > That is not needed for the grid template, but, on the other hand,
375376if we want the template to fit its contents, we would need to say so:
376377
377- < pre > .group {grid: "a b c"; width: auto }</ pre >
378+ < pre > .group {grid: "a b c"; width: fit-content }</ pre >
378379
379380< p > (See [[!CSS3BOX]] for the definition of the 'width' property.) The
380381columns of the template are by default all the same size. The columns
@@ -415,8 +416,8 @@ <h3>Summary and use cases</h3>
415416
416417< p > (However, setting 'display' to 'grid' on the grid element creates a
417418different kind of grid, that < em > does</ em > grow, see < a
418- href ="#absolute "> “Elements with 'display' set to '' grid'' or
419- '' inline-grid' '”</ a > below.)
419+ href ="#absolute "> “Comparison with 'display: grid' and 'display:
420+ inline-grid'”</ a > below.)
420421
421422< p > In both models, elements can have borders, but only in the table
422423model can borders be collapsed, which makes setting borders easier in
@@ -2228,7 +2229,7 @@ <h2 id=flow>Flowing content into slots: 'flow'</h2>
22282229</ pre >
22292230
22302231< p > would repeat the H1 at the top of all three
2231- columns. With < a href =" #region-based " > region-based styling,</ a > the
2232+ columns. With < em > region-based styling,</ em > the
22322233three instances could even be styled differently, e.g., with generated
22332234content: ''@region ::slot(b) { H1::before {content: "cont'd "} }''
22342235</ div >
@@ -2352,8 +2353,8 @@ <h3 id=slot-pseudo>The ''::slot()'' pseudo-element</h3>
23522353than what corresponds to the ''contents'' keyword. (I.e., not to the
23532354content that is flowed into the slot via the 'flow' property or
23542355because the slot is the < span > default slot.</ span > See < a
2355- href ="#region-based " > “Styling the contents of slots with
2356- ''@region''” </ a > for how to style that part of the content.)
2356+ href ="#region-based " > “Styling the contents of slots” </ a > for how to
2357+ style that part of the content.)
23572358
23582359< ul >
23592360< li > 'color'
@@ -2520,22 +2521,25 @@ <h3 id=content>Slots and the 'content' property</h3>
25202521
25212522<!--=================================================================-->
25222523
2523- < h2 id =region-based > Styling the contents of slots with
2524- ''@region''</ h2 >
2524+ < h2 id =region-based > Styling the contents of slots</ h2 >
25252525
2526- < p > The '< span class =index > @region</ span > ' at-rule [[!CSS3-REGIONS]]
2527- provides a way to select an element, or a part of an element, based on
2528- the < em class =index > region</ em > it
2529- is rendered in. For this purpose, a < em > slot</ em > is a particular kind
2530- of < em > region.</ em >
2526+ < p > < dfn > Region-based styling</ dfn > refers to style rules that are
2527+ attached to parts of a document that do not correspond to an element,
2528+ but to an area of the canvas. In level 2, there were only two such
2529+ regions, the pseudo-elements ''first-line'' and ''first-letter.'' This
2530+ module adds < span class =index > slots.</ span >
2531+
2532+ < p > A slot may contain parts of multiple elements and the style rules
2533+ for those elements and for the slot are cascaded together in a
2534+ specific way, defined below.
25312535
25322536< div class =example >
25332537< p > For example, with a style sheet like this
25342538
25352539< pre >
25362540BODY { grid: "a ." 10em ". b"; chains: a b }
25372541P { flow: a; color: blue }
2538- @region BODY::slot(b) { P { color: orange } }
2542+ BODY::slot(b) P { color: orange }
25392543</ pre >
25402544
25412545< p > and a document fragment like this:
@@ -2551,20 +2555,21 @@ <h2 id=region-based>Styling the contents of slots with
25512555< p > The three paragraphs will be rendered inside slot a and, if there
25522556is more content than fits in that slot, the rest will be rendered in
25532557slot b. Ps are blue by the second line in the style sheet, but the
2554- ''@region'' rule says that any part of a P that is inside slot b will
2558+ third line says that any part of a P that is inside slot b will
25552559be orange.
25562560</ div >
25572561
2558- < p class =note > Note that ''@region BODY::slot(b) { P {…} }'' cannot be
2559- replaced by ''BODY::slot(b) P {…}'', because pseudo-elements can only
2560- occur as the last component in a selector. Compare also ''@region
2561- ::first-line { em {…} }'', which is a valid way to style (the part of)
2562- an EM that occurs on a first line, vs ''::first-line em {…}'' which is
2563- an invalid selector.
2562+ < p > In CSS level 2, pseudo-elements could only occur at the end of a
2563+ selector. Thus an attempt to select 'P::first-line EM' fails. That
2564+ restriction does not apply to the < span class =index > '::slot()'
2565+ pseudo-element,</ span > as shown in the example above.
2566+
2567+ < p > To resolve which style rules apply to an element or part of an
2568+ element that is inside a slot…
25642569
2565- < p > To select a slot for use in an '@region' rule, the selector after
2566- the ''@region'' keyword must be a selector that ends with the
2567- pseudo-element '::slot( < var > X </ var > )' .
2570+ < p class = issue > Fix. Can we use a fictional tag sequence as in level 2?
2571+ Only for inherited properties, maybe. Or only for a restricted set of
2572+ properties, e.g., only those that apply to first-letter .
25682573
25692574< p class =issue > See < a href ="#select-after-pseudo "> “Style the contents
25702575of slots (region-based styling)”</ a > below for a discussion of
0 commit comments