Skip to content

Commit 650b939

Browse files
astearnsastearns
committed
[css-regions] editorial tweaks
1 parent ef927a7 commit 650b939

2 files changed

Lines changed: 213 additions & 46 deletions

File tree

‎css3-regions/Overview.html‎

Lines changed: 179 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
rel=dcterms.rights>
1313
<meta content="CSS Regions Module Level 3" name=dcterms.title>
1414
<meta content=text name=dcterms.type>
15-
<meta content=2013-03-08 name=dcterms.issued>
15+
<meta content=2013-03-12 name=dcterms.issued>
1616
<meta content="Vincent Hardy" name=dcterms.creator>
1717
<meta content="Rossen Atanassov" name=dcterms.creator>
1818
<meta content="Alan Stearns" name=dcterms.creator>
@@ -50,7 +50,7 @@
5050

5151
<h1 id=css-regions-module>CSS Regions Module Level 3</h1>
5252

53-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 March 2013</h2>
53+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 March 2013</h2>
5454

5555
<dl>
5656
<dt>This version:
@@ -498,11 +498,11 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
498498
<p><strong>CSS Regions are independent from layout</strong>
499499

500500
<p>Any of the CSS layout facilities can be used to create, position and
501-
size boxes that can become CSS Regions. The code in <a
501+
size boxes that can become CSS Regions. For instance, the code in <a
502502
href="#intro-example-code">Appendix A</a> uses a grid layout <a
503503
href="#CSS3-GRID-LAYOUT"
504504
rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> as an
505-
example. The code in the appendix could use a flexible box layout <a
505+
example. This example could use a flexible box layout <a
506506
href="#CSS3-FLEXBOX"
507507
rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a> instead.
508508

@@ -514,20 +514,19 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
514514
<p><strong>CSS Regions do not have to be elements</strong>
515515

516516
<p>The CSS regions module is independent of the layout of boxes and the
517-
mechanism used to create them. For simplicity, our example code in <a
517+
mechanisms used to create them.
518+
519+
<p>For simplicity, our example code in <a
518520
href="#intro-example-code">Appendix A</a> uses elements to define the
519-
boxes.
520-
521-
<p>While the example uses elements for CSS Regions it is important to note
522-
that this is not required. CSS Regions could be pseudo-elements. The only
523-
requirement for an element or pseudo-element to become a CSS Region is
524-
that it needs to be subject to CSS styling to receive the ‘<a
525-
href="#flow-from"><code class=property>flow-from</code></a>’ property.
526-
The CSS page template module (see <a href="#CSS3-PAGE-TEMPLATE"
527-
rel=biblioentry>[CSS3-PAGE-TEMPLATE]<!--{{CSS3-PAGE-TEMPLATE}}--></a>)
528-
proposes one mechanism to create stylable boxes that can become CSS
529-
Regions with the <code class=css>@slot</code> syntax. Some drafts of grid
530-
layout have also defined slot pseudo-elements to create stylable boxes.
521+
boxes. Any other mechanism available in markup or style to create
522+
stylable boxes could be used instead, such as pseudo-elements or the
523+
@slot rule proposed by the CSS Page Template Module <a
524+
href="#CSS3-PAGE-TEMPLATE"
525+
rel=biblioentry>[CSS3-PAGE-TEMPLATE]<!--{{CSS3-PAGE-TEMPLATE}}--></a>.
526+
527+
<p>The only requirement for box to become a CSS Region is that the ‘<a
528+
href="#flow-from"><code class=property>flow-from</code></a>’ property
529+
applies to the box.
531530
</div>
532531

533532
<h3 id=region-styling><span class=secno>1.2. </span>CSS Region names and
@@ -606,7 +605,8 @@ <h3 id=named-flow><span class=secno>2.3. </span>Named flows</h3>
606605
the ‘<a href="#flow-into"><code class=property>flow-into</code></a>’
607606
property. The elements in a <a href="#named-flow0">named flow</a> are laid
608607
out in the <span title=region-chain>region chain</span> that is associated
609-
with this <a href="#named-flow0">named flow</a>.
608+
with this <a href="#named-flow0">named flow</a> using the ‘<a
609+
href="#flow-from"><code class=property>flow-from</code></a>’ property.
610610

611611
<p>Content from a <a href="#named-flow0">named flow</a> is broken up
612612
between regions according to the regions flow breaking rules.
@@ -775,7 +775,7 @@ <h3 id=the-flow-into-property><span class=secno>3.1. </span>The ‘<a
775775
the viewport or page area even if they have been redirected to a named
776776
flow.
777777

