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