css3-overflow/Overview.src.html@2982b7c71c57
css3-overflow/Overview.src.html
Mon, 06 Aug 2012 19:58:48 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Mon, 06 Aug 2012 19:58:48 -0700
- changeset 6481
- 2982b7c71c57
- parent 6480
- 4183f2de4bf6
- child 6482
- dd34855b9279
- permissions
- -rw-r--r--
Add example for styling in regions.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>CSS Region Styling Module Level 3</title>
6 <link rel=contents href="#contents">
7 <link rel=index href="#index">
8 <link rel="stylesheet" type="text/css" href="../default.css">
9 <link rel="stylesheet" type="text/css"
10 href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
11 <style>
12 table.source-demo-pair {
13 width: 100%;
14 }
16 .in-cards-demo {
17 width: 13em;
18 height: 8em;
20 padding: 4px;
21 border: medium solid blue;
22 margin: 6px;
24 font: medium/1.3 Times New Roman, Times, serif;
25 white-space: nowrap;
26 }
28 .bouncy-columns-demo {
29 width: 6em;
30 height: 10em;
31 float: left;
32 margin: 1em;
33 font: medium/1.25 Times New Roman, Times, serif;
34 white-space: nowrap;
35 }
36 .bouncy-columns-demo.one {
37 background: aqua; color: black;
38 transform: rotate(-3deg);
39 }
40 .bouncy-columns-demo.two {
41 background: yellow; color: black;
42 transform: rotate(3deg);
43 }
45 .article-font-inherit-demo {
46 font: 1em/1.25 Times New Roman, Times, serif;
47 white-space: nowrap;
48 }
49 .article-font-inherit-demo.one {
50 width: 12em;
51 font-size: 1.5em;
52 margin-bottom: 1em;
53 height: 4em;
54 }
55 .article-font-inherit-demo.two {
56 width: 11em;
57 margin-left: 5em;
58 margin-right: 2em;
59 }
61 .dark-columns-demo {
62 width: 6em;
63 height: 10em;
64 float: left;
65 margin-right: 1em;
66 font: medium/1.25 Times New Roman, Times, serif;
67 white-space: nowrap;
68 }
69 .dark-columns-demo.one {
70 background: aqua; color: black;
71 }
72 .dark-columns-demo.one :link {
73 color: blue;
74 }
75 .dark-columns-demo.one :visited {
76 color: purple;
77 }
78 .dark-columns-demo.two {
79 background: navy; color: white;
80 }
81 .dark-columns-demo.two :link {
82 color: aqua;
83 }
84 .dark-columns-demo.two :visited {
85 color: fuchsia;
86 }
88 .article-max-lines-demo {
89 font: 1em/1.25 Times New Roman, Times, serif;
90 white-space: nowrap;
91 }
92 .article-max-lines-demo.one::first-letter {
93 font-size: 2em;
94 line-height: 0.9;
95 }
96 .article-max-lines-demo.one {
97 font-size: 1.5em;
98 width: 16em;
99 }
100 .article-max-lines-demo.two {
101 width: 11.5em;
102 float: left; margin-right: 1em;
103 }
104 .article-max-lines-demo.three {
105 width: 11.5em;
106 float: left;
107 }
108 </style>
109 </head>
111 <div class="head">
112 <!--logo-->
114 <h1>CSS Region Styling Module Level 3</h1>
116 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
117 <dl>
118 <dt>This version:
119 <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/ED-css3-region-styling-[CDATE]/</a>
121 <dt>Latest version:
122 <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a>
124 <dt>Editor's draft:
125 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
127 <!--
128 <dt>Previous version:
129 <dd><a href="http://www.w3.org/PreviousVersionURI">
130 http://www.w3.org/PreviousVersionURI</a>
131 -->
133 <dt>Issue Tracking:</dt>
134 <dd>Maintained in document (only editor's draft is current)
136 <dt>Feedback:</dt>
137 <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>”
139 <dt>Editors:
140 <dd class="h-card vcard">
141 <a class="p-name fn u-url url" rel="author"
142 href="http://dbaron.org/">L. David Baron</a>,
143 <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a>
144 </dl>
146 <!--copyright-->
148 <hr title="Separator for header">
149 </div>
151 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
153 <p>
154 <a href="http://www.w3.org/TR/CSS/">CSS</a> is
155 a language for describing
156 the rendering of structured documents (such as HTML and XML)
157 on screen, on paper, in speech, etc.
158 This module contains the features of CSS
159 relating to new mechanisms of overflow handling in visual media (e.g., screen or paper).
160 In interactive media,
161 it describes features that allow the overflow
162 from a fixed size container
163 to be handled by pagination (displaying one page at a time).
164 It also describes features, applying to all visual media,
165 that allow the contents of an element
166 to be spread across multiple containers,
167 allowing the contents to flow across multiple regions of a page
168 or to have different styles for different parts.
169 </p>
171 <h2 class="no-num no-toc" id="status">Status of this document</h2>
173 <!--status-->
175 <p>The following features are at risk: …
177 <h2 class="no-num no-toc" id="contents">
178 Table of contents</h2>
180 <!--toc-->
182 <h2 id="intro">
183 Introduction</h2>
185 <p>
186 In CSS Level 1 [[CSS1]], placing more content than would fit
187 inside an element with a specified size
188 was generally an authoring error.
189 Doing so caused the content to extend
190 outside the bounds of the element,
191 which would likely cause
192 that content to overlap with other elements.
193 </p>
195 <p>
196 CSS Level 2 [[CSS21]] introduced the 'overflow' property,
197 which allows authors to have overflow be handled by scrolling,
198 which means it is no longer an authoring error.
199 It also allows authors to specify
200 that overflow is handled by clipping,
201 which makes sense when the author's intent
202 is that the content not be shown.
203 </p>
205 <p>
206 However, scrolling is not the only way
207 to present large amounts of content,
208 and may even not be the optimal way.
209 After all, the codex replaced the scroll
210 as the common format for large written works
211 because of its advantages.
212 </p>
214 <p>
215 This specification introduces
216 a mechanism for Web pages to specify
217 that a region of a page should handle overflow
218 through pagination rather than through scrolling.
219 </p>
221 <p>
222 This specification also extends the concept of overflow
223 in another direction.
224 Instead of requiring that authors specify a single region
225 into which the content of an element must flow,
226 this specification allows authors to specify multiple regions,
227 each with their own dimensions and styles,
228 so that the content of the element can flow from one to the next,
229 using as many as needed to place the content without overflowing.
230 </p>
232 <p>
233 In both of these cases, implementations must
234 break the content in the block-progression dimension.
235 Implementations must do this is described
236 in the CSS Fragmentation Module [[!CSS3-BREAK]].
237 </p>
240 <h2 id="paginated-overflow">Paginated overflow</h2>
242 <p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as css3-gcpm has?)</p>
244 <p class="issue">Ability to display N pages at once
245 rather than just one page at once?</p>
247 <h2 id="region-overflow">Region overflow</h2>
249 <p>
250 This section introduces and defines the meaning of
251 the new ''regions'' (<span class="issue">or ''repeat''?</span>)
252 value of the 'overflow' property.
253 </p>
255 <p>
256 When the computed value of 'overflow' for an element is ''regions'',
257 and implementations would otherwise have created a box for the element,
258 then implementations must create at least one box for that element.
259 Each box created for the element is called a <dfn>region box</dfn>
260 for that element.
261 (If an element with ''overflow: regions'' generates only one box,
262 that box is a <i>region box</i>.
263 However, if an element's computed 'overflow' is not ''regions'',
264 then its box is not a <i>region box</i>.)
265 Every <i>region box</i> is a fragmentation container,
266 and for each <i>region box</i> which ends with a fragmentation break,
267 (which could happen
268 because breakable content overflows in the block dimension
269 or because of a forced break),
270 there must be another <i>region box</i> created as a next sibling
271 of the previous one.
272 <span class="issue">Or is it as though it's a next sibling of
273 the element? Need to figure out exactly how this interacts with
274 other box-level fixup.</span>
275 (Breakable content might overflow in the box dimension either
276 because of a specified size on the region box
277 or because the region box is within a fragmentation context
278 in which it is being broken.
279 In other words, a single region box is never broken
280 across columns or pages;
281 the pieces that are in separate columns or pages
282 are always distinct region boxes.)
283 </p>
285 <p class="issue">
286 We also want ''::nth-region()'' pseudo-elements
287 to be able to apply to the pieces of an element
288 split within a fragmentation context.
289 Should we require that authors who want to use
290 ''::nth-region()'' in this way specify ''overflow:regions''
291 (even if they don't specify a constrained height),
292 or should it work automatically for all elements
293 even if they don't have ''overflow: regions''?
294 </p>
296 <div class="example">
297 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
298 <title>Breaking content into
299 equal-sized cards</title>
300 <style>
301 .in-cards {
302 overflow: regions;
304 width: 13em;
305 height: 8em;
307 padding: 4px;
308 border: medium solid blue;
309 margin: 6px;
311 font: medium/1.3 Times New
312 Roman, Times, serif;
313 }
314 </style>
315 <div class="in-cards">
316 In this example, the text in the div
317 is broken into a series of cards.
318 These cards all have the same style.
319 The presence of enough content to
320 overflow one of the cards causes
321 another one to be created. The second
322 card is created just like it's the
323 next sibling of the first.
324 </div></pre></td><td>
325 <div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards. These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div>
326 <div class="in-cards-demo">one to be created. The second<br>card is created just like it's the<br>next sibling of the first.</div>
327 </td></tr></table>
328 </div>
330 <h3 id="region-styling">Region styling</h3>
332 <h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4>
334 <p>
335 The ::nth-region() pseudo-element is a pseudo-element
336 that describes some of the region boxes generated by an element.
337 The argument to the pseudo-element takes the same syntax
338 as the argument to the :nth-child() pseudo-class
339 defined in [[!SELECT]], and has the same meaning
340 except that the number is relative to
341 <i>region boxes</i> generated by the element
342 instead of siblings of the element.
343 </p>
345 <p class="issue">
346 If we go with a name for the 'overflow' value other than
347 ''overflow: regions'',
348 then we should probably rename this pseudo-element,
349 perhaps to ::nth-piece(), ::nth-part(), or ::nth-instance().
350 </p>
352 <p class="note">
353 Selectors that allow addressing regions
354 by counting from the end rather than the start
355 are intentionally not provided.
356 Such selectors would interfere with determining
357 the number of regions.
358 </p>
360 <h4 id="style-of-regions">Styling of regions</h4>
362 <p class="issue">
363 Should this apply to region overflow only,
364 or also to paginated overflow?
365 (If it applies,
366 then stricter property restrictions would be needed
367 for paginated overflow.)
368 </p>
370 <p>
371 In the absence of rules with ''::nth-region()'' pseudo-elements,
372 the computed style for each <i>region box</i>
373 is the computed style for the element
374 for which the <i>region box</i> was created.
375 However, the style for a <i>region box</i> is also influenced
376 by rules whose selector's <i>subject</i> [[!SELECT]]
377 has an ''::nth-region()'' pseudo-element,
378 if the 1-based number of the region box matches
379 that ''::nth-region()'' pseudo-element
380 and the selector (excluding the ''::nth-region()'' pseudo-element)
381 matches the element generating the regions.
382 </p>
384 <div class="example">
385 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
386 <style>
387 .bouncy-columns {
388 overflow: regions;
389 width: 6em;
390 height: 10em;
391 float: left;
392 margin: 1em;
393 font: medium/1.25 Times New
394 Roman, Times, serif;
395 }
396 .bouncy-columns::nth-region(1) {
397 background: aqua; color: black;
398 transform: rotate(-3deg);
399 }
400 .bouncy-columns::nth-region(2) {
401 background: yellow; color: black;
402 transform: rotate(3deg);
403 }
404 </style>
405 <div class="bouncy-columns">
406 <i>...</i>
407 </div></pre></td><td>
408 <div class="bouncy-columns-demo one">In this<br>example, the<br>text in the div<br>is broken into<br>a series of<br>columns. The<br>author<br>probably</div>
409 <div class="bouncy-columns-demo two">intended the<br>text to fill two<br>columns. But<br>if it happens to<br>fill three<br>columns, the<br>third column is<br>still created. It</div>
410 <div class="bouncy-columns-demo">just doesn't<br>have any<br>region-specific<br>styling because<br>the author<br>didn't give it<br>any.</div>
411 </td></tr></table>
412 </div>
414 <p>
415 Styling an ''::nth-region()'' pseudo-element with the 'overflow'
416 property has no effect;
417 the computed value of 'overflow' for the region box
418 remains the same as the computed value of overflow for the element.
419 </p>
421 <p>
422 Specifying ''display: none'' for a region box causes
423 the region box with that index not to be generated.
424 However, in terms of the indices
425 used for matching ''::nth-region()'' pseudo-elements
426 of later region boxes,
427 it still counts as though it was generated.
428 However, since it is not generated, it does not contain any content.
429 </p>
431 <p class="issue">
432 Would it make more sense to forbid ''display:none''?
433 Or perhaps to forbid 'display', 'position', 'float',
434 and similar (in addition to 'overflow')?
435 </p>
437 <p>
438 To match the model for other pseudo-elements
439 where the pseudo-elements live inside their corresponding element,
440 declarations in ''::nth-region()'' pseudo-elements override
441 declarations in rules without the pseudo-element.
442 The relative priority within such declarations is determined
443 by normal cascading order (see [[!CSS21]]).
444 </p>
446 <p>
447 Styles specified on ''::nth-region()'' pseudo-elements
448 do affect inheritance to content within the <i>region box</i>.
449 In other words, the content within the <i>region box</i> must
450 inherit from the region box's style (i.e., the pseudo-element style)
451 rather than directly from the element.
452 This means that elements split between region boxes may
453 have different styles for different parts of the element.
454 </p>
456 <p class="issue">
457 This inheritance rule allows specifying styles indirectly
458 (by using explicit ''inherit'' or using default inheritance
459 on properties that don't apply to '':first-letter'')
460 that can't be specified directly
461 (based on the rules in the next section).
462 This is a problem.
463 The restrictions that apply to styling inside regions
464 should also apply to inheritance from regions.
465 </p>
467 <div class="example">
468 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
469 <style>
470 .article {
471 overflow: regions;
472 }
473 .article::nth-region(1) {
474 font-size: 1.5em;
475 margin-bottom: 1em;
476 height: 4em;
477 }
478 .article::nth-region(n+2) {
479 /* 2 and up */
480 margin-left: 5em;
481 margin-right: 2em;
482 }
483 </style>
484 <div class="article">
485 The <code>font-size</code> property<i>...</i>
486 </div></pre></td><td>
487 <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the region<br>is inherited into the</div>
488 <div class="article-font-inherit-demo two">descendants of the region.<br>This means that inherited<br>properties can be used<br>reliably on a region, as in<br>this example.</div>
489 </td></tr></table>
490 </div>
492 <h4 id="style-in-regions">Styling inside regions</h4>
494 <p class="issue">
495 Should this apply to region overflow only,
496 or also to paginated overflow,
497 or even to pagination across pages?
498 </p>
500 <p>
501 The ''::nth-region()'' pseudo-element
502 can also be used to style
503 content inside of a <i>region box</i>.
504 Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
505 the ''::nth-region()'' pseudo-element can be applied
506 to parts of the selector other than the subject:
507 in particular, it can match ancestors of the subject.
508 However, the only CSS properties applied
509 by rules with such selectors
510 are those that apply
511 to the ''::first-letter'' pseudo-element.
512 </p>
514 <p>
515 To be more precise,
516 when a rule's selector has ''::nth-region()'' pseudo-elements
517 attached to parts of the selector other than the subject,
518 the declarations in that rule apply to
519 a fragment (or pseudo-element thereof) when:
520 </p>
521 <ol>
522 <li>
523 the declarations are for properties that apply to the
524 ''::first-letter'' pseudo-element,
525 </li>
526 <li>
527 the declarations would apply to
528 that fragment (or pseudo-element thereof)
529 had those ''::nth-region()'' pseudo-elements been removed,
530 with a particular association between
531 each sequence of simple selectors and the element it matched,
532 and
533 </li>
534 <li>
535 for each removed ''::nth-region()'' pseudo-element,
536 the fragment lives within a <i>region box</i>
537 of the element associated in that association
538 with the selector that the pseudo-element was attached to,
539 and whose index matches the pseudo-element.
540 </li>
541 </ol>
543 <div class="example">
544 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
545 <style>
546 .dark-columns {
547 overflow: regions;
548 width: 6em;
549 height: 10em;
550 float: left;
551 margin-right: 1em;
552 font: medium/1.25 Times New
553 Roman, Times, serif;
554 }
555 .dark-columns::nth-region(1) {
556 background: aqua; color: black;
557 }
558 .dark-columns::nth-region(1) :link {
559 color: blue;
560 }
561 .dark-columns::nth-region(1) :visited {
562 color: purple;
563 }
564 .dark-columns::nth-region(2) {
565 background: navy; color: white;
566 }
567 .dark-columns::nth-region(2) :link {
568 color: aqua;
569 }
570 .dark-columns::nth-region(2) :visited {
571 color: fuchsia;
572 }
573 </style>
574 <div class="dark-columns">
575 <i>...</i>
576 </div></pre></td><td>
577 <div class="dark-columns-demo one">In this<br><a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>text flows<br>from one<br>light-colored<br>region into<br>another<br>dark-colored</div>
578 <div class="dark-columns-demo two">region. We<br>therefore want<br>different styles<br>for <a href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>in the different<br>regions.</div>
579 </td></tr></table>
580 </div>
583 <h3 id="max-lines">The 'max-lines' property</h3>
585 <p>
586 Authors may wish to style the opening lines of an element
587 with different styles
588 by putting those opening lines in a separate region.
589 However, since it may be difficult to predict the exact height
590 occupied by those lines
591 in order to restrict the first region to that height,
592 this specification introduces a 'max-lines' property
593 that forces a region to break
594 after a specified number of lines.
595 This forces a break after the given number of lines
596 contained within the element or its descendants,
597 as long as those lines are in the same block formatting context.
598 </p>
600 <table class=propdef>
601 <tr>
602 <th>Name:
603 <td><dfn>max-lines</dfn>
604 <tr>
605 <th><a href="#values">Value</a>:
606 <td>none | <integer>
607 <tr>
608 <th>Initial:
609 <td>none
610 <tr>
611 <th>Applies to:
612 <td>region boxes
613 <tr>
614 <th>Inherited:
615 <td>no
616 <tr>
617 <th>Percentages:
618 <td>N/A
619 <tr>
620 <th>Media:
621 <td>visual
622 <tr>
623 <th>Computed value:
624 <td>specified value
625 <tr>
626 <th>Animatable:
627 <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
628 <tr>
629 <th>Canonical order:
630 <td><abbr title="follows order of property value definition">per grammar</abbr>
631 </table>
633 <dl>
634 <dt>none
635 <dd>
636 <p>
637 Breaks occur only as specified elsewhere.
638 </p>
639 </dd>
641 <dt><integer>
642 <dd>
643 <p>
644 In addition to any breaks specified elsewhere,
645 a break is forced before any line that would exceed
646 the given number of lines
647 being placed inside the element
648 (excluding lines that are in
649 a different block formatting context from
650 the block formatting context to which
651 an unstyled child of the element would belong).
652 </p>
654 <p class="issue">
655 If there are multiple boundaries between this line
656 and the previous, where exactly (in terms of element
657 boundaries) is the break forced?
658 </p>
660 <p>
661 Only positive integers are accepted.
662 Zero or negative integers are a parse error.
663 </p>
664 </dd>
665 </dl>
667 <p class="issue">Should this apply to regions overflow only, or also
668 to pagination?</p>
670 <div class="example">
671 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
672 <style>
673 .article {
674 overflow: regions;
675 }
676 .article::first-letter {
677 font-size: 2em;
678 line-height: 0.9;
679 }
680 .article::nth-region(1) {
681 font-size: 1.5em;
682 max-lines: 3;
683 }
684 .article::nth-region(n+2) {
685 /* 2 and up */
686 column-count: 2;
687 }
688 </style>
689 <div class="article">
690 <i>...</i>
691 </div></pre></td><td>
692 <div class="article-max-lines-demo one">The max-lines property allows<br>authors to use a larger font for the first<br>few lines of an article. Without the</div>
693 <div class="article-max-lines-demo two">max-lines property, authors<br>might have to use the<br>'height' property instead, but<br>that would leave a slight gap<br>if the author miscalculated<br>how much height a given<br>number of lines would<br>occupy (which might be</div>
694 <div class="article-max-lines-demo three">particularly hard if the author<br>didn't know what text would<br>be filling the space, exactly<br>what font would be used, or<br>exactly which platform's font<br>rendering would be used to<br>display the font).</div>
695 </td></tr></table>
696 </div>
698 <h2 id="conformance">
699 Conformance</h2>
701 <h3 id="placement">
702 Module interactions</h3>
704 <p>This module extends the 'overflow'
705 feature defined in [[CSS21]] section 11.1.1. It defines additional
706 overflow handling mechanisms that implementations must implement as
707 described in this module in order to conform to this module.</p>
709 <p>No properties in this module apply to the <code>::first-line</code> or
710 <code>::first-letter</code> pseudo-elements.</p>
712 <h3 id="values">
713 Values</h3>
715 <p>This specification follows the
716 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
717 definition conventions</a> from [[!CSS21]]. Value types not defined in
718 this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
719 Other CSS modules may expand the definitions of these value types: for
720 example [[CSS3COLOR]], when combined with this module, expands the
721 definition of the <color> value type as used in this specification.</p>
723 <p>In addition to the property-specific values listed in their definitions,
724 all properties defined in this specification also accept the
725 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
726 keyword as their property value. For readability it has not been repeated
727 explicitly.
730 <h3 id="conventions">
731 Document conventions</h3>
733 <p>Conformance requirements are expressed with a combination of
734 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
735 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
736 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
737 document are to be interpreted as described in RFC 2119.
738 However, for readability, these words do not appear in all uppercase
739 letters in this specification.
741 <p>All of the text of this specification is normative except sections
742 explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
744 <p>Examples in this specification are introduced with the words “for example”
745 or are set apart from the normative text with <code>class="example"</code>,
746 like this:
748 <div class="example">
749 <p>This is an example of an informative example.</p>
750 </div>
752 <p>Informative notes begin with the word “Note” and are set apart from the
753 normative text with <code>class="note"</code>, like this:
755 <p class="note">Note, this is an informative note.</p>
757 <h3 id="conformance-classes">
758 Conformance classes</h3>
760 <p>Conformance to CSS Region Styling Module Level 3
761 is defined for three conformance classes:
762 <dl>
763 <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
764 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
765 style sheet</a>.
766 <dt><dfn>renderer</dfn></dt>
767 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
768 that interprets the semantics of a style sheet and renders
769 documents that use them.
770 <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
771 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
772 that writes a style sheet.
773 </dl>
775 <p>A style sheet is conformant to CSS Region Styling Module Level 3
776 if all of its statements that use syntax defined in this module are valid
777 according to the generic CSS grammar and the individual grammars of each
778 feature defined in this module.
780 <p>A renderer is conformant to CSS Region Styling Module Level 3
781 if, in addition to interpreting the style sheet as defined by the
782 appropriate specifications, it supports all the features defined
783 by CSS Region Styling Module Level 3 by parsing them correctly
784 and rendering the document accordingly. However, the inability of a
785 UA to correctly render a document due to limitations of the device
786 does not make the UA non-conformant. (For example, a UA is not
787 required to render color on a monochrome monitor.)
789 <p>An authoring tool is conformant to CSS Region Styling Module Level 3
790 if it writes style sheets that are syntactically correct according to the
791 generic CSS grammar and the individual grammars of each feature in
792 this module, and meet all other conformance requirements of style sheets
793 as described in this module.
795 <h3 id="partial">
796 Partial implementations</h3>
798 <p>So that authors can exploit the forward-compatible parsing rules to
799 assign fallback values, CSS renderers <strong>must</strong>
800 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
801 as appropriate</a>) any at-rules, properties, property values, keywords,
802 and other syntactic constructs for which they have no usable level of
803 support. In particular, user agents <strong>must not</strong> selectively
804 ignore unsupported component values and honor supported values in a single
805 multi-value property declaration: if any value is considered invalid
806 (as unsupported values must be), CSS requires that the entire declaration
807 be ignored.</p>
809 <h3 id="experimental">
810 Experimental implementations</h3>
812 <p>To avoid clashes with future CSS features, the CSS2.1 specification
813 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
814 syntax</a> for proprietary and experimental extensions to CSS.
816 <p>Prior to a specification reaching the Candidate Recommendation stage
817 in the W3C process, all implementations of a CSS feature are considered
818 experimental. The CSS Working Group recommends that implementations
819 use a vendor-prefixed syntax for such features, including those in
820 W3C Working Drafts. This avoids incompatibilities with future changes
821 in the draft.
822 </p>
824 <h3 id="testing">
825 Non-experimental implementations</h3>
827 <p>Once a specification reaches the Candidate Recommendation stage,
828 non-experimental implementations are possible, and implementors should
829 release an unprefixed implementation of any CR-level feature they
830 can demonstrate to be correctly implemented according to spec.
832 <p>To establish and maintain the interoperability of CSS across
833 implementations, the CSS Working Group requests that non-experimental
834 CSS renderers submit an implementation report (and, if necessary, the
835 testcases used for that implementation report) to the W3C before
836 releasing an unprefixed implementation of any CSS features. Testcases
837 submitted to W3C are subject to review and correction by the CSS
838 Working Group.
840 <p>Further information on submitting testcases and implementation reports
841 can be found from on the CSS Working Group's website at
842 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
843 Questions should be directed to the
844 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
845 mailing list.
847 <h3 id="cr-exit-criteria">
848 CR exit criteria</h3>
850 <p class=issue>[Change or remove the following CR exit criteria if
851 the spec is not a module, but, e.g., a Note or a profile. This text was <a
852 href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
854 <p>
855 For this specification to be advanced to Proposed Recommendation,
856 there must be at least two independent, interoperable implementations
857 of each feature. Each feature may be implemented by a different set of
858 products, there is no requirement that all features be implemented by
859 a single product. For the purposes of this criterion, we define the
860 following terms:
862 <dl>
863 <dt>independent <dd>each implementation must be developed by a
864 different party and cannot share, reuse, or derive from code
865 used by another qualifying implementation. Sections of code that
866 have no bearing on the implementation of this specification are
867 exempt from this requirement.
869 <dt>interoperable <dd>passing the respective test case(s) in the
870 official CSS test suite, or, if the implementation is not a Web
871 browser, an equivalent test. Every relevant test in the test
872 suite should have an equivalent test created if such a user
873 agent (UA) is to be used to claim interoperability. In addition
874 if such a UA is to be used to claim interoperability, then there
875 must one or more additional UAs which can also pass those
876 equivalent tests in the same way for the purpose of
877 interoperability. The equivalent tests must be made publicly
878 available for the purposes of peer review.
880 <dt>implementation <dd>a user agent which:
882 <ol class=inline>
883 <li>implements the specification.
885 <li>is available to the general public. The implementation may
886 be a shipping product or other publicly available version
887 (i.e., beta version, preview release, or “nightly build”).
888 Non-shipping product releases must have implemented the
889 feature(s) for a period of at least one month in order to
890 demonstrate stability.
892 <li>is not experimental (i.e., a version specifically designed
893 to pass the test suite and is not intended for normal usage
894 going forward).
895 </ol>
896 </dl>
898 <p>The specification will remain Candidate Recommendation for at least
899 six months.
901 <h2 class=no-num id="acknowledgments">
902 Acknowledgments</h2>
904 <p>
905 Thanks especially to the feedback from
906 Håkon Wium Lie,
907 Florian Rivoal,
908 Alan Stearns,
909 and all the rest of the
910 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
911 </p>
913 <h2 class=no-num id="references">
914 References</h2>
916 <h3 class="no-num" id="normative-references">
917 Normative references</h3>
918 <!--normative-->
920 <h3 class="no-num" id="other-references">
921 Other references</h3>
922 <!--informative-->
924 <h2 class="no-num" id="index">
925 Index</h2>
926 <!--index-->
928 <h2 class="no-num" id="property-index">
929 Property index</h2>
930 <!-- properties -->
932 </body>
933 </html>
934 <!-- Keep this comment at the end of the file
935 Local variables:
936 mode: sgml
937 sgml-declaration:"~/SGML/HTML4.decl"
938 sgml-default-doctype-name:"html"
939 sgml-minimize-attributes:t
940 sgml-nofill-elements:("pre" "style" "br")
941 sgml-live-element-indicator:t
942 sgml-omittag:nil
943 sgml-shorttag:nil
944 sgml-namecase-general:t
945 sgml-general-insert-case:lower
946 sgml-always-quote-attributes:t
947 sgml-indent-step:nil
948 sgml-indent-data:t
949 sgml-parent-document:nil
950 sgml-exposed-tags:nil
951 sgml-local-catalogs:nil
952 sgml-local-ecat-files:nil
953 End:
954 -->