778-
<p>The first region defines the <a
778+
<p>The first region defines the principal <a
779779
href="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing
780780
mode</a> for the entire flow. The writing mode on subsequent regions is
781781
ignored.
@@ -1054,6 +1054,26 @@ <h4 id=circular-dependencies><span class=secno>3.2.1. </span>Cycle
10541054
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
10551055
participating in the cycle do not become <span>CSS Regions</span>.
10561056

1057+
<div class=note><span class=note-prefix>Note </span>
1058+
<p>For example, styling like this:
1059+
1060+
<pre>
1061+
#id {
1062+
flow-into: foolish;
1063+
flow-from: foolish;
1064+
}
1065+
</pre>
1066+
1067+
<p>would move the <code>#id</code> element to a ‘<code
1068+
class=property>foolish</code>’ <a href="#named-flow0">named flow</a>,
1069+
and try to make the <code>#id</code> element a <span>CSS Region</span>
1070+
for the ‘<code class=property>foolish</code>’ <a
1071+
href="#named-flow0">named flow</a>. The ‘<code
1072+
class=property>foolish</code>’ <a href="#named-flow0">named flow</a>
1073+
would then contain its own region, creating a cycle. So the
1074+
<code>#id</code> element does not become a <span>CSS Region</span>.
1075+
</div>
1076+
10571077
<h4 id=fragmenting-regions><span class=secno>3.2.2. </span>Nested
10581078
fragmentation contexts</h4>
10591079

@@ -2803,6 +2823,125 @@ <h2 id=usecases><span class=secno>10. </span>Use Cases</h2>
28032823
href="http://wiki.csswg.org/spec/css3-regions/regions-print-use-cases">pages</a>.
28042824

28052825
<h2 id=conformance><span class=secno>11. </span>Conformance</h2>
2826+
<!--begin-conformance-->
2827+
2828+
<h3 class=no-ref id=conventions> Document conventions</h3>
2829+
2830+
<p>Conformance requirements are expressed with a combination of descriptive
2831+
assertions and RFC 2119 terminology. The key words “MUST”, “MUST
2832+
NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
2833+
“SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
2834+
normative parts of this document are to be interpreted as described in RFC
2835+
2119. However, for readability, these words do not appear in all uppercase
2836+
letters in this specification.
2837+
2838+
<p>All of the text of this specification is normative except sections
2839+
explicitly marked as non-normative, examples, and notes. <a
2840+
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
2841+
2842+
<p>Examples in this specification are introduced with the words “for
2843+
example” or are set apart from the normative text with
2844+
<code>class="example"</code>, like this:
2845+
2846+
<div class=example>
2847+
<p>This is an example of an informative example.
2848+
</div>
2849+
2850+
<p>Informative notes begin with the word “Note” and are set apart from
2851+
the normative text with <code>class="note"</code>, like this:
2852+
2853+
<p class=note>Note, this is an informative note.
2854+
2855+
<h3 class=no-ref id=conformance-classes> Conformance classes</h3>
2856+
2857+
<p>Conformance to this specification is defined for three conformance
2858+
classes:
2859+
2860+
<dl>
2861+
<dt><dfn id=style-sheet title="style sheet!!as conformance class">style
2862+
sheet</dfn>
2863+
2864+
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
2865+
style sheet</a>.
2866+
2867+
<dt><dfn id=renderer>renderer</dfn>
2868+
2869+
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
2870+
that interprets the semantics of a style sheet and renders documents that
2871+
use them.
2872+
2873+
<dt><dfn id=authoring-tool>authoring tool</dfn>
2874+
2875+
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
2876+
that writes a style sheet.
2877+
</dl>
2878+
2879+
<p>A style sheet is conformant to this specification if all of its
2880+
statements that use syntax defined in this module are valid according to
2881+
the generic CSS grammar and the individual grammars of each feature
2882+
defined in this module.
2883+
2884+
<p>A renderer is conformant to this specification if, in addition to
2885+
interpreting the style sheet as defined by the appropriate specifications,
2886+
it supports all the features defined by this specification by parsing them
2887+
correctly and rendering the document accordingly. However, the inability
2888+
of a UA to correctly render a document due to limitations of the device
2889+
does not make the UA non-conformant. (For example, a UA is not required to
2890+
render color on a monochrome monitor.)
2891+
2892+
<p>An authoring tool is conformant to this specification if it writes style
2893+
sheets that are syntactically correct according to the generic CSS grammar
2894+
and the individual grammars of each feature in this module, and meet all
2895+
other conformance requirements of style sheets as described in this
2896+
module.
2897+
2898+
<h3 class=no-ref id=partial> Partial implementations</h3>
2899+
2900+
<p>So that authors can exploit the forward-compatible parsing rules to
2901+
assign fallback values, CSS renderers <strong>must</strong> treat as
2902+
invalid (and <a
2903+
href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
2904+
appropriate</a>) any at-rules, properties, property values, keywords, and
2905+
other syntactic constructs for which they have no usable level of support.
2906+
In particular, user agents <strong>must not</strong> selectively ignore
2907+
unsupported component values and honor supported values in a single
2908+
multi-value property declaration: if any value is considered invalid (as
2909+
unsupported values must be), CSS requires that the entire declaration be
2910+
ignored.
2911+
2912+
<h3 class=no-ref id=experimental> Experimental implementations</h3>
2913+
2914+
<p>To avoid clashes with future CSS features, the CSS 2.1 specification
2915+
reserves a <a
2916+
href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
2917+
syntax</a> for proprietary and experimental extensions to CSS.
2918+
2919+
<p>Prior to a specification reaching the Candidate Recommendation stage in
2920+
the W3C process, all implementations of a CSS feature are considered
2921+
experimental. The CSS Working Group recommends that implementations use a
2922+
vendor-prefixed syntax for such features, including those in W3C Working
2923+
Drafts. This avoids incompatibilities with future changes in the draft.
2924+
2925+
<h3 class=no-ref id=testing> Non-experimental implementations</h3>
2926+
2927+
<p>Once a specification reaches the Candidate Recommendation stage,
2928+
non-experimental implementations are possible, and implementors should
2929+
release an unprefixed implementation of any CR-level feature they can
2930+
demonstrate to be correctly implemented according to spec.
2931+
2932+
<p>To establish and maintain the interoperability of CSS across
2933+
implementations, the CSS Working Group requests that non-experimental CSS
2934+
renderers submit an implementation report (and, if necessary, the
2935+
testcases used for that implementation report) to the W3C before releasing
2936+
an unprefixed implementation of any CSS features. Testcases submitted to
2937+
W3C are subject to review and correction by the CSS Working Group.
2938+
2939+
<p>Further information on submitting testcases and implementation reports
2940+
can be found from on the CSS Working Group's website at <a
2941+
href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
2942+
Questions should be directed to the <a
2943+
href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
2944+
mailing list. <!--end-conformance-->
28062945

