@@ -89,34 +89,27 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
89
89
Note contains experimental ideas for < em > layout templates</ em > and alternative
90
90
layout models in CSS.
91
91
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 .
95
95
96
96
< 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
100
100
features of its own.
101
101
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
-
108
102
< p > Grid templates can also be associated with pages in paged media
109
103
(via '@page'), to create < em > page templates.</ em >
110
104
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.
116
108
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.
120
113
121
114
<!--=================================================================-->
122
115
@@ -2317,7 +2310,8 @@ <h2>Styling slots</h2>
2317
2310
< h3 id =slot-pseudo > The ''::slot()'' pseudo-element</ h3 >
2318
2311
2319
2312
< 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 >
2321
2315
2322
2316
< div class =example >
2323
2317
< p > For example, the following sets the background and vertical
@@ -2424,7 +2418,8 @@ <h3>The ''::blank()'' pseudo-element</h3>
2424
2418
'':empty'' pseudo-class in [[SELECT]]. But ''::slot(a):empty'' and
2425
2419
'':slot(a):blank' are invalid syntax…
2426
2420
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
2428
2423
have no
2429
2424
content flowed into them. ''::slot(a)'' and ''::blank(a)'' select the
2430
2425
same 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>
2591
2586
2592
2587
< p > In CSS level 2, pseudo-elements could only occur at the end of a
2593
2588
selector. 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()'
2595
2591
pseudo-element,</ span > as shown in the example above.
2596
2592
2597
2593
< p > To resolve which style rules apply to an element or part of an
@@ -4407,9 +4403,6 @@ <h2 id=changes>Changes</h2>
4407
4403
href ="/TR/2011/WD-css3-layout-20111129/ " > 29 November 2011 draft:</ a >
4408
4404
4409
4405
< 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
-
4413
4406
< li > Added a < a href ="#accessibility " > note about accessibility.</ a >
4414
4407
4415
4408
< li > Instead of directly on 'display', the grid template is now
0 commit comments