css3-overflow/Overview.src.html@ce35838cba90
css3-overflow/Overview.src.html
Thu, 16 Aug 2012 14:25:11 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Thu, 16 Aug 2012 14:25:11 -0700
- changeset 6483
- ce35838cba90
- parent 6482
- dd34855b9279
- child 6484
- 4f00e14a11d4
- permissions
- -rw-r--r--
Rename module per discussion at 2012-08-08 teleconference and at F2F on afternoon of 2012-08-13.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>CSS Overflow 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 Overflow 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-overflow-[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>
239 <h2 id="scrolling-overflow">Scrolling and hidden overflow</h2>
241 <p class="issue">
242 Move material from [[CSS21]] and [[CSS3BOX]] here.
243 </p>
245 <h2 id="paginated-overflow">Paginated overflow</h2>
247 <p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as css3-gcpm has?)</p>
249 <p class="issue">Ability to display N pages at once
250 rather than just one page at once?</p>
252 <h2 id="region-overflow">Region overflow</h2>
254 <p>
255 This section introduces and defines the meaning of
256 the new ''regions'' (<span class="issue">or ''repeat''?</span>)
257 value of the 'overflow' property.
258 </p>
260 <p>
261 When the computed value of 'overflow' for an element is ''regions'',
262 and implementations would otherwise have created a box for the element,
263 then implementations must create at least one box for that element.
264 Each box created for the element is called a <dfn>region box</dfn>
265 for that element.
266 (If an element with ''overflow: regions'' generates only one box,
267 that box is a <i>region box</i>.
268 However, if an element's computed 'overflow' is not ''regions'',
269 then its box is not a <i>region box</i>.)
270 Every <i>region box</i> is a fragmentation container,
271 and for each <i>region box</i> which ends with a fragmentation break,
272 (which could happen
273 because breakable content overflows in the block dimension
274 or because of a forced break),
275 there must be another <i>region box</i> created as a next sibling
276 of the previous one.
277 <span class="issue">Or is it as though it's a next sibling of
278 the element? Need to figure out exactly how this interacts with
279 other box-level fixup.</span>
280 (Breakable content might overflow in the box dimension either
281 because of a specified size on the region box
282 or because the region box is within a fragmentation context
283 in which it is being broken.
284 In other words, a single region box is never broken
285 across columns or pages;
286 the pieces that are in separate columns or pages
287 are always distinct region boxes.)
288 </p>
290 <p class="issue">
291 We also want ''::nth-region()'' pseudo-elements
292 to be able to apply to the pieces of an element
293 split within a fragmentation context.
294 Should we require that authors who want to use
295 ''::nth-region()'' in this way specify ''overflow:regions''
296 (even if they don't specify a constrained height),
297 or should it work automatically for all elements
298 even if they don't have ''overflow: regions''?
299 </p>
301 <div class="example">
302 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
303 <title>Breaking content into
304 equal-sized cards</title>
305 <style>
306 .in-cards {
307 overflow: regions;
309 width: 13em;
310 height: 8em;
312 padding: 4px;
313 border: medium solid blue;
314 margin: 6px;
316 font: medium/1.3 Times New
317 Roman, Times, serif;
318 }
319 </style>
320 <div class="in-cards">
321 In this example, the text in the div
322 is broken into a series of cards.
323 These cards all have the same style.
324 The presence of enough content to
325 overflow one of the cards causes
326 another one to be created. The second
327 card is created just like it's the
328 next sibling of the first.
329 </div></pre></td><td>
330 <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>
331 <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>
332 </td></tr></table>
333 </div>
335 <h3 id="region-styling">Region styling</h3>
337 <h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4>
339 <p>
340 The ::nth-region() pseudo-element is a pseudo-element
341 that describes some of the region boxes generated by an element.
342 The argument to the pseudo-element takes the same syntax
343 as the argument to the :nth-child() pseudo-class
344 defined in [[!SELECT]], and has the same meaning
345 except that the number is relative to
346 <i>region boxes</i> generated by the element
347 instead of siblings of the element.
348 </p>
350 <p class="issue">
351 If we go with a name for the 'overflow' value other than
352 ''overflow: regions'',
353 then we should probably rename this pseudo-element,
354 perhaps to ::nth-piece(), ::nth-part(), or ::nth-instance().
355 </p>
357 <p class="note">
358 Selectors that allow addressing regions
359 by counting from the end rather than the start
360 are intentionally not provided.
361 Such selectors would interfere with determining
362 the number of regions.
363 </p>
365 <h4 id="style-of-regions">Styling of regions</h4>
367 <p class="issue">
368 Should this apply to region overflow only,
369 or also to paginated overflow?
370 (If it applies,
371 then stricter property restrictions would be needed
372 for paginated overflow.)
373 </p>
375 <p>
376 In the absence of rules with ''::nth-region()'' pseudo-elements,
377 the computed style for each <i>region box</i>
378 is the computed style for the element
379 for which the <i>region box</i> was created.
380 However, the style for a <i>region box</i> is also influenced
381 by rules whose selector's <i>subject</i> [[!SELECT]]
382 has an ''::nth-region()'' pseudo-element,
383 if the 1-based number of the region box matches
384 that ''::nth-region()'' pseudo-element
385 and the selector (excluding the ''::nth-region()'' pseudo-element)
386 matches the element generating the regions.
387 </p>
389 <div class="example">
390 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
391 <style>
392 .bouncy-columns {
393 overflow: regions;
394 width: 6em;
395 height: 10em;
396 float: left;
397 margin: 1em;
398 font: medium/1.25 Times New
399 Roman, Times, serif;
400 }
401 .bouncy-columns::nth-region(1) {
402 background: aqua; color: black;
403 transform: rotate(-3deg);
404 }
405 .bouncy-columns::nth-region(2) {
406 background: yellow; color: black;
407 transform: rotate(3deg);
408 }
409 </style>
410 <div class="bouncy-columns">
411 <i>...</i>
412 </div></pre></td><td>
413 <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>
414 <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>
415 <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>
416 </td></tr></table>
417 </div>
419 <p>
420 Styling an ''::nth-region()'' pseudo-element with the 'overflow'
421 property has no effect;
422 the computed value of 'overflow' for the region box
423 remains the same as the computed value of overflow for the element.
424 </p>
426 <p>
427 Specifying ''display: none'' for a region box causes
428 the region box with that index not to be generated.
429 However, in terms of the indices
430 used for matching ''::nth-region()'' pseudo-elements
431 of later region boxes,
432 it still counts as though it was generated.
433 However, since it is not generated, it does not contain any content.
434 </p>
436 <p class="issue">
437 Would it make more sense to forbid ''display:none''?
438 Or perhaps to forbid 'display', 'position', 'float',
439 and similar (in addition to 'overflow')?
440 </p>
442 <p>
443 To match the model for other pseudo-elements
444 where the pseudo-elements live inside their corresponding element,
445 declarations in ''::nth-region()'' pseudo-elements override
446 declarations in rules without the pseudo-element.
447 The relative priority within such declarations is determined
448 by normal cascading order (see [[!CSS21]]).
449 </p>
451 <p>
452 Styles specified on ''::nth-region()'' pseudo-elements
453 do affect inheritance to content within the <i>region box</i>.
454 In other words, the content within the <i>region box</i> must
455 inherit from the region box's style (i.e., the pseudo-element style)
456 rather than directly from the element.
457 This means that elements split between region boxes may
458 have different styles for different parts of the element.
459 </p>
461 <p class="issue">
462 This inheritance rule allows specifying styles indirectly
463 (by using explicit ''inherit'' or using default inheritance
464 on properties that don't apply to '':first-letter'')
465 that can't be specified directly
466 (based on the rules in the next section).
467 This is a problem.
468 The restrictions that apply to styling inside regions
469 should also apply to inheritance from regions.
470 </p>
472 <div class="example">
473 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
474 <style>
475 .article {
476 overflow: regions;
477 }
478 .article::nth-region(1) {
479 font-size: 1.5em;
480 margin-bottom: 1em;
481 height: 4em;
482 }
483 .article::nth-region(n+2) {
484 /* 2 and up */
485 margin-left: 5em;
486 margin-right: 2em;
487 }
488 </style>
489 <div class="article">
490 The <code>font-size</code> property<i>...</i>
491 </div></pre></td><td>
492 <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the region<br>is inherited into the</div>
493 <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>
494 </td></tr></table>
495 </div>
497 <h4 id="style-in-regions">Styling inside regions</h4>
499 <p class="issue">
500 Should this apply to region overflow only,
501 or also to paginated overflow,
502 or even to pagination across pages?
503 </p>
505 <p>
506 The ''::nth-region()'' pseudo-element
507 can also be used to style
508 content inside of a <i>region box</i>.
509 Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
510 the ''::nth-region()'' pseudo-element can be applied
511 to parts of the selector other than the subject:
512 in particular, it can match ancestors of the subject.
513 However, the only CSS properties applied
514 by rules with such selectors
515 are those that apply
516 to the ''::first-letter'' pseudo-element.
517 </p>
519 <p>
520 To be more precise,
521 when a rule's selector has ''::nth-region()'' pseudo-elements
522 attached to parts of the selector other than the subject,
523 the declarations in that rule apply to
524 a fragment (or pseudo-element thereof) when:
525 </p>
526 <ol>
527 <li>
528 the declarations are for properties that apply to the
529 ''::first-letter'' pseudo-element,
530 </li>
531 <li>
532 the declarations would apply to
533 that fragment (or pseudo-element thereof)
534 had those ''::nth-region()'' pseudo-elements been removed,
535 with a particular association between
536 each sequence of simple selectors and the element it matched,
537 and
538 </li>
539 <li>
540 for each removed ''::nth-region()'' pseudo-element,
541 the fragment lives within a <i>region box</i>
542 of the element associated in that association
543 with the selector that the pseudo-element was attached to,
544 and whose index matches the pseudo-element.
545 </li>
546 </ol>
548 <div class="example">
549 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
550 <style>
551 .dark-columns {
552 overflow: regions;
553 width: 6em;
554 height: 10em;
555 float: left;
556 margin-right: 1em;
557 font: medium/1.25 Times New
558 Roman, Times, serif;
559 }
560 .dark-columns::nth-region(1) {
561 background: aqua; color: black;
562 }
563 .dark-columns::nth-region(1) :link {
564 color: blue;
565 }
566 .dark-columns::nth-region(1) :visited {
567 color: purple;
568 }
569 .dark-columns::nth-region(2) {
570 background: navy; color: white;
571 }
572 .dark-columns::nth-region(2) :link {
573 color: aqua;
574 }
575 .dark-columns::nth-region(2) :visited {
576 color: fuchsia;
577 }
578 </style>
579 <div class="dark-columns">
580 <i>...</i>
581 </div></pre></td><td>
582 <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>
583 <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>
584 </td></tr></table>
585 </div>
588 <h3 id="max-lines">The 'max-lines' property</h3>
590 <p>
591 Authors may wish to style the opening lines of an element
592 with different styles
593 by putting those opening lines in a separate region.
594 However, since it may be difficult to predict the exact height
595 occupied by those lines
596 in order to restrict the first region to that height,
597 this specification introduces a 'max-lines' property
598 that forces a region to break
599 after a specified number of lines.
600 This forces a break after the given number of lines
601 contained within the element or its descendants,
602 as long as those lines are in the same block formatting context.
603 </p>
605 <table class=propdef>
606 <tr>
607 <th>Name:
608 <td><dfn>max-lines</dfn>
609 <tr>
610 <th><a href="#values">Value</a>:
611 <td>none | <integer>
612 <tr>
613 <th>Initial:
614 <td>none
615 <tr>
616 <th>Applies to:
617 <td>region boxes
618 <tr>
619 <th>Inherited:
620 <td>no
621 <tr>
622 <th>Animatable:
623 <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
624 <tr>
625 <th>Percentages:
626 <td>N/A
627 <tr>
628 <th>Media:
629 <td>visual
630 <tr>
631 <th>Computed value:
632 <td>specified value
633 <tr>
634 <th>Canonical order:
635 <td><abbr title="follows order of property value definition">per grammar</abbr>
636 </table>
638 <dl>
639 <dt>none
640 <dd>
641 <p>
642 Breaks occur only as specified elsewhere.
643 </p>
644 </dd>
646 <dt><integer>
647 <dd>
648 <p>
649 In addition to any breaks specified elsewhere,
650 a break is forced before any line that would exceed
651 the given number of lines
652 being placed inside the element
653 (excluding lines that are in
654 a different block formatting context from
655 the block formatting context to which
656 an unstyled child of the element would belong).
657 </p>
659 <p class="issue">
660 If there are multiple boundaries between this line
661 and the previous, where exactly (in terms of element
662 boundaries) is the break forced?
663 </p>
665 <p>
666 Only positive integers are accepted.
667 Zero or negative integers are a parse error.
668 </p>
669 </dd>
670 </dl>
672 <p class="issue">Should this apply to regions overflow only, or also
673 to pagination?</p>
675 <div class="example">
676 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
677 <style>
678 .article {
679 overflow: regions;
680 }
681 .article::first-letter {
682 font-size: 2em;
683 line-height: 0.9;
684 }
685 .article::nth-region(1) {
686 font-size: 1.5em;
687 max-lines: 3;
688 }
689 .article::nth-region(n+2) {
690 /* 2 and up */
691 column-count: 2;
692 }
693 </style>
694 <div class="article">
695 <i>...</i>
696 </div></pre></td><td>
697 <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>
698 <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>
699 <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>
700 </td></tr></table>
701 </div>
703 <h2 id="conformance">
704 Conformance</h2>
706 <h3 id="placement">
707 Module interactions</h3>
709 <p>This module extends the 'overflow'
710 feature defined in [[CSS21]] section 11.1.1. It defines additional
711 overflow handling mechanisms that implementations must implement as
712 described in this module in order to conform to this module.</p>
714 <p>No properties in this module apply to the <code>::first-line</code> or
715 <code>::first-letter</code> pseudo-elements.</p>
717 <h3 id="values">
718 Values</h3>
720 <p>This specification follows the
721 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
722 definition conventions</a> from [[!CSS21]]. Value types not defined in
723 this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
724 Other CSS modules may expand the definitions of these value types: for
725 example [[CSS3COLOR]], when combined with this module, expands the
726 definition of the <color> value type as used in this specification.</p>
728 <p>In addition to the property-specific values listed in their definitions,
729 all properties defined in this specification also accept the
730 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
731 keyword as their property value. For readability it has not been repeated
732 explicitly.
735 <h3 id="conventions">
736 Document conventions</h3>
738 <p>Conformance requirements are expressed with a combination of
739 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
740 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
741 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
742 document are to be interpreted as described in RFC 2119.
743 However, for readability, these words do not appear in all uppercase
744 letters in this specification.
746 <p>All of the text of this specification is normative except sections
747 explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
749 <p>Examples in this specification are introduced with the words “for example”
750 or are set apart from the normative text with <code>class="example"</code>,
751 like this:
753 <div class="example">
754 <p>This is an example of an informative example.</p>
755 </div>
757 <p>Informative notes begin with the word “Note” and are set apart from the
758 normative text with <code>class="note"</code>, like this:
760 <p class="note">Note, this is an informative note.</p>
762 <h3 id="conformance-classes">
763 Conformance classes</h3>
765 <p>Conformance to CSS Overflow Module Level 3
766 is defined for three conformance classes:
767 <dl>
768 <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
769 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
770 style sheet</a>.
771 <dt><dfn>renderer</dfn></dt>
772 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
773 that interprets the semantics of a style sheet and renders
774 documents that use them.
775 <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
776 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
777 that writes a style sheet.
778 </dl>
780 <p>A style sheet is conformant to CSS Overflow Module Level 3
781 if all of its statements that use syntax defined in this module are valid
782 according to the generic CSS grammar and the individual grammars of each
783 feature defined in this module.
785 <p>A renderer is conformant to CSS Overflow Module Level 3
786 if, in addition to interpreting the style sheet as defined by the
787 appropriate specifications, it supports all the features defined
788 by CSS Overflow Module Level 3 by parsing them correctly
789 and rendering the document accordingly. However, the inability of a
790 UA to correctly render a document due to limitations of the device
791 does not make the UA non-conformant. (For example, a UA is not
792 required to render color on a monochrome monitor.)
794 <p>An authoring tool is conformant to CSS Overflow Module Level 3
795 if it writes style sheets that are syntactically correct according to the
796 generic CSS grammar and the individual grammars of each feature in
797 this module, and meet all other conformance requirements of style sheets
798 as described in this module.
800 <h3 id="partial">
801 Partial implementations</h3>
803 <p>So that authors can exploit the forward-compatible parsing rules to
804 assign fallback values, CSS renderers <strong>must</strong>
805 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
806 as appropriate</a>) any at-rules, properties, property values, keywords,
807 and other syntactic constructs for which they have no usable level of
808 support. In particular, user agents <strong>must not</strong> selectively
809 ignore unsupported component values and honor supported values in a single
810 multi-value property declaration: if any value is considered invalid
811 (as unsupported values must be), CSS requires that the entire declaration
812 be ignored.</p>
814 <h3 id="experimental">
815 Experimental implementations</h3>
817 <p>To avoid clashes with future CSS features, the CSS2.1 specification
818 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
819 syntax</a> for proprietary and experimental extensions to CSS.
821 <p>Prior to a specification reaching the Candidate Recommendation stage
822 in the W3C process, all implementations of a CSS feature are considered
823 experimental. The CSS Working Group recommends that implementations
824 use a vendor-prefixed syntax for such features, including those in
825 W3C Working Drafts. This avoids incompatibilities with future changes
826 in the draft.
827 </p>
829 <h3 id="testing">
830 Non-experimental implementations</h3>
832 <p>Once a specification reaches the Candidate Recommendation stage,
833 non-experimental implementations are possible, and implementors should
834 release an unprefixed implementation of any CR-level feature they
835 can demonstrate to be correctly implemented according to spec.
837 <p>To establish and maintain the interoperability of CSS across
838 implementations, the CSS Working Group requests that non-experimental
839 CSS renderers submit an implementation report (and, if necessary, the
840 testcases used for that implementation report) to the W3C before
841 releasing an unprefixed implementation of any CSS features. Testcases
842 submitted to W3C are subject to review and correction by the CSS
843 Working Group.
845 <p>Further information on submitting testcases and implementation reports
846 can be found from on the CSS Working Group's website at
847 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
848 Questions should be directed to the
849 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
850 mailing list.
852 <h3 id="cr-exit-criteria">
853 CR exit criteria</h3>
855 <p class=issue>[Change or remove the following CR exit criteria if
856 the spec is not a module, but, e.g., a Note or a profile. This text was <a
857 href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
859 <p>
860 For this specification to be advanced to Proposed Recommendation,
861 there must be at least two independent, interoperable implementations
862 of each feature. Each feature may be implemented by a different set of
863 products, there is no requirement that all features be implemented by
864 a single product. For the purposes of this criterion, we define the
865 following terms:
867 <dl>
868 <dt>independent <dd>each implementation must be developed by a
869 different party and cannot share, reuse, or derive from code
870 used by another qualifying implementation. Sections of code that
871 have no bearing on the implementation of this specification are
872 exempt from this requirement.
874 <dt>interoperable <dd>passing the respective test case(s) in the
875 official CSS test suite, or, if the implementation is not a Web
876 browser, an equivalent test. Every relevant test in the test
877 suite should have an equivalent test created if such a user
878 agent (UA) is to be used to claim interoperability. In addition
879 if such a UA is to be used to claim interoperability, then there
880 must one or more additional UAs which can also pass those
881 equivalent tests in the same way for the purpose of
882 interoperability. The equivalent tests must be made publicly
883 available for the purposes of peer review.
885 <dt>implementation <dd>a user agent which:
887 <ol class=inline>
888 <li>implements the specification.
890 <li>is available to the general public. The implementation may
891 be a shipping product or other publicly available version
892 (i.e., beta version, preview release, or “nightly build”).
893 Non-shipping product releases must have implemented the
894 feature(s) for a period of at least one month in order to
895 demonstrate stability.
897 <li>is not experimental (i.e., a version specifically designed
898 to pass the test suite and is not intended for normal usage
899 going forward).
900 </ol>
901 </dl>
903 <p>The specification will remain Candidate Recommendation for at least
904 six months.
906 <h2 class=no-num id="acknowledgments">
907 Acknowledgments</h2>
909 <p>
910 Thanks especially to the feedback from
911 Håkon Wium Lie,
912 Florian Rivoal,
913 Alan Stearns,
914 and all the rest of the
915 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
916 </p>
918 <h2 class=no-num id="references">
919 References</h2>
921 <h3 class="no-num" id="normative-references">
922 Normative references</h3>
923 <!--normative-->
925 <h3 class="no-num" id="other-references">
926 Other references</h3>
927 <!--informative-->
929 <h2 class="no-num" id="index">
930 Index</h2>
931 <!--index-->
933 <h2 class="no-num" id="property-index">
934 Property index</h2>
935 <!-- properties -->
937 </body>
938 </html>
939 <!-- Keep this comment at the end of the file
940 Local variables:
941 mode: sgml
942 sgml-declaration:"~/SGML/HTML4.decl"
943 sgml-default-doctype-name:"html"
944 sgml-minimize-attributes:t
945 sgml-nofill-elements:("pre" "style" "br")
946 sgml-live-element-indicator:t
947 sgml-omittag:nil
948 sgml-shorttag:nil
949 sgml-namecase-general:t
950 sgml-general-insert-case:lower
951 sgml-always-quote-attributes:t
952 sgml-indent-step:nil
953 sgml-indent-data:t
954 sgml-parent-document:nil
955 sgml-exposed-tags:nil
956 sgml-local-catalogs:nil
957 sgml-local-ecat-files:nil
958 End:
959 -->