28072946
<h2 id=changes><span class=secno>12. </span>Changes</h2>
28082947

@@ -3093,6 +3232,15 @@ <h3 class=no-num id=normative-references>Normative references</h3>
30933232
</dd>
30943233
<!---->
30953234

3235+
<dt id=RFC2119>[RFC2119]
3236+
3237+
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
3238+
words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
3239+
RFC 2119. URL: <a
3240+
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
3241+
</dd>
3242+
<!---->
3243+
30963244
<dt id=SELECT>[SELECT]
30973245

30983246
<dd>Tantek Çelik; et al. <a
@@ -3206,6 +3354,9 @@ <h2 class=no-num id=index>Index</h2>
32063354
<!--begin-index-->
32073355

32083356
<ul class=indexlist>
3357+
<li>authoring tool, <a href="#authoring-tool"
3358+
title="section 11."><strong>11.</strong></a>
3359+
32093360
<li>break-after, <a href="#break-after"
32103361
title="section 3.3."><strong>3.3.</strong></a>
32113362

@@ -3322,6 +3473,9 @@ <h2 class=no-num id=index>Index</h2>
33223473
<li>REGION_STYLE_RULE, <a href="#region-style-rule-const"
33233474
title="section 6.3."><strong>6.3.</strong></a>
33243475

3476+
<li>renderer, <a href="#renderer"
3477+
title="section 11."><strong>11.</strong></a>
3478+
33253479
<li>RFCB, <a href="#rfcb" title="section 7.1."><strong>7.1.</strong></a>
33263480

33273481
<li><a href="#region-style-rule-selectorText"><code
@@ -3331,6 +3485,12 @@ <h2 class=no-num id=index>Index</h2>
33313485

33323486
<li>specified flow, <a href="#specified-flow"
33333487
title="section 3.1."><strong>3.1.</strong></a>
3488+
3489+
<li>style sheet
3490+
<ul>
3491+
<li>as conformance class, <a href="#style-sheet"
3492+
title="section 11."><strong>11.</strong></a>
3493+
</ul>
33343494
</ul>
33353495
<!--end-index-->
33363496

‎css3-regions/Overview.src.html‎

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -250,9 +250,10 @@ <h3 id="named-flows-and-regions">Named flows and region chains</h3>
250250

