@@ -89,34 +89,27 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
8989Note contains experimental ideas for < em > layout templates</ em > and alternative
9090layout models in CSS.
9191
92- < p > At the moment, this module defines a < em > typographic grid</ em > for
93- CSS. It has features to set up a grid-based template and to flow
94- content into it .
92+ < p > At the moment, it defines a < em > typographic grid</ em > for
93+ CSS. It has features to set up a grid-based template, to style the
94+ < em > slots </ em > of the template and to flow content into them .
9595
9696< p > A grid template can be seen as a cross between table layout
97- (aligning & sizing blocks of text automatically in a
98- two-dimensional grid) and absolute positioning (making visual order of
99- content independent of source document order), but it also has unique
97+ (align blocks of text automatically in two-dimensions) and absolute
98+ positioning (position elements in arbitrary order), but it also has
99+ unique
100100features of its own.
101101
102- < p > The 'grid' property sets up a matrix of rows and columns and uses
103- it to define areas that accept content (called “slots”). The 'flow'
104- property then specifies into which slot an element flows. The
105- < span > '::slot()' pseudo-element</ span > allows to style the slots
106- (backgrounds, borders, etc.)
107-
108102< p > Grid templates can also be associated with pages in paged media
109103(via '@page'), to create < em > page templates.</ em >
110104
111- < p > Slots can form “chains” to create
112- non-rectangular regions. A chain of slots is like a series of pages or
113- columns: content is distributed over the slots by breaking it at
114- possible break points (see the 'break-*' properties from
115- [[CSS3-BREAK]]).
105+ < p > Slots can form < em > chains,</ em > to create non-rectangular
106+ regions. A chain of slots is like a series of small pages: content is
107+ broken at possible page breaks and distributed over the slots.
116108
117- < p > Templates can make use of the '@region' rule [[!CSS3-REGIONS]] for
118- selectors to style the contents of slots (< em > region-based
119- styling</ em > ).
109+ < p > < em > Region-based styling</ em > allows content to be styled not only
110+ based on its position in the document tree, but also based on the slot
111+ it finds itself in. This is achieved by allowing slot names to appear
112+ in selectors.
120113
121114<!--=================================================================-->
122115
@@ -2317,7 +2310,8 @@ <h2>Styling slots</h2>
23172310< h3 id =slot-pseudo > The ''::slot()'' pseudo-element</ h3 >
23182311
23192312< p > The slots of a < em > grid element</ em > can be individually addressed
2320- with the < dfn > ''slot()'' pseudo-element.</ dfn >
2313+ with the < dfn title ="slot!!pseudo-element " > ''slot()''
2314+ pseudo-element.</ dfn >
23212315
23222316< div class =example >
23232317< p > For example, the following sets the background and vertical
@@ -2424,7 +2418,8 @@ <h3>The ''::blank()'' pseudo-element</h3>
24242418'':empty'' pseudo-class in [[SELECT]]. But ''::slot(a):empty'' and
24252419'':slot(a):blank' are invalid syntax…
24262420
2427- < p > The < dfn > 'blank()' pseudo-element</ dfn > selects named slots that
2421+ < p > The < dfn title ="blank!!pseudo-element " > 'blank()'
2422+ pseudo-element</ dfn > selects named slots that
24282423have no
24292424content flowed into them. ''::slot(a)'' and ''::blank(a)'' select the
24302425same slot, but the latter matches only if the slot has no content
@@ -2591,7 +2586,8 @@ <h2 id=region-based>Styling the contents of slots</h2>
25912586
25922587< p > In CSS level 2, pseudo-elements could only occur at the end of a
25932588selector. Thus an attempt to select 'P::first-line EM' fails. That
2594- restriction does not apply to the < span class =index > '::slot()'
2589+ restriction does not apply to the < span class =index
2590+ title ="slot!!pseudo-element " > '::slot()'
25952591pseudo-element,</ span > as shown in the example above.
25962592
25972593< p > To resolve which style rules apply to an element or part of an
@@ -4407,9 +4403,6 @@ <h2 id=changes>Changes</h2>
44074403href ="/TR/2011/WD-css3-layout-20111129/ " > 29 November 2011 draft:</ a >
44084404
44094405< ul >
4410- < li > Short rows in a template aren't automatically padded with '.', but
4411- make the template illegal. <!-- WG decision 11 Apr 2012 -->
4412-
44134406< li > Added a < a href ="#accessibility " > note about accessibility.</ a >
44144407
44154408< li > Instead of directly on 'display', the grid template is now
0 commit comments