251251
<p>Any of the CSS layout facilities can be used
252252
to create, position and size boxes that can become CSS Regions.
253-
The code in <a href="#intro-example-code">Appendix A</a>
253+
For instance,
254+
the code in <a href="#intro-example-code">Appendix A</a>
254255
uses a grid layout [[CSS3-GRID-LAYOUT]] as an example.
255-
The code in the appendix could use
256+
This example could use
256257
a flexible box layout [[CSS3-FLEXBOX]] instead.</p>
257258
<p>The CSS regions specification does not
258259
define a layout mechanism
@@ -265,29 +266,22 @@ <h3 id="named-flows-and-regions">Named flows and region chains</h3>
265266

266267
<p>The CSS regions module is independent
267268
of the layout of boxes and
268-
the mechanism used to create them.
269-
For simplicity,
269+
the mechanisms used to create them.
270+
271+
<p>For simplicity,
270272
our example code in <a href="#intro-example-code">Appendix A</a>
271-
uses elements to define the boxes.</p>
272-
273-
274-
<p>While the example uses elements for CSS Regions
275-
it is important to note that
276-
this is not required.
277-
CSS Regions could be pseudo-elements.
278-
The only requirement
279-
for an element or pseudo-element
280-
to become a CSS Region
281-
is that it needs to be subject
282-
to CSS styling
283-
to receive the 'flow-from' property.
284-
The CSS page template module
285-
(see [[CSS3-PAGE-TEMPLATE]])
286-
proposes one mechanism
287-
to create stylable boxes that can become CSS Regions
288-
with the <code class="css">@slot</code> syntax.
289-
Some drafts of grid layout have also defined slot pseudo-elements
290-
to create stylable boxes.</p>
273+
uses elements to define the boxes.
274+
Any other mechanism available
275+
in markup or style
276+
to create stylable boxes could be used instead,
277+
such as pseudo-elements
278+
or the @slot rule proposed
279+
by the CSS Page Template Module [[CSS3-PAGE-TEMPLATE]].</p>
280+
281+
282+
<p>The only requirement
283+
for box to become a CSS Region
284+
is that the 'flow-from' property applies to the box. </p>
291285
</div>
292286

293287
<h3 id="region-styling">CSS Region names and styling</h3>
@@ -380,7 +374,8 @@ <h3 id="named-flow">Named flows</h3>
380374
with the 'flow-into' property.
381375
The elements in a <span>named flow</span> are laid out
382376
in the <span title="region-chain">region chain</span>
383-
that is associated with this <span>named flow</span>.
377+
that is associated with this <span>named flow</span>
378+
using the 'flow-from' property.
384379
</p>
385380

386381
<p>Content from a <span>named flow</span>
@@ -579,7 +574,7 @@ <h3 id="the-flow-into-property">The 'flow-into' property</h3>
579574
they have been redirected
580575
to a named flow.</p>
581576

582-
<p>The first region defines the
577+
<p>The first region defines the principal
583578
<a href="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing mode</a>
584579
for the entire flow.
585580
The writing mode
@@ -893,6 +888,17 @@ <h4 id="circular-dependencies">Cycle Detection</h4>
893888
participating in the cycle
894889
do not become <span>CSS Regions</span>.</p>
895890

891+
<div class="note"><span class="note-prefix">Note </span>
892+
<p>For example, styling like this:</p>
893+
<pre>
894+
#id {
895+
flow-into: foolish;
896+
flow-from: foolish;
897+
}
898+
</pre>
899+
<p>would move the <code>#id</code> element to a 'foolish' <span>named flow</span>, and try to make the <code>#id</code> element a <span>CSS Region</span> for the 'foolish' <span>named flow</span>. The 'foolish' <span>named flow</span> would then contain its own region, creating a cycle. So the <code>#id</code> element does not become a <span>CSS Region</span>.
900+
</div>
901+
896902
<h4 id="fragmenting-regions">Nested fragmentation contexts</h4>
897903

898904
<p>A <span>CSS Region</span> that contains
@@ -2498,7 +2504,8 @@ <h2 id="usecases">Use Cases</h2>
24982504
<a href="http://wiki.csswg.org/spec/css3-regions/regions-print-use-cases">pages</a>.</p>
24992505

25002506
<h2 id="conformance">Conformance</h2>
2501-
2507+
<!--conformance-->
2508+
25022509
<h2 id="changes">Changes</h2>
25032510

25042511
<h3 id="changes_from_Aug_28_2012">Changes from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">August 28<sup>th</sup> 2012</a> version</h3>

0 commit comments

Comments
 (0)