Fri, 17 Aug 2012 23:51:31 +0200
dummy update
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/css3-overflow/Makefile Fri Aug 17 23:51:31 2012 +0200 1.3 @@ -0,0 +1,39 @@ 1.4 +# Calling the post-processor with file-upload. Assumes the username 1.5 +# and password are in ~/.curl-w3.org 1.6 +# 1.7 +# Possible other options: 1.8 +# -F date=YYYY-MM-DD 1.9 +# -F ids=on 1.10 + 1.11 +%.html: %.src.html 1.12 + @echo "Calling post-processor to generate $@..." 1.13 + @curl -F file=@$< -F group=CSS -F output=html -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@ 1.14 +%.err: %.src.html 1.15 + @echo "Calling post-processor to check $<..." 1.16 + @curl -F file=@$< -F group=CSS -F output=err -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@ 1.17 + 1.18 + 1.19 + 1.20 +all: check Overview.html 1.21 + @echo Done. 1.22 + 1.23 +check: Overview.err 1.24 + @cat $< 1.25 + @grep -q '^No errors$$' $< # Force a non-zero exit code if errors 1.26 + 1.27 + 1.28 + 1.29 +# A handy shortcut: 1.30 + 1.31 +commit: update clean all 1.32 + cvs commit -m 'Generated. Do not edit!' Overview.html 1.33 + 1.34 +update: 1.35 + cvs update 1.36 + 1.37 +clean: 1.38 + rm Overview.html 1.39 + 1.40 + 1.41 + 1.42 +.PHONY: check commit update clean
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 2.2 +++ b/css3-overflow/Overview.html Fri Aug 17 23:51:31 2012 +0200 2.3 @@ -0,0 +1,1378 @@ 2.4 +<!DOCTYPE html> 2.5 + 2.6 +<html lang=en> 2.7 + <head><meta content="text/html; charset=utf-8" http-equiv=Content-Type> 2.8 + 2.9 + <title>CSS Overflow Module Level 3</title> 2.10 + <link href="#contents" rel=contents> 2.11 + <link href="#index" rel=index> 2.12 + <link href="../default.css" rel=stylesheet type="text/css"> 2.13 + <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 2.14 + type="text/css"> 2.15 + 2.16 + <style> 2.17 + table.source-demo-pair { 2.18 + width: 100%; 2.19 + } 2.20 + 2.21 + .in-cards-demo { 2.22 + width: 13em; 2.23 + height: 8em; 2.24 + 2.25 + padding: 4px; 2.26 + border: medium solid blue; 2.27 + margin: 6px; 2.28 + 2.29 + font: medium/1.3 Times New Roman, Times, serif; 2.30 + white-space: nowrap; 2.31 + } 2.32 + 2.33 + .bouncy-columns-demo { 2.34 + width: 6em; 2.35 + height: 10em; 2.36 + float: left; 2.37 + margin: 1em; 2.38 + font: medium/1.25 Times New Roman, Times, serif; 2.39 + white-space: nowrap; 2.40 + } 2.41 + .bouncy-columns-demo.one { 2.42 + background: aqua; color: black; 2.43 + transform: rotate(-3deg); 2.44 + } 2.45 + .bouncy-columns-demo.two { 2.46 + background: yellow; color: black; 2.47 + transform: rotate(3deg); 2.48 + } 2.49 + 2.50 + .article-font-inherit-demo { 2.51 + font: 1em/1.25 Times New Roman, Times, serif; 2.52 + white-space: nowrap; 2.53 + } 2.54 + .article-font-inherit-demo.one { 2.55 + width: 12em; 2.56 + font-size: 1.5em; 2.57 + margin-bottom: 1em; 2.58 + height: 4em; 2.59 + } 2.60 + .article-font-inherit-demo.two { 2.61 + width: 11em; 2.62 + margin-left: 5em; 2.63 + margin-right: 2em; 2.64 + } 2.65 + 2.66 + .dark-columns-demo { 2.67 + width: 6em; 2.68 + height: 10em; 2.69 + float: left; 2.70 + margin-right: 1em; 2.71 + font: medium/1.25 Times New Roman, Times, serif; 2.72 + white-space: nowrap; 2.73 + } 2.74 + .dark-columns-demo.one { 2.75 + background: aqua; color: black; 2.76 + } 2.77 + .dark-columns-demo.one :link { 2.78 + color: blue; 2.79 + } 2.80 + .dark-columns-demo.one :visited { 2.81 + color: purple; 2.82 + } 2.83 + .dark-columns-demo.two { 2.84 + background: navy; color: white; 2.85 + } 2.86 + .dark-columns-demo.two :link { 2.87 + color: aqua; 2.88 + } 2.89 + .dark-columns-demo.two :visited { 2.90 + color: fuchsia; 2.91 + } 2.92 + 2.93 + .article-max-lines-demo { 2.94 + font: 1em/1.25 Times New Roman, Times, serif; 2.95 + white-space: nowrap; 2.96 + } 2.97 + .article-max-lines-demo.one::first-letter { 2.98 + font-size: 2em; 2.99 + line-height: 0.9; 2.100 + } 2.101 + .article-max-lines-demo.one { 2.102 + font-size: 1.5em; 2.103 + width: 16em; 2.104 + } 2.105 + .article-max-lines-demo.two { 2.106 + width: 11.5em; 2.107 + float: left; margin-right: 1em; 2.108 + } 2.109 + .article-max-lines-demo.three { 2.110 + width: 11.5em; 2.111 + float: left; 2.112 + } 2.113 + </style> 2.114 + 2.115 + <body> 2.116 + <div class=head> <!--begin-logo--> 2.117 + <p><a href="http://www.w3.org/"><img alt=W3C height=48 2.118 + src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 2.119 + 2.120 + <h1>CSS Overflow Module Level 3</h1> 2.121 + 2.122 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 August 2012</h2> 2.123 + 2.124 + <dl> 2.125 + <dt>This version: 2.126 + 2.127 + <dd><a 2.128 + href="http://www.w3.org/TR/2012/ED-css3-overflow-20120816/">http://www.w3.org/TR/2012/ED-css3-overflow-20120816/</a> 2.129 + 2.130 + 2.131 + <dt>Latest version: 2.132 + 2.133 + <dd><a 2.134 + href="http://www.w3.org/TR/css3-overflow/">http://www.w3.org/TR/css3-overflow/</a> 2.135 + 2.136 + 2.137 + <dt>Editor's draft: 2.138 + 2.139 + <dd><a 2.140 + href="http://dev.w3.org/csswg/css3-overflow/">http://dev.w3.org/csswg/css3-overflow/</a> 2.141 + <!-- 2.142 + <dt>Previous version: 2.143 + <dd><a href="http://www.w3.org/PreviousVersionURI"> 2.144 + http://www.w3.org/PreviousVersionURI</a> 2.145 +--> 2.146 + 2.147 + 2.148 + <dt>Issue Tracking: 2.149 + 2.150 + <dd>Maintained in document (only editor's draft is current) 2.151 + 2.152 + <dt>Feedback: 2.153 + 2.154 + <dd><a 2.155 + href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 2.156 + with subject line “<kbd>[css3-overflow] <var>… message topic 2.157 + …</var></kbd>” 2.158 + 2.159 + <dt>Editors: 2.160 + 2.161 + <dd class="h-card vcard"> <a class="p-name fn u-url url" 2.162 + href="http://dbaron.org/" rel=author>L. David Baron</a>, <a 2.163 + class="p-org org" href="http://www.mozilla.org/">Mozilla</a> 2.164 + </dl> 2.165 + <!--begin-copyright--> 2.166 + <p class=copyright><a 2.167 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 2.168 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 2.169 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 2.170 + href="http://www.csail.mit.edu/"><abbr 2.171 + title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 2.172 + href="http://www.ercim.eu/"><abbr 2.173 + title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 2.174 + <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 2.175 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 2.176 + <a 2.177 + href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 2.178 + and <a 2.179 + href="http://www.w3.org/Consortium/Legal/copyright-documents">document 2.180 + use</a> rules apply.</p> 2.181 + <!--end-copyright--> 2.182 + <hr title="Separator for header"> 2.183 + </div> 2.184 + 2.185 + <h2 class="no-num no-toc" id=abstract>Abstract</h2> 2.186 + 2.187 + <p> <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for 2.188 + describing the rendering of structured documents (such as HTML and XML) on 2.189 + screen, on paper, in speech, etc. This module contains the features of CSS 2.190 + relating to new mechanisms of overflow handling in visual media (e.g., 2.191 + screen or paper). In interactive media, it describes features that allow 2.192 + the overflow from a fixed size container to be handled by pagination 2.193 + (displaying one page at a time). It also describes features, applying to 2.194 + all visual media, that allow the contents of an element to be spread 2.195 + across multiple fragments, allowing the contents to flow across multiple 2.196 + regions or to have different styles for different fragments. 2.197 + 2.198 + <h2 class="no-num no-toc" id=status>Status of this document</h2> 2.199 + <!--begin-status--> 2.200 + 2.201 + <p>This is a public copy of the editors' draft. It is provided for 2.202 + discussion only and may change at any moment. Its publication here does 2.203 + not imply endorsement of its contents by W3C. Don't cite this document 2.204 + other than as work in progress. 2.205 + 2.206 + <p>The (<a 2.207 + href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 2.208 + mailing list <a 2.209 + href="mailto:www-style@w3.org?Subject=%5Bcss3-overflow%5D%20PUT%20SUBJECT%20HERE"> 2.210 + www-style@w3.org</a> (see <a 2.211 + href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 2.212 + discussion of this specification. When sending e-mail, please put the text 2.213 + “css3-overflow” in the subject, preferably like this: 2.214 + “[<!---->css3-overflow<!---->] <em>…summary of comment…</em>” 2.215 + 2.216 + <p>This document was produced by the <a href="/Style/CSS/members">CSS 2.217 + Working Group</a> (part of the <a href="/Style/">Style Activity</a>). 2.218 + 2.219 + <p>This document was produced by a group operating under the <a 2.220 + href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent 2.221 + Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" 2.222 + rel=disclosure>public list of any patent disclosures</a> made in 2.223 + connection with the deliverables of the group; that page also includes 2.224 + instructions for disclosing a patent. An individual who has actual 2.225 + knowledge of a patent which the individual believes contains <a 2.226 + href="/Consortium/Patent-Policy-20040205/#def-essential">Essential 2.227 + Claim(s)</a> must disclose the information in accordance with <a 2.228 + href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the 2.229 + W3C Patent Policy</a>.</p> 2.230 + <!--end-status--> 2.231 + 2.232 + <p>The following features are at risk: … 2.233 + 2.234 + <h2 class="no-num no-toc" id=contents> Table of contents</h2> 2.235 + <!--begin-toc--> 2.236 + 2.237 + <ul class=toc> 2.238 + <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 2.239 + 2.240 + <li><a href="#scrolling-overflow"><span class=secno>2. </span>Scrolling 2.241 + and hidden overflow</a> 2.242 + 2.243 + <li><a href="#paginated-overflow"><span class=secno>3. </span>Paginated 2.244 + overflow</a> 2.245 + 2.246 + <li><a href="#fragment-overflow"><span class=secno>4. </span>Fragment 2.247 + overflow</a> 2.248 + <ul class=toc> 2.249 + <li><a href="#fragment-styling"><span class=secno>4.1. </span>Fragment 2.250 + styling</a> 2.251 + <ul class=toc> 2.252 + <li><a href="#fragment-pseudo-element"><span class=secno>4.1.1. 2.253 + </span>The ::nth-fragment() pseudo-element</a> 2.254 + 2.255 + <li><a href="#style-of-fragments"><span class=secno>4.1.2. 2.256 + </span>Styling of fragments</a> 2.257 + 2.258 + <li><a href="#style-in-fragments"><span class=secno>4.1.3. 2.259 + </span>Styling inside fragments</a> 2.260 + </ul> 2.261 + 2.262 + <li><a href="#max-lines"><span class=secno>4.2. </span>The ‘<code 2.263 + class=property>max-lines</code>’ property</a> 2.264 + </ul> 2.265 + 2.266 + <li><a href="#static-media"><span class=secno>5. </span>Overflow in static 2.267 + media</a> 2.268 + 2.269 + <li><a href="#conformance"><span class=secno>6. </span> Conformance</a> 2.270 + <ul class=toc> 2.271 + <li><a href="#placement"><span class=secno>6.1. </span> Module 2.272 + interactions</a> 2.273 + 2.274 + <li><a href="#values"><span class=secno>6.2. </span> Values</a> 2.275 + 2.276 + <li><a href="#conventions"><span class=secno>6.3. </span> Document 2.277 + conventions</a> 2.278 + 2.279 + <li><a href="#conformance-classes"><span class=secno>6.4. </span> 2.280 + Conformance classes</a> 2.281 + 2.282 + <li><a href="#partial"><span class=secno>6.5. </span> Partial 2.283 + implementations</a> 2.284 + 2.285 + <li><a href="#experimental"><span class=secno>6.6. </span> Experimental 2.286 + implementations</a> 2.287 + 2.288 + <li><a href="#testing"><span class=secno>6.7. </span> Non-experimental 2.289 + implementations</a> 2.290 + 2.291 + <li><a href="#cr-exit-criteria"><span class=secno>6.8. </span> CR exit 2.292 + criteria</a> 2.293 + </ul> 2.294 + 2.295 + <li class=no-num><a href="#acknowledgments"> Acknowledgments</a> 2.296 + 2.297 + <li class=no-num><a href="#references"> References</a> 2.298 + <ul class=toc> 2.299 + <li class=no-num><a href="#normative-references"> Normative 2.300 + references</a> 2.301 + 2.302 + <li class=no-num><a href="#other-references"> Other references</a> 2.303 + </ul> 2.304 + 2.305 + <li class=no-num><a href="#index"> Index</a> 2.306 + 2.307 + <li class=no-num><a href="#property-index"> Property index</a> 2.308 + </ul> 2.309 + <!--end-toc--> 2.310 + 2.311 + <h2 id=intro><span class=secno>1. </span> Introduction</h2> 2.312 + 2.313 + <p> In CSS Level 1 <a href="#CSS1" 2.314 + rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>, placing more content than would 2.315 + fit inside an element with a specified size was generally an authoring 2.316 + error. Doing so caused the content to extend outside the bounds of the 2.317 + element, which would likely cause that content to overlap with other 2.318 + elements. 2.319 + 2.320 + <p> CSS Level 2 <a href="#CSS21" 2.321 + rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> introduced the ‘<code 2.322 + class=property>overflow</code>’ property, which allows authors to have 2.323 + overflow be handled by scrolling, which means it is no longer an authoring 2.324 + error. It also allows authors to specify that overflow is handled by 2.325 + clipping, which makes sense when the author's intent is that the content 2.326 + not be shown. 2.327 + 2.328 + <p> However, scrolling is not the only way to present large amounts of 2.329 + content, and may even not be the optimal way. After all, the codex 2.330 + replaced the scroll as the common format for large written works because 2.331 + of its advantages. 2.332 + 2.333 + <p> This specification introduces a mechanism for Web pages to specify that 2.334 + an element of a page should handle overflow through pagination rather than 2.335 + through scrolling. 2.336 + 2.337 + <p> This specification also extends the concept of overflow in another 2.338 + direction. Instead of requiring that authors specify a single area into 2.339 + which the content of an element must flow, this specification allows 2.340 + authors to specify multiple fragments, each with their own dimensions and 2.341 + styles, so that the content of the element can flow from one to the next, 2.342 + using as many as needed to place the content without overflowing. 2.343 + 2.344 + <p> In both of these cases, implementations must break the content in the 2.345 + block-progression dimension. Implementations must do this is described in 2.346 + the CSS Fragmentation Module <a href="#CSS3-BREAK" 2.347 + rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>. 2.348 + 2.349 + <h2 id=scrolling-overflow><span class=secno>2. </span>Scrolling and hidden 2.350 + overflow</h2> 2.351 + 2.352 + <p class=issue> Move material from <a href="#CSS21" 2.353 + rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> and <a href="#CSS3BOX" 2.354 + rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a> here. 2.355 + 2.356 + <h2 id=paginated-overflow><span class=secno>3. </span>Paginated overflow</h2> 2.357 + 2.358 + <p class=issue>overflow:paginate or overflow:pages (or paged-x, paged-y, 2.359 + paged-x-controls, paged-y-controls as <a href="#CSS3GCPM" 2.360 + rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> has?) 2.361 + 2.362 + <p class=issue>Ability to display N pages at once rather than just one page 2.363 + at once? 2.364 + 2.365 + <p class=issue> The current implementation of paginated overflow uses the 2.366 + ‘<code class=property>overflow</code>’/‘<code 2.367 + class=property>overflow-x</code>’/‘<code 2.368 + class=property>overflow-y</code>’ properties rather than the ‘<code 2.369 + class=property>overflow-style</code>’ property as proposed in the <a 2.370 + href="#CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> draft 2.371 + (which also matches the <a href="#CSS3-MARQUEE" 2.372 + rel=biblioentry>[CSS3-MARQUEE]<!--{{CSS3-MARQUEE}}--></a> proposal). We 2.373 + should probably switch away from ‘<code 2.374 + class=property>overflow-style</code>’, but that's not 100% clear. 2.375 + 2.376 + <h2 id=fragment-overflow><span class=secno>4. </span>Fragment overflow</h2> 2.377 + 2.378 + <p> This section introduces and defines the meaning of the new ‘<code 2.379 + class=css>fragments</code>’ value of the ‘<code 2.380 + class=property>overflow</code>’ property. 2.381 + 2.382 + <p> When the computed value of ‘<code class=property>overflow</code>’ 2.383 + for an element is ‘<code class=css>fragments</code>’, and 2.384 + implementations would otherwise have created a box for the element, then 2.385 + implementations must create a sequence of <dfn id=fragment-box>fragment 2.386 + box</dfn>es for that element. (It is possible for an element with ‘<code 2.387 + class=css>overflow: fragments</code>’ to generate only one <a 2.388 + href="#fragment-box"><i>fragment box</i></a>. However, if an element's 2.389 + computed ‘<code class=property>overflow</code>’ is not ‘<code 2.390 + class=css>fragments</code>’, then its box is not a <a 2.391 + href="#fragment-box"><i>fragment box</i></a>.) Every <a 2.392 + href="#fragment-box"><i>fragment box</i></a> is a fragmentation container, 2.393 + and any overflow that would cause that fragmentation container to fragment 2.394 + causes another <a href="#fragment-box"><i>fragment box</i></a> created as 2.395 + a next sibling of the previous one. <span class=issue>Or is it as though 2.396 + it's a next sibling of the element? Need to figure out exactly how this 2.397 + interacts with other box-level fixup.</span> Additionally, if the <a 2.398 + href="#fragment-box"><i>fragment box</i></a> is also a multi-column box 2.399 + (as defined in <a href="#CSS3COL" 2.400 + rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> <span class=issue>though 2.401 + it defines <i>multi-column element</i></span>) any content that would lead 2.402 + to the creation of <i>overflow columns</i> <a href="#CSS3COL" 2.403 + rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> instead is flown into an 2.404 + additional fragment box. However, fragment boxes may themselves be broken 2.405 + (due to fragmentation in a fragmentation context outside of them, such as 2.406 + pages, columns, or other fragment boxes); such breaking leads to fragments 2.407 + of the same fragment box rather than multiple fragment boxes. (This 2.408 + matters because fragment boxes may be styled by their index; such breaking 2.409 + leads to multiple fragments of a fragment box with a single index. This 2.410 + design choice is so that breaking a fragment box across pages does not 2.411 + break the association of indices to particular pieces of content.) <span 2.412 + class=issue>Should a forced break that breaks to an outer fragmentation 2.413 + context cause a new fragment of a single fragment box or a new fragment 2.414 + box?</span> <span class=issue>Should we find a term other than <a 2.415 + href="#fragment-box"><i>fragment box</i></a> here to make this a little 2.416 + less confusing?</span> 2.417 + 2.418 + <p class=issue> What if we want to be able to style the pieces of an 2.419 + element split within another type of fragmentation context? These rules 2.420 + prevent ever using ‘<code class=css>::nth-fragment()</code>’ for that, 2.421 + despite that the name seems the most logical name for such a feature. 2.422 + 2.423 + <div class=example> 2.424 + <table class=source-demo-pair> 2.425 + <tbody> 2.426 + <tr> 2.427 + <td> 2.428 + <pre><!DOCTYPE HTML> 2.429 +<title>Breaking content into 2.430 + equal-sized cards</title> 2.431 +<style> 2.432 + .in-cards { 2.433 + overflow: fragments; 2.434 + 2.435 + width: 13em; 2.436 + height: 8em; 2.437 + 2.438 + padding: 4px; 2.439 + border: medium solid blue; 2.440 + margin: 6px; 2.441 + 2.442 + font: medium/1.3 Times New 2.443 + Roman, Times, serif; 2.444 + } 2.445 +</style> 2.446 +<div class="in-cards"> 2.447 + In this example, the text in the div 2.448 + is broken into a series of cards. 2.449 + These cards all have the same style. 2.450 + The presence of enough content to 2.451 + overflow one of the cards causes 2.452 + another one to be created. The second 2.453 + card is created just like it's the 2.454 + next sibling of the first. 2.455 +</div></pre> 2.456 + 2.457 + <td> 2.458 + <div class=in-cards-demo>In this example, the text in the<br> 2.459 + div is broken into a series of<br> 2.460 + cards. These cards all have the<br> 2.461 + same style. The presence of<br> 2.462 + enough content to overflow<br> 2.463 + one of the cards causes another</div> 2.464 + 2.465 + <div class=in-cards-demo>one to be created. The second<br> 2.466 + card is created just like it's the<br> 2.467 + next sibling of the first.</div> 2.468 + </table> 2.469 + </div> 2.470 + 2.471 + <p class=issue> We should specify that ‘<code class=css>overflow: 2.472 + fragments</code>’ does not apply to at least some table parts, and 2.473 + perhaps other elements as well. We need to determine exactly which ones. 2.474 + 2.475 + <p class=issue> This specification needs to say which type of fragmentation 2.476 + context is created so that it's clear which values of the ‘<code 2.477 + class=property>break</code>’ property cause breaks within this context. 2.478 + We probably want ‘<code class=css>break: regions</code>’ to apply. 2.479 + 2.480 + <p class=issue> This specification needs a processing model that will apply 2.481 + in cases where the layout containing the fragments has characteristics 2.482 + that use the intrinsic size of the fragments to change the amount of space 2.483 + available for them, such as <a href="#CSS3-GRID-LAYOUT" 2.484 + rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a>. There 2.485 + has already been some work on such a processing model in <a 2.486 + href="#CSS3-REGIONS" 2.487 + rel=biblioentry>[CSS3-REGIONS]<!--{{CSS3-REGIONS}}--></a>, and the work 2.488 + done on a model there, and the editors of that specification, should 2.489 + inform what happens in this specification. 2.490 + 2.491 + <h3 id=fragment-styling><span class=secno>4.1. </span>Fragment styling</h3> 2.492 + 2.493 + <h4 id=fragment-pseudo-element><span class=secno>4.1.1. </span>The 2.494 + ::nth-fragment() pseudo-element</h4> 2.495 + 2.496 + <p> The ::nth-fragment() pseudo-element is a pseudo-element that describes 2.497 + some of the <a href="#fragment-box"><i>fragment box</i></a>es generated by 2.498 + an element. The argument to the pseudo-element takes the same syntax as 2.499 + the argument to the :nth-child() pseudo-class defined in <a href="#SELECT" 2.500 + rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, and has the same meaning 2.501 + except that the number is relative to <a href="#fragment-box"><i>fragment 2.502 + box</i></a>es generated by the element instead of siblings of the element. 2.503 + 2.504 + 2.505 + <p class=note> Selectors that allow addressing fragments by counting from 2.506 + the end rather than the start are intentionally not provided. Such 2.507 + selectors would interfere with determining the number of fragments. 2.508 + 2.509 + <p class=issue> Depending on future discussions, this ‘<code 2.510 + class=css>::nth-fragment(<var>an+b</var>)</code>’ syntax may be replaced 2.511 + with the new ‘<code class=css>::fragment:nth(<var>an+b</var>)</code>’ 2.512 + syntax. 2.513 + 2.514 + <h4 id=style-of-fragments><span class=secno>4.1.2. </span>Styling of 2.515 + fragments</h4> 2.516 + 2.517 + <p class=issue> Should this apply to fragment overflow only, or also to 2.518 + paginated overflow? (If it applies, then stricter property restrictions 2.519 + would be needed for paginated overflow.) 2.520 + 2.521 + <p> In the absence of rules with ‘<code 2.522 + class=css>::nth-fragment()</code>’ pseudo-elements, the computed style 2.523 + for each <a href="#fragment-box"><i>fragment box</i></a> is the computed 2.524 + style for the element for which the <a href="#fragment-box"><i>fragment 2.525 + box</i></a> was created. However, the style for a <a 2.526 + href="#fragment-box"><i>fragment box</i></a> is also influenced by rules 2.527 + whose selector's <i>subject</i> <a href="#SELECT" 2.528 + rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> has an ‘<code 2.529 + class=css>::nth-fragment()</code>’ pseudo-element, if the 1-based number 2.530 + of the <a href="#fragment-box"><i>fragment box</i></a> matches that 2.531 + ‘<code class=css>::nth-fragment()</code>’ pseudo-element and the 2.532 + selector (excluding the ‘<code class=css>::nth-fragment()</code>’ 2.533 + pseudo-element) matches the element generating the fragments. 2.534 + 2.535 + <p> When determining the style of the <a href="#fragment-box"><i>fragment 2.536 + box</i></a>, these rules that match the fragment pseudo-element cascade 2.537 + together with the rules that match the element, with the fragment 2.538 + pseudo-element adding the specificity of a pseudo-class to the specificity 2.539 + calculation. <span class=issue>Does this need to be specified in the 2.540 + cascading module as well?</span> 2.541 + 2.542 + <div class=example> 2.543 + <table class=source-demo-pair> 2.544 + <tbody> 2.545 + <tr> 2.546 + <td> 2.547 + <pre><!DOCTYPE HTML> 2.548 +<style> 2.549 + .bouncy-columns { 2.550 + overflow: fragments; 2.551 + width: 6em; 2.552 + height: 10em; 2.553 + float: left; 2.554 + margin: 1em; 2.555 + font: medium/1.25 Times New 2.556 + Roman, Times, serif; 2.557 + } 2.558 + .bouncy-columns::nth-fragment(1) { 2.559 + background: aqua; color: black; 2.560 + transform: rotate(-3deg); 2.561 + } 2.562 + .bouncy-columns::nth-fragment(2) { 2.563 + background: yellow; color: black; 2.564 + transform: rotate(3deg); 2.565 + } 2.566 +</style> 2.567 +<div class="bouncy-columns"> 2.568 + <i>...</i> 2.569 +</div></pre> 2.570 + 2.571 + <td> 2.572 + <div class="bouncy-columns-demo one">In this<br> 2.573 + example, the<br> 2.574 + text in the div<br> 2.575 + is broken into<br> 2.576 + a series of<br> 2.577 + columns. The<br> 2.578 + author<br> 2.579 + probably</div> 2.580 + 2.581 + <div class="bouncy-columns-demo two">intended the<br> 2.582 + text to fill two<br> 2.583 + columns. But<br> 2.584 + if it happens to<br> 2.585 + fill three<br> 2.586 + columns, the<br> 2.587 + third column is<br> 2.588 + still created. It</div> 2.589 + 2.590 + <div class=bouncy-columns-demo>just doesn't<br> 2.591 + have any<br> 2.592 + fragment-specific<br> 2.593 + styling because<br> 2.594 + the author<br> 2.595 + didn't give it<br> 2.596 + any.</div> 2.597 + </table> 2.598 + </div> 2.599 + 2.600 + <p> Styling an ‘<code class=css>::nth-fragment()</code>’ pseudo-element 2.601 + with the ‘<code class=property>overflow</code>’ property does take 2.602 + effect; if a <a href="#fragment-box"><i>fragment box</i></a> has a 2.603 + computed value of ‘<code class=property>overflow</code>’ other than 2.604 + ‘<code class=css>fragments</code>’ then that fragment box is the last 2.605 + fragment. However, overriding ‘<code class=css>overflow</code>’ on the 2.606 + first fragment does not cause the <a href="#fragment-box"><i>fragment 2.607 + box</i></a> not to exist; whether there are fragment boxes at all is 2.608 + determined by the computed value of overflow for the element. 2.609 + 2.610 + <p> Styling an ‘<code class=css>::nth-fragment()</code>’ pseudo-element 2.611 + with the ‘<code class=property>content</code>’ property has no effect; 2.612 + the computed value of ‘<code class=property>content</code>’ for the 2.613 + fragment box remains the same as the computed value of content for the 2.614 + element. 2.615 + 2.616 + <p> Specifying ‘<code class=css>display: none</code>’ for a <a 2.617 + href="#fragment-box"><i>fragment box</i></a> causes the fragment box with 2.618 + that index not to be generated. However, in terms of the indices used for 2.619 + matching ‘<code class=css>::nth-fragment()</code>’ pseudo-elements of 2.620 + later fragment boxes, it still counts as though it was generated. However, 2.621 + since it is not generated, it does not contain any content. 2.622 + 2.623 + <p class=issue> Would it make more sense to forbid ‘<code 2.624 + class=css>display:none</code>’? Or perhaps to forbid ‘<code 2.625 + class=property>display</code>’, ‘<code 2.626 + class=property>position</code>’, ‘<code 2.627 + class=property>float</code>’, and similar (in addition to ‘<code 2.628 + class=property>overflow</code>’)? 2.629 + 2.630 + <p> To match the model for other pseudo-elements where the pseudo-elements 2.631 + live inside their corresponding element, declarations in ‘<code 2.632 + class=css>::nth-fragment()</code>’ pseudo-elements override declarations 2.633 + in rules without the pseudo-element. The relative priority within such 2.634 + declarations is determined by normal cascading order (see <a href="#CSS21" 2.635 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). 2.636 + 2.637 + <p> Styles specified on ‘<code class=css>::nth-fragment()</code>’ 2.638 + pseudo-elements do affect inheritance to content within the <a 2.639 + href="#fragment-box"><i>fragment box</i></a>. In other words, the content 2.640 + within the <a href="#fragment-box"><i>fragment box</i></a> must inherit 2.641 + from the fragment box's style (i.e., the pseudo-element style) rather than 2.642 + directly from the element. This means that elements split between fragment 2.643 + boxes may have different styles for different parts of the element. 2.644 + 2.645 + <p class=issue> This inheritance rule allows specifying styles indirectly 2.646 + (by using explicit ‘<code class=css>inherit</code>’ or using default 2.647 + inheritance on properties that don't apply to ‘<code 2.648 + class=css>:first-letter</code>’) that can't be specified directly (based 2.649 + on the rules in the next section). This is a problem. The restrictions 2.650 + that apply to styling inside fragments should also apply to inheritance 2.651 + from fragments. 2.652 + 2.653 + <div class=example> 2.654 + <table class=source-demo-pair> 2.655 + <tbody> 2.656 + <tr> 2.657 + <td> 2.658 + <pre><!DOCTYPE HTML> 2.659 +<style> 2.660 + .article { 2.661 + overflow: fragments; 2.662 + } 2.663 + .article::nth-fragment(1) { 2.664 + font-size: 1.5em; 2.665 + margin-bottom: 1em; 2.666 + height: 4em; 2.667 + } 2.668 + .article::nth-fragment(2) { 2.669 + margin-left: 5em; 2.670 + margin-right: 2em; 2.671 + } 2.672 +</style> 2.673 +<div class="article"> 2.674 + The <code>font-size</code> property<i>...</i> 2.675 +</div></pre> 2.676 + 2.677 + <td> 2.678 + <div class="article-font-inherit-demo one">The <code>font-size</code> 2.679 + property<br> 2.680 + specified on the fragment<br> 2.681 + is inherited into the</div> 2.682 + 2.683 + <div class="article-font-inherit-demo two">descendants of the 2.684 + fragment.<br> 2.685 + This means that inherited<br> 2.686 + properties can be used<br> 2.687 + reliably on a fragment, as in<br> 2.688 + this example.</div> 2.689 + </table> 2.690 + </div> 2.691 + 2.692 + <h4 id=style-in-fragments><span class=secno>4.1.3. </span>Styling inside 2.693 + fragments</h4> 2.694 + 2.695 + <p class=issue> Should this apply to fragment overflow only, or also to 2.696 + paginated overflow, or even to pagination across pages? 2.697 + 2.698 + <p> The ‘<code class=css>::nth-fragment()</code>’ pseudo-element can 2.699 + also be used to style content inside of a <a 2.700 + href="#fragment-box"><i>fragment box</i></a>. Unlike the ‘<code 2.701 + class=css>::first-line</code>’ and ‘<code 2.702 + class=css>::first-letter</code>’ pseudo-elements, the ‘<code 2.703 + class=css>::nth-fragment()</code>’ pseudo-element can be applied to 2.704 + parts of the selector other than the subject: in particular, it can match 2.705 + ancestors of the subject. However, the only CSS properties applied by 2.706 + rules with such selectors are those that apply to the ‘<code 2.707 + class=css>::first-letter</code>’ pseudo-element. 2.708 + 2.709 + <p> To be more precise, when a rule's selector has ‘<code 2.710 + class=css>::nth-fragment()</code>’ pseudo-elements attached to parts of 2.711 + the selector other than the subject, the declarations in that rule apply 2.712 + to a fragment (or pseudo-element thereof) when: 2.713 + 2.714 + <ol> 2.715 + <li> the declarations are for properties that apply to the ‘<code 2.716 + class=css>::first-letter</code>’ pseudo-element, 2.717 + 2.718 + <li> the declarations would apply to that fragment (or pseudo-element 2.719 + thereof) had those ‘<code class=css>::nth-fragment()</code>’ 2.720 + pseudo-elements been removed, with a particular association between each 2.721 + sequence of simple selectors and the element it matched, and 2.722 + 2.723 + <li> for each removed ‘<code class=css>::nth-fragment()</code>’ 2.724 + pseudo-element, the fragment lives within a <a 2.725 + href="#fragment-box"><i>fragment box</i></a> of the element associated in 2.726 + that association with the selector that the pseudo-element was attached 2.727 + to, and whose index matches the pseudo-element. 2.728 + </ol> 2.729 + 2.730 + <div class=example> 2.731 + <table class=source-demo-pair> 2.732 + <tbody> 2.733 + <tr> 2.734 + <td> 2.735 + <pre><!DOCTYPE HTML> 2.736 +<style> 2.737 + .dark-columns { 2.738 + overflow: fragments; 2.739 + width: 6em; 2.740 + height: 10em; 2.741 + float: left; 2.742 + margin-right: 1em; 2.743 + font: medium/1.25 Times New 2.744 + Roman, Times, serif; 2.745 + } 2.746 + .dark-columns::nth-fragment(1) { 2.747 + background: aqua; color: black; 2.748 + } 2.749 + .dark-columns::nth-fragment(1) :link { 2.750 + color: blue; 2.751 + } 2.752 + .dark-columns::nth-fragment(1) :visited { 2.753 + color: purple; 2.754 + } 2.755 + .dark-columns::nth-fragment(2) { 2.756 + background: navy; color: white; 2.757 + } 2.758 + .dark-columns::nth-fragment(2) :link { 2.759 + color: aqua; 2.760 + } 2.761 + .dark-columns::nth-fragment(2) :visited { 2.762 + color: fuchsia; 2.763 + } 2.764 +</style> 2.765 +<div class="dark-columns"> 2.766 + <i>...</i> 2.767 +</div></pre> 2.768 + 2.769 + <td> 2.770 + <div class="dark-columns-demo one">In this<br> 2.771 + <a href="http://en.wiktionary.org/wiki/example">example</a>, the<br> 2.772 + text flows<br> 2.773 + from one<br> 2.774 + light-colored<br> 2.775 + fragment into<br> 2.776 + another<br> 2.777 + dark-colored</div> 2.778 + 2.779 + <div class="dark-columns-demo two">fragment. We<br> 2.780 + therefore want<br> 2.781 + different styles<br> 2.782 + for <a 2.783 + href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br> 2.784 + in the different<br> 2.785 + fragments.</div> 2.786 + </table> 2.787 + </div> 2.788 + 2.789 + <h3 id=max-lines><span class=secno>4.2. </span>The ‘<a 2.790 + href="#max-lines0"><code class=property>max-lines</code></a>’ property</h3> 2.791 + 2.792 + <p> Authors may wish to style the opening lines of an element with 2.793 + different styles by putting those opening lines in a separate fragment. 2.794 + However, since it may be difficult to predict the exact height occupied by 2.795 + those lines in order to restrict the first fragment to that height, this 2.796 + specification introduces a ‘<a href="#max-lines0"><code 2.797 + class=property>max-lines</code></a>’ property that forces a fragment to 2.798 + break after a specified number of lines. This forces a break after the 2.799 + given number of lines contained within the element or its descendants, as 2.800 + long as those lines are in the same block formatting context. 2.801 + 2.802 + <table class=propdef> 2.803 + <tbody> 2.804 + <tr> 2.805 + <th>Name: 2.806 + 2.807 + <td><dfn id=max-lines0>max-lines</dfn> 2.808 + 2.809 + <tr> 2.810 + <th><a href="#values">Value</a>: 2.811 + 2.812 + <td>none | <integer> 2.813 + 2.814 + <tr> 2.815 + <th>Initial: 2.816 + 2.817 + <td>none 2.818 + 2.819 + <tr> 2.820 + <th>Applies to: 2.821 + 2.822 + <td>fragment boxes 2.823 + 2.824 + <tr> 2.825 + <th>Inherited: 2.826 + 2.827 + <td>no 2.828 + 2.829 + <tr> 2.830 + <th>Animatable: 2.831 + 2.832 + <td>as <a 2.833 + href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a> 2.834 + 2.835 + 2.836 + <tr> 2.837 + <th>Percentages: 2.838 + 2.839 + <td>N/A 2.840 + 2.841 + <tr> 2.842 + <th>Media: 2.843 + 2.844 + <td>visual 2.845 + 2.846 + <tr> 2.847 + <th>Computed value: 2.848 + 2.849 + <td>specified value 2.850 + 2.851 + <tr> 2.852 + <th>Canonical order: 2.853 + 2.854 + <td><abbr title="follows order of property value definition">per 2.855 + grammar</abbr> 2.856 + </table> 2.857 + 2.858 + <dl> 2.859 + <dt>none 2.860 + 2.861 + <dd> 2.862 + <p> Breaks occur only as specified elsewhere.</p> 2.863 + 2.864 + <dt><integer> 2.865 + 2.866 + <dd> 2.867 + <p> In addition to any breaks specified elsewhere, a break is forced 2.868 + before any line that would exceed the given number of lines being placed 2.869 + inside the element (excluding lines that are in a different block 2.870 + formatting context from the block formatting context to which an 2.871 + unstyled child of the element would belong).</p> 2.872 + 2.873 + <p class=issue> If there are multiple boundaries between this line and 2.874 + the previous, where exactly (in terms of element boundaries) is the 2.875 + break forced?</p> 2.876 + 2.877 + <p> Only positive integers are accepted. Zero or negative integers are a 2.878 + parse error.</p> 2.879 + </dl> 2.880 + 2.881 + <p class=issue>Should this apply to fragment overflow only, or also to 2.882 + pagination? 2.883 + 2.884 + <div class=example> 2.885 + <table class=source-demo-pair> 2.886 + <tbody> 2.887 + <tr> 2.888 + <td> 2.889 + <pre><!DOCTYPE HTML> 2.890 +<style> 2.891 + .article { 2.892 + overflow: fragments; 2.893 + } 2.894 + .article::first-letter { 2.895 + font-size: 2em; 2.896 + line-height: 0.9; 2.897 + } 2.898 + .article::nth-fragment(1) { 2.899 + font-size: 1.5em; 2.900 + max-lines: 3; 2.901 + } 2.902 + .article::nth-fragment(2) { 2.903 + column-count: 2; 2.904 + } 2.905 +</style> 2.906 +<div class="article"> 2.907 + <i>...</i> 2.908 +</div></pre> 2.909 + 2.910 + <td> 2.911 + <div class="article-max-lines-demo one">The max-lines property 2.912 + allows<br> 2.913 + authors to use a larger font for the first<br> 2.914 + few lines of an article. Without the</div> 2.915 + 2.916 + <div class="article-max-lines-demo two">max-lines property, 2.917 + authors<br> 2.918 + might have to use the<br> 2.919 + ‘<code class=property>height</code>’ property instead, but<br> 2.920 + that would leave a slight gap<br> 2.921 + if the author miscalculated<br> 2.922 + how much height a given<br> 2.923 + number of lines would<br> 2.924 + occupy (which might be</div> 2.925 + 2.926 + <div class="article-max-lines-demo three">particularly hard if the 2.927 + author<br> 2.928 + didn't know what text would<br> 2.929 + be filling the space, exactly<br> 2.930 + what font would be used, or<br> 2.931 + exactly which platform's font<br> 2.932 + rendering would be used to<br> 2.933 + display the font).</div> 2.934 + </table> 2.935 + </div> 2.936 + 2.937 + <h2 id=static-media><span class=secno>5. </span>Overflow in static media</h2> 2.938 + 2.939 + <p class=issue> This specification should define useful behavior for all 2.940 + values of ‘<code class=property>overflow</code>’ in static media (such 2.941 + as print). Current implementation behavior is quite poor and produces 2.942 + unexpected results when authors have not considered what will happen when 2.943 + the content they produce for interactive media is printed. 2.944 + 2.945 + <h2 id=conformance><span class=secno>6. </span> Conformance</h2> 2.946 + 2.947 + <h3 id=placement><span class=secno>6.1. </span> Module interactions</h3> 2.948 + 2.949 + <p>This module extends the ‘<code class=property>overflow</code>’ 2.950 + feature defined in <a href="#CSS21" 2.951 + rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> section 11.1.1. It defines 2.952 + additional overflow handling mechanisms that implementations must 2.953 + implement as described in this module in order to conform to this module. 2.954 + 2.955 + <p>No properties in this module apply to the <code>::first-line</code> or 2.956 + <code>::first-letter</code> pseudo-elements. 2.957 + 2.958 + <h3 id=values><span class=secno>6.2. </span> Values</h3> 2.959 + 2.960 + <p>This specification follows the <a 2.961 + href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 2.962 + definition conventions</a> from <a href="#CSS21" 2.963 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 2.964 + this specification are defined in CSS Level 2 Revision 1 <a 2.965 + href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS 2.966 + modules may expand the definitions of these value types: for example <a 2.967 + href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, 2.968 + when combined with this module, expands the definition of the 2.969 + <color> value type as used in this specification. 2.970 + 2.971 + <p>In addition to the property-specific values listed in their definitions, 2.972 + all properties defined in this specification also accept the <a 2.973 + href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 2.974 + keyword as their property value. For readability it has not been repeated 2.975 + explicitly. 2.976 + 2.977 + <h3 id=conventions><span class=secno>6.3. </span> Document conventions</h3> 2.978 + 2.979 + <p>Conformance requirements are expressed with a combination of descriptive 2.980 + assertions and RFC 2119 terminology. The key words “MUST”, “MUST 2.981 + NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 2.982 + “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 2.983 + normative parts of this document are to be interpreted as described in RFC 2.984 + 2119. However, for readability, these words do not appear in all uppercase 2.985 + letters in this specification. 2.986 + 2.987 + <p>All of the text of this specification is normative except sections 2.988 + explicitly marked as non-normative, examples, and notes. <a 2.989 + href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 2.990 + 2.991 + <p>Examples in this specification are introduced with the words “for 2.992 + example” or are set apart from the normative text with 2.993 + <code>class="example"</code>, like this: 2.994 + 2.995 + <div class=example> 2.996 + <p>This is an example of an informative example.</p> 2.997 + </div> 2.998 + 2.999 + <p>Informative notes begin with the word “Note” and are set apart from 2.1000 + the normative text with <code>class="note"</code>, like this: 2.1001 + 2.1002 + <p class=note>Note, this is an informative note. 2.1003 + 2.1004 + <h3 id=conformance-classes><span class=secno>6.4. </span> Conformance 2.1005 + classes</h3> 2.1006 + 2.1007 + <p>Conformance to CSS Overflow Module Level 3 is defined for three 2.1008 + conformance classes: 2.1009 + 2.1010 + <dl> 2.1011 + <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 2.1012 + sheet</dfn> 2.1013 + 2.1014 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 2.1015 + style sheet</a>. 2.1016 + 2.1017 + <dt><dfn id=renderer>renderer</dfn> 2.1018 + 2.1019 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.1020 + that interprets the semantics of a style sheet and renders documents that 2.1021 + use them. 2.1022 + 2.1023 + <dt><dfn id=authoring-tool>authoring tool</dfn> 2.1024 + 2.1025 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.1026 + that writes a style sheet. 2.1027 + </dl> 2.1028 + 2.1029 + <p>A style sheet is conformant to CSS Overflow Module Level 3 if all of its 2.1030 + statements that use syntax defined in this module are valid according to 2.1031 + the generic CSS grammar and the individual grammars of each feature 2.1032 + defined in this module. 2.1033 + 2.1034 + <p>A renderer is conformant to CSS Overflow Module Level 3 if, in addition 2.1035 + to interpreting the style sheet as defined by the appropriate 2.1036 + specifications, it supports all the features defined by CSS Overflow 2.1037 + Module Level 3 by parsing them correctly and rendering the document 2.1038 + accordingly. However, the inability of a UA to correctly render a document 2.1039 + due to limitations of the device does not make the UA non-conformant. (For 2.1040 + example, a UA is not required to render color on a monochrome monitor.) 2.1041 + 2.1042 + <p>An authoring tool is conformant to CSS Overflow Module Level 3 if it 2.1043 + writes style sheets that are syntactically correct according to the 2.1044 + generic CSS grammar and the individual grammars of each feature in this 2.1045 + module, and meet all other conformance requirements of style sheets as 2.1046 + described in this module. 2.1047 + 2.1048 + <h3 id=partial><span class=secno>6.5. </span> Partial implementations</h3> 2.1049 + 2.1050 + <p>So that authors can exploit the forward-compatible parsing rules to 2.1051 + assign fallback values, CSS renderers <strong>must</strong> treat as 2.1052 + invalid (and <a 2.1053 + href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 2.1054 + appropriate</a>) any at-rules, properties, property values, keywords, and 2.1055 + other syntactic constructs for which they have no usable level of support. 2.1056 + In particular, user agents <strong>must not</strong> selectively ignore 2.1057 + unsupported component values and honor supported values in a single 2.1058 + multi-value property declaration: if any value is considered invalid (as 2.1059 + unsupported values must be), CSS requires that the entire declaration be 2.1060 + ignored. 2.1061 + 2.1062 + <h3 id=experimental><span class=secno>6.6. </span> Experimental 2.1063 + implementations</h3> 2.1064 + 2.1065 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 2.1066 + reserves a <a 2.1067 + href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 2.1068 + syntax</a> for proprietary and experimental extensions to CSS. 2.1069 + 2.1070 + <p>Prior to a specification reaching the Candidate Recommendation stage in 2.1071 + the W3C process, all implementations of a CSS feature are considered 2.1072 + experimental. The CSS Working Group recommends that implementations use a 2.1073 + vendor-prefixed syntax for such features, including those in W3C Working 2.1074 + Drafts. This avoids incompatibilities with future changes in the draft. 2.1075 + 2.1076 + <h3 id=testing><span class=secno>6.7. </span> Non-experimental 2.1077 + implementations</h3> 2.1078 + 2.1079 + <p>Once a specification reaches the Candidate Recommendation stage, 2.1080 + non-experimental implementations are possible, and implementors should 2.1081 + release an unprefixed implementation of any CR-level feature they can 2.1082 + demonstrate to be correctly implemented according to spec. 2.1083 + 2.1084 + <p>To establish and maintain the interoperability of CSS across 2.1085 + implementations, the CSS Working Group requests that non-experimental CSS 2.1086 + renderers submit an implementation report (and, if necessary, the 2.1087 + testcases used for that implementation report) to the W3C before releasing 2.1088 + an unprefixed implementation of any CSS features. Testcases submitted to 2.1089 + W3C are subject to review and correction by the CSS Working Group. 2.1090 + 2.1091 + <p>Further information on submitting testcases and implementation reports 2.1092 + can be found from on the CSS Working Group's website at <a 2.1093 + href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 2.1094 + Questions should be directed to the <a 2.1095 + href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 2.1096 + mailing list. 2.1097 + 2.1098 + <h3 id=cr-exit-criteria><span class=secno>6.8. </span> CR exit criteria</h3> 2.1099 + 2.1100 + <p class=issue>[Change or remove the following CR exit criteria if the spec 2.1101 + is not a module, but, e.g., a Note or a profile. This text was <a 2.1102 + href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2.1103 + 2008-06-04.</a>] 2.1104 + 2.1105 + <p> For this specification to be advanced to Proposed Recommendation, there 2.1106 + must be at least two independent, interoperable implementations of each 2.1107 + feature. Each feature may be implemented by a different set of products, 2.1108 + there is no requirement that all features be implemented by a single 2.1109 + product. For the purposes of this criterion, we define the following 2.1110 + terms: 2.1111 + 2.1112 + <dl> 2.1113 + <dt>independent 2.1114 + 2.1115 + <dd>each implementation must be developed by a different party and cannot 2.1116 + share, reuse, or derive from code used by another qualifying 2.1117 + implementation. Sections of code that have no bearing on the 2.1118 + implementation of this specification are exempt from this requirement. 2.1119 + 2.1120 + <dt>interoperable 2.1121 + 2.1122 + <dd>passing the respective test case(s) in the official CSS test suite, 2.1123 + or, if the implementation is not a Web browser, an equivalent test. Every 2.1124 + relevant test in the test suite should have an equivalent test created if 2.1125 + such a user agent (UA) is to be used to claim interoperability. In 2.1126 + addition if such a UA is to be used to claim interoperability, then there 2.1127 + must one or more additional UAs which can also pass those equivalent 2.1128 + tests in the same way for the purpose of interoperability. The equivalent 2.1129 + tests must be made publicly available for the purposes of peer review. 2.1130 + 2.1131 + <dt>implementation 2.1132 + 2.1133 + <dd>a user agent which: 2.1134 + <ol class=inline> 2.1135 + <li>implements the specification. 2.1136 + 2.1137 + <li>is available to the general public. The implementation may be a 2.1138 + shipping product or other publicly available version (i.e., beta 2.1139 + version, preview release, or “nightly build”). Non-shipping product 2.1140 + releases must have implemented the feature(s) for a period of at least 2.1141 + one month in order to demonstrate stability. 2.1142 + 2.1143 + <li>is not experimental (i.e., a version specifically designed to pass 2.1144 + the test suite and is not intended for normal usage going forward). 2.1145 + </ol> 2.1146 + </dl> 2.1147 + 2.1148 + <p>The specification will remain Candidate Recommendation for at least six 2.1149 + months. 2.1150 + 2.1151 + <h2 class=no-num id=acknowledgments> Acknowledgments</h2> 2.1152 + 2.1153 + <p> Thanks especially to the feedback from Rossen Atanassov, Bert Bos, 2.1154 + Tantek Çelik, John Daggett, fantasai, Daniel Glazman, Vincent Hardy, 2.1155 + Håkon Wium Lie, Peter Linss, Florian Rivoal, Alan Stearns, Steve Zilles, 2.1156 + and all the rest of the <a 2.1157 + href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> 2.1158 + community. 2.1159 + 2.1160 + <h2 class=no-num id=references> References</h2> 2.1161 + 2.1162 + <h3 class=no-num id=normative-references> Normative references</h3> 2.1163 + <!--begin-normative--> 2.1164 + <!-- Sorted by label --> 2.1165 + 2.1166 + <dl class=bibliography> 2.1167 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 2.1168 + <!----> 2.1169 + 2.1170 + <dt id=CSS21>[CSS21] 2.1171 + 2.1172 + <dd>Bert Bos; et al. <a 2.1173 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 2.1174 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 2.1175 + 2011. W3C Recommendation. URL: <a 2.1176 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 2.1177 + </dd> 2.1178 + <!----> 2.1179 + 2.1180 + <dt id=CSS3-BREAK>[CSS3-BREAK] 2.1181 + 2.1182 + <dd>Rossen Atanassov; Elika J. Etemad. <a 2.1183 + href="http://www.w3.org/TR/2012/WD-css3-break-20120228/"><cite>CSS 2.1184 + Fragmentation Module Level 3.</cite></a> 28 February 2012. W3C Working 2.1185 + Draft. (Work in progress.) URL: <a 2.1186 + href="http://www.w3.org/TR/2012/WD-css3-break-20120228/">http://www.w3.org/TR/2012/WD-css3-break-20120228/</a> 2.1187 + </dd> 2.1188 + <!----> 2.1189 + 2.1190 + <dt id=CSS3COL>[CSS3COL] 2.1191 + 2.1192 + <dd>Håkon Wium Lie. <a 2.1193 + href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS 2.1194 + Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate 2.1195 + Recommendation. (Work in progress.) URL: <a 2.1196 + href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a> 2.1197 + </dd> 2.1198 + <!----> 2.1199 + 2.1200 + <dt id=RFC2119>[RFC2119] 2.1201 + 2.1202 + <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 2.1203 + words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 2.1204 + RFC 2119. URL: <a 2.1205 + href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 2.1206 + </dd> 2.1207 + <!----> 2.1208 + 2.1209 + <dt id=SELECT>[SELECT] 2.1210 + 2.1211 + <dd>Tantek Çelik; et al. <a 2.1212 + href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors 2.1213 + Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a 2.1214 + href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a> 2.1215 + </dd> 2.1216 + <!----> 2.1217 + </dl> 2.1218 + <!--end-normative--> 2.1219 + 2.1220 + <h3 class=no-num id=other-references> Other references</h3> 2.1221 + <!--begin-informative--> 2.1222 + <!-- Sorted by label --> 2.1223 + 2.1224 + <dl class=bibliography> 2.1225 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 2.1226 + <!----> 2.1227 + 2.1228 + <dt id=CSS1>[CSS1] 2.1229 + 2.1230 + <dd>Håkon Wium Lie; Bert Bos. <a 2.1231 + href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style 2.1232 + Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C 2.1233 + Recommendation. URL: <a 2.1234 + href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a> 2.1235 + </dd> 2.1236 + <!----> 2.1237 + 2.1238 + <dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT] 2.1239 + 2.1240 + <dd>Alex Mogilevsky; et al. <a 2.1241 + href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/"><cite>CSS 2.1242 + Grid Layout.</cite></a> 22 March 2012. W3C Working Draft. (Work in 2.1243 + progress.) URL: <a 2.1244 + href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/</a> 2.1245 + </dd> 2.1246 + <!----> 2.1247 + 2.1248 + <dt id=CSS3-MARQUEE>[CSS3-MARQUEE] 2.1249 + 2.1250 + <dd>Bert Bos. <a 2.1251 + href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205"><cite>CSS 2.1252 + Marquee Module Level 3.</cite></a> 5 December 2008. W3C Candidate 2.1253 + Recommendation. (Work in progress.) URL: <a 2.1254 + href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205">http://www.w3.org/TR/2008/CR-css3-marquee-20081205</a> 2.1255 + </dd> 2.1256 + <!----> 2.1257 + 2.1258 + <dt id=CSS3-REGIONS>[CSS3-REGIONS] 2.1259 + 2.1260 + <dd>Vincent Hardy; Alex Mogilevsky; Alan Stearns. <a 2.1261 + href="http://www.w3.org/TR/2012/WD-css3-regions-20120503/"><cite>CSS 2.1262 + Regions Module Level 3.</cite></a> 3 May 2012. W3C Working Draft. (Work 2.1263 + in progress.) URL: <a 2.1264 + href="http://www.w3.org/TR/2012/WD-css3-regions-20120503/">http://www.w3.org/TR/2012/WD-css3-regions-20120503/</a> 2.1265 + </dd> 2.1266 + <!----> 2.1267 + 2.1268 + <dt id=CSS3BOX>[CSS3BOX] 2.1269 + 2.1270 + <dd>Bert Bos. <a 2.1271 + href="http://www.w3.org/TR/2007/WD-css3-box-20070809"><cite>CSS basic box 2.1272 + model.</cite></a> 9 August 2007. W3C Working Draft. (Work in progress.) 2.1273 + URL: <a 2.1274 + href="http://www.w3.org/TR/2007/WD-css3-box-20070809">http://www.w3.org/TR/2007/WD-css3-box-20070809</a> 2.1275 + </dd> 2.1276 + <!----> 2.1277 + 2.1278 + <dt id=CSS3COLOR>[CSS3COLOR] 2.1279 + 2.1280 + <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a 2.1281 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color 2.1282 + Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a 2.1283 + href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> 2.1284 + </dd> 2.1285 + <!----> 2.1286 + 2.1287 + <dt id=CSS3GCPM>[CSS3GCPM] 2.1288 + 2.1289 + <dd>Håkon Wium Lie. <a 2.1290 + href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608"><cite>CSS 2.1291 + Generated Content for Paged Media Module.</cite></a> 8 June 2010. W3C 2.1292 + Working Draft. (Work in progress.) URL: <a 2.1293 + href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">http://www.w3.org/TR/2010/WD-css3-gcpm-20100608</a> 2.1294 + </dd> 2.1295 + <!----> 2.1296 + </dl> 2.1297 + <!--end-informative--> 2.1298 + 2.1299 + <h2 class=no-num id=index> Index</h2> 2.1300 + <!--begin-index--> 2.1301 + 2.1302 + <ul class=indexlist> 2.1303 + <li>authoring tool, <a href="#authoring-tool" 2.1304 + title="authoring tool"><strong>6.4.</strong></a> 2.1305 + 2.1306 + <li>fragment box, <a href="#fragment-box" 2.1307 + title="fragment box"><strong>4.</strong></a> 2.1308 + 2.1309 + <li>max-lines, <a href="#max-lines0" 2.1310 + title=max-lines><strong>4.2.</strong></a> 2.1311 + 2.1312 + <li>renderer, <a href="#renderer" title=renderer><strong>6.4.</strong></a> 2.1313 + 2.1314 + 2.1315 + <li>style sheet 2.1316 + <ul> 2.1317 + <li>as conformance class, <a href="#style-sheet" 2.1318 + title="style sheet, as conformance class"><strong>6.4.</strong></a> 2.1319 + </ul> 2.1320 + </ul> 2.1321 + <!--end-index--> 2.1322 + 2.1323 + <h2 class=no-num id=property-index> Property index</h2> 2.1324 + <!--begin-properties--> 2.1325 + 2.1326 + <table class=proptable> 2.1327 + <thead> 2.1328 + <tr> 2.1329 + <th>Property 2.1330 + 2.1331 + <th>Values 2.1332 + 2.1333 + <th>Initial 2.1334 + 2.1335 + <th>Applies to 2.1336 + 2.1337 + <th>Inh. 2.1338 + 2.1339 + <th>Percentages 2.1340 + 2.1341 + <th>Media 2.1342 + 2.1343 + <tbody> 2.1344 + <tr> 2.1345 + <th><a class=property href="#max-lines0">max-lines</a> 2.1346 + 2.1347 + <td>none | <integer> 2.1348 + 2.1349 + <td>none 2.1350 + 2.1351 + <td>fragment boxes 2.1352 + 2.1353 + <td>no 2.1354 + 2.1355 + <td>N/A 2.1356 + 2.1357 + <td>visual 2.1358 + </table> 2.1359 + <!--end-properties--> 2.1360 +</html> 2.1361 +<!-- Keep this comment at the end of the file 2.1362 +Local variables: 2.1363 +mode: sgml 2.1364 +sgml-declaration:"~/SGML/HTML4.decl" 2.1365 +sgml-default-doctype-name:"html" 2.1366 +sgml-minimize-attributes:t 2.1367 +sgml-nofill-elements:("pre" "style" "br") 2.1368 +sgml-live-element-indicator:t 2.1369 +sgml-omittag:nil 2.1370 +sgml-shorttag:nil 2.1371 +sgml-namecase-general:t 2.1372 +sgml-general-insert-case:lower 2.1373 +sgml-always-quote-attributes:t 2.1374 +sgml-indent-step:nil 2.1375 +sgml-indent-data:t 2.1376 +sgml-parent-document:nil 2.1377 +sgml-exposed-tags:nil 2.1378 +sgml-local-catalogs:nil 2.1379 +sgml-local-ecat-files:nil 2.1380 +End: 2.1381 +-->
3.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 3.2 +++ b/css3-overflow/Overview.src.html Fri Aug 17 23:51:31 2012 +0200 3.3 @@ -0,0 +1,1045 @@ 3.4 +<!DOCTYPE html> 3.5 +<html lang="en"> 3.6 +<head> 3.7 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 3.8 + <title>CSS Overflow Module Level 3</title> 3.9 + <link rel=contents href="#contents"> 3.10 + <link rel=index href="#index"> 3.11 + <link rel="stylesheet" type="text/css" href="../default.css"> 3.12 + <link rel="stylesheet" type="text/css" 3.13 + href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 3.14 + <style> 3.15 + table.source-demo-pair { 3.16 + width: 100%; 3.17 + } 3.18 + 3.19 + .in-cards-demo { 3.20 + width: 13em; 3.21 + height: 8em; 3.22 + 3.23 + padding: 4px; 3.24 + border: medium solid blue; 3.25 + margin: 6px; 3.26 + 3.27 + font: medium/1.3 Times New Roman, Times, serif; 3.28 + white-space: nowrap; 3.29 + } 3.30 + 3.31 + .bouncy-columns-demo { 3.32 + width: 6em; 3.33 + height: 10em; 3.34 + float: left; 3.35 + margin: 1em; 3.36 + font: medium/1.25 Times New Roman, Times, serif; 3.37 + white-space: nowrap; 3.38 + } 3.39 + .bouncy-columns-demo.one { 3.40 + background: aqua; color: black; 3.41 + transform: rotate(-3deg); 3.42 + } 3.43 + .bouncy-columns-demo.two { 3.44 + background: yellow; color: black; 3.45 + transform: rotate(3deg); 3.46 + } 3.47 + 3.48 + .article-font-inherit-demo { 3.49 + font: 1em/1.25 Times New Roman, Times, serif; 3.50 + white-space: nowrap; 3.51 + } 3.52 + .article-font-inherit-demo.one { 3.53 + width: 12em; 3.54 + font-size: 1.5em; 3.55 + margin-bottom: 1em; 3.56 + height: 4em; 3.57 + } 3.58 + .article-font-inherit-demo.two { 3.59 + width: 11em; 3.60 + margin-left: 5em; 3.61 + margin-right: 2em; 3.62 + } 3.63 + 3.64 + .dark-columns-demo { 3.65 + width: 6em; 3.66 + height: 10em; 3.67 + float: left; 3.68 + margin-right: 1em; 3.69 + font: medium/1.25 Times New Roman, Times, serif; 3.70 + white-space: nowrap; 3.71 + } 3.72 + .dark-columns-demo.one { 3.73 + background: aqua; color: black; 3.74 + } 3.75 + .dark-columns-demo.one :link { 3.76 + color: blue; 3.77 + } 3.78 + .dark-columns-demo.one :visited { 3.79 + color: purple; 3.80 + } 3.81 + .dark-columns-demo.two { 3.82 + background: navy; color: white; 3.83 + } 3.84 + .dark-columns-demo.two :link { 3.85 + color: aqua; 3.86 + } 3.87 + .dark-columns-demo.two :visited { 3.88 + color: fuchsia; 3.89 + } 3.90 + 3.91 + .article-max-lines-demo { 3.92 + font: 1em/1.25 Times New Roman, Times, serif; 3.93 + white-space: nowrap; 3.94 + } 3.95 + .article-max-lines-demo.one::first-letter { 3.96 + font-size: 2em; 3.97 + line-height: 0.9; 3.98 + } 3.99 + .article-max-lines-demo.one { 3.100 + font-size: 1.5em; 3.101 + width: 16em; 3.102 + } 3.103 + .article-max-lines-demo.two { 3.104 + width: 11.5em; 3.105 + float: left; margin-right: 1em; 3.106 + } 3.107 + .article-max-lines-demo.three { 3.108 + width: 11.5em; 3.109 + float: left; 3.110 + } 3.111 + </style> 3.112 +</head> 3.113 + 3.114 +<div class="head"> 3.115 +<!--logo--> 3.116 + 3.117 +<h1>CSS Overflow Module Level 3</h1> 3.118 + 3.119 +<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 3.120 +<dl> 3.121 + <dt>This version: 3.122 + <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/ED-css3-overflow-[CDATE]/</a> 3.123 + 3.124 + <dt>Latest version: 3.125 + <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a> 3.126 + 3.127 + <dt>Editor's draft: 3.128 + <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> 3.129 + 3.130 +<!-- 3.131 + <dt>Previous version: 3.132 + <dd><a href="http://www.w3.org/PreviousVersionURI"> 3.133 + http://www.w3.org/PreviousVersionURI</a> 3.134 +--> 3.135 + 3.136 + <dt>Issue Tracking:</dt> 3.137 + <dd>Maintained in document (only editor's draft is current) 3.138 + 3.139 + <dt>Feedback:</dt> 3.140 + <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>” 3.141 + 3.142 + <dt>Editors: 3.143 + <dd class="h-card vcard"> 3.144 + <a class="p-name fn u-url url" rel="author" 3.145 + href="http://dbaron.org/">L. David Baron</a>, 3.146 + <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a> 3.147 +</dl> 3.148 + 3.149 +<!--copyright--> 3.150 + 3.151 +<hr title="Separator for header"> 3.152 +</div> 3.153 + 3.154 +<h2 class="no-num no-toc" id="abstract">Abstract</h2> 3.155 + 3.156 + <p> 3.157 + <a href="http://www.w3.org/TR/CSS/">CSS</a> is 3.158 + a language for describing 3.159 + the rendering of structured documents (such as HTML and XML) 3.160 + on screen, on paper, in speech, etc. 3.161 + This module contains the features of CSS 3.162 + relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). 3.163 + In interactive media, 3.164 + it describes features that allow the overflow 3.165 + from a fixed size container 3.166 + to be handled by pagination (displaying one page at a time). 3.167 + It also describes features, applying to all visual media, 3.168 + that allow the contents of an element 3.169 + to be spread across multiple fragments, 3.170 + allowing the contents to flow across multiple regions 3.171 + or to have different styles for different fragments. 3.172 + </p> 3.173 + 3.174 +<h2 class="no-num no-toc" id="status">Status of this document</h2> 3.175 + 3.176 +<!--status--> 3.177 + 3.178 +<p>The following features are at risk: … 3.179 + 3.180 +<h2 class="no-num no-toc" id="contents"> 3.181 +Table of contents</h2> 3.182 + 3.183 +<!--toc--> 3.184 + 3.185 +<h2 id="intro"> 3.186 +Introduction</h2> 3.187 + 3.188 + <p> 3.189 + In CSS Level 1 [[CSS1]], placing more content than would fit 3.190 + inside an element with a specified size 3.191 + was generally an authoring error. 3.192 + Doing so caused the content to extend 3.193 + outside the bounds of the element, 3.194 + which would likely cause 3.195 + that content to overlap with other elements. 3.196 + </p> 3.197 + 3.198 + <p> 3.199 + CSS Level 2 [[CSS21]] introduced the 'overflow' property, 3.200 + which allows authors to have overflow be handled by scrolling, 3.201 + which means it is no longer an authoring error. 3.202 + It also allows authors to specify 3.203 + that overflow is handled by clipping, 3.204 + which makes sense when the author's intent 3.205 + is that the content not be shown. 3.206 + </p> 3.207 + 3.208 + <p> 3.209 + However, scrolling is not the only way 3.210 + to present large amounts of content, 3.211 + and may even not be the optimal way. 3.212 + After all, the codex replaced the scroll 3.213 + as the common format for large written works 3.214 + because of its advantages. 3.215 + </p> 3.216 + 3.217 + <p> 3.218 + This specification introduces 3.219 + a mechanism for Web pages to specify 3.220 + that an element of a page should handle overflow 3.221 + through pagination rather than through scrolling. 3.222 + </p> 3.223 + 3.224 + <p> 3.225 + This specification also extends the concept of overflow 3.226 + in another direction. 3.227 + Instead of requiring that authors specify a single area 3.228 + into which the content of an element must flow, 3.229 + this specification allows authors to specify multiple fragments, 3.230 + each with their own dimensions and styles, 3.231 + so that the content of the element can flow from one to the next, 3.232 + using as many as needed to place the content without overflowing. 3.233 + </p> 3.234 + 3.235 + <p> 3.236 + In both of these cases, implementations must 3.237 + break the content in the block-progression dimension. 3.238 + Implementations must do this is described 3.239 + in the CSS Fragmentation Module [[!CSS3-BREAK]]. 3.240 + </p> 3.241 + 3.242 +<h2 id="scrolling-overflow">Scrolling and hidden overflow</h2> 3.243 + 3.244 + <p class="issue"> 3.245 + Move material from [[CSS21]] and [[CSS3BOX]] here. 3.246 + </p> 3.247 + 3.248 +<h2 id="paginated-overflow">Paginated overflow</h2> 3.249 + 3.250 +<p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as [[CSS3GCPM]] has?)</p> 3.251 + 3.252 +<p class="issue">Ability to display N pages at once 3.253 +rather than just one page at once?</p> 3.254 + 3.255 + <p class="issue"> 3.256 + The current implementation of paginated overflow uses 3.257 + the 'overflow'/'overflow-x'/'overflow-y' properties 3.258 + rather than the 'overflow-style' property as proposed 3.259 + in the [[CSS3GCPM]] draft 3.260 + (which also matches the [[CSS3-MARQUEE]] proposal). 3.261 + We should probably switch away from 'overflow-style', 3.262 + but that's not 100% clear. 3.263 + </p> 3.264 + 3.265 +<h2 id="fragment-overflow">Fragment overflow</h2> 3.266 + 3.267 + <p> 3.268 + This section introduces and defines the meaning of 3.269 + the new ''fragments'' value of the 'overflow' property. 3.270 + </p> 3.271 + 3.272 + <p> 3.273 + When the computed value of 'overflow' for an element is ''fragments'', 3.274 + and implementations would otherwise have created a box for the element, 3.275 + then implementations must create a sequence of <dfn>fragment box</dfn>es 3.276 + for that element. 3.277 + (It is possible for an element with ''overflow: fragments'' 3.278 + to generate only one <i>fragment box</i>. 3.279 + However, if an element's computed 'overflow' is not ''fragments'', 3.280 + then its box is not a <i>fragment box</i>.) 3.281 + Every <i>fragment box</i> is a fragmentation container, 3.282 + and any overflow 3.283 + that would cause that fragmentation container to fragment 3.284 + causes another <i>fragment box</i> created as a next sibling 3.285 + of the previous one. 3.286 + <span class="issue">Or is it as though it's a next sibling of 3.287 + the element? Need to figure out exactly how this interacts with 3.288 + other box-level fixup.</span> 3.289 + Additionally, if the <i>fragment box</i> is also 3.290 + a multi-column box (as defined in [[!CSS3COL]] 3.291 + <span class="issue">though it defines <i>multi-column element</i></span>) 3.292 + any content that would lead to the creation of <i>overflow columns</i> [[!CSS3COL]] 3.293 + instead is flown into an additional fragment box. 3.294 + However, fragment boxes may themselves be broken 3.295 + (due to fragmentation in a fragmentation context outside of them, 3.296 + such as pages, columns, or other fragment boxes); 3.297 + such breaking leads to fragments of the same fragment box 3.298 + rather than multiple fragment boxes. 3.299 + (This matters because fragment boxes may be styled by their index; 3.300 + such breaking leads to multiple fragments of a fragment box 3.301 + with a single index. 3.302 + This design choice is so that 3.303 + breaking a fragment box across pages does not break 3.304 + the association of indices to particular pieces of content.) 3.305 + <span class="issue">Should a forced break that breaks to 3.306 + an outer fragmentation context cause a new fragment of a single 3.307 + fragment box or a new fragment box?</span> 3.308 + <span class="issue">Should we find a term other than 3.309 + <i>fragment box</i> here to make this a little less confusing?</span> 3.310 + </p> 3.311 + 3.312 + <p class="issue"> 3.313 + What if we want to be able to style the pieces of an element 3.314 + split within another type of fragmentation context? 3.315 + These rules prevent ever using ''::nth-fragment()'' for that, 3.316 + despite that the name seems the most logical name for such a feature. 3.317 + </p> 3.318 + 3.319 + <div class="example"> 3.320 + <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 3.321 +<title>Breaking content into 3.322 + equal-sized cards</title> 3.323 +<style> 3.324 + .in-cards { 3.325 + overflow: fragments; 3.326 + 3.327 + width: 13em; 3.328 + height: 8em; 3.329 + 3.330 + padding: 4px; 3.331 + border: medium solid blue; 3.332 + margin: 6px; 3.333 + 3.334 + font: medium/1.3 Times New 3.335 + Roman, Times, serif; 3.336 + } 3.337 +</style> 3.338 +<div class="in-cards"> 3.339 + In this example, the text in the div 3.340 + is broken into a series of cards. 3.341 + These cards all have the same style. 3.342 + The presence of enough content to 3.343 + overflow one of the cards causes 3.344 + another one to be created. The second 3.345 + card is created just like it's the 3.346 + next sibling of the first. 3.347 +</div></pre></td><td> 3.348 + <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> 3.349 + <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> 3.350 + </td></tr></table> 3.351 + </div> 3.352 + 3.353 + <p class="issue"> 3.354 + We should specify that ''overflow: fragments'' does not apply 3.355 + to at least some table parts, 3.356 + and perhaps other elements as well. 3.357 + We need to determine exactly which ones. 3.358 + </p> 3.359 + 3.360 + <p class="issue"> 3.361 + This specification needs to say which type of 3.362 + fragmentation context is created 3.363 + so that it's clear which values of the 'break' property 3.364 + cause breaks within this context. 3.365 + We probably want ''break: regions'' to apply. 3.366 + </p> 3.367 + 3.368 + <p class="issue"> 3.369 + This specification needs a processing model 3.370 + that will apply in cases where the layout containing the 3.371 + fragments has characteristics that use the intrinsic size of the fragments 3.372 + to change the amount of space available for them, 3.373 + such as [[CSS3-GRID-LAYOUT]]. 3.374 + There has already been some work on such a processing model 3.375 + in [[CSS3-REGIONS]], 3.376 + and the work done on a model there, 3.377 + and the editors of that specification, 3.378 + should inform what happens in this specification. 3.379 + </p> 3.380 + 3.381 +<h3 id="fragment-styling">Fragment styling</h3> 3.382 + 3.383 +<h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4> 3.384 + 3.385 + <p> 3.386 + The ::nth-fragment() pseudo-element is a pseudo-element 3.387 + that describes some of the <i>fragment box</i>es generated by an element. 3.388 + The argument to the pseudo-element takes the same syntax 3.389 + as the argument to the :nth-child() pseudo-class 3.390 + defined in [[!SELECT]], and has the same meaning 3.391 + except that the number is relative to 3.392 + <i>fragment box</i>es generated by the element 3.393 + instead of siblings of the element. 3.394 + </p> 3.395 + 3.396 + <p class="note"> 3.397 + Selectors that allow addressing fragments 3.398 + by counting from the end rather than the start 3.399 + are intentionally not provided. 3.400 + Such selectors would interfere with determining 3.401 + the number of fragments. 3.402 + </p> 3.403 + 3.404 + <p class="issue"> 3.405 + Depending on future discussions, 3.406 + this ''::nth-fragment(<var>an+b</var>)'' syntax 3.407 + may be replaced with 3.408 + the new ''::fragment:nth(<var>an+b</var>)'' syntax. 3.409 + </p> 3.410 + 3.411 +<h4 id="style-of-fragments">Styling of fragments</h4> 3.412 + 3.413 + <p class="issue"> 3.414 + Should this apply to fragment overflow only, 3.415 + or also to paginated overflow? 3.416 + (If it applies, 3.417 + then stricter property restrictions would be needed 3.418 + for paginated overflow.) 3.419 + </p> 3.420 + 3.421 + <p> 3.422 + In the absence of rules with ''::nth-fragment()'' pseudo-elements, 3.423 + the computed style for each <i>fragment box</i> 3.424 + is the computed style for the element 3.425 + for which the <i>fragment box</i> was created. 3.426 + However, the style for a <i>fragment box</i> is also influenced 3.427 + by rules whose selector's <i>subject</i> [[!SELECT]] 3.428 + has an ''::nth-fragment()'' pseudo-element, 3.429 + if the 1-based number of the <i>fragment box</i> matches 3.430 + that ''::nth-fragment()'' pseudo-element 3.431 + and the selector (excluding the ''::nth-fragment()'' pseudo-element) 3.432 + matches the element generating the fragments. 3.433 + </p> 3.434 + 3.435 + <p> 3.436 + When determining the style of the <i>fragment box</i>, 3.437 + these rules that match the fragment pseudo-element 3.438 + cascade together with the rules that match the element, 3.439 + with the fragment pseudo-element adding the specificity 3.440 + of a pseudo-class to the specificity calculation. 3.441 + <span class="issue">Does this need to be specified in 3.442 + the cascading module as well?</span> 3.443 + </p> 3.444 + 3.445 + <div class="example"> 3.446 + <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 3.447 +<style> 3.448 + .bouncy-columns { 3.449 + overflow: fragments; 3.450 + width: 6em; 3.451 + height: 10em; 3.452 + float: left; 3.453 + margin: 1em; 3.454 + font: medium/1.25 Times New 3.455 + Roman, Times, serif; 3.456 + } 3.457 + .bouncy-columns::nth-fragment(1) { 3.458 + background: aqua; color: black; 3.459 + transform: rotate(-3deg); 3.460 + } 3.461 + .bouncy-columns::nth-fragment(2) { 3.462 + background: yellow; color: black; 3.463 + transform: rotate(3deg); 3.464 + } 3.465 +</style> 3.466 +<div class="bouncy-columns"> 3.467 + <i>...</i> 3.468 +</div></pre></td><td> 3.469 + <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> 3.470 + <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> 3.471 + <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> 3.472 + </td></tr></table> 3.473 + </div> 3.474 + 3.475 + <p> 3.476 + Styling an ''::nth-fragment()'' pseudo-element with the 'overflow' 3.477 + property does take effect; 3.478 + if a <i>fragment box</i> has a 3.479 + computed value of 'overflow' other than ''fragments'' 3.480 + then that fragment box is the last fragment. 3.481 + However, overriding ''overflow'' on the first fragment 3.482 + does not cause the <i>fragment box</i> not to exist; 3.483 + whether there are fragment boxes at all is determined by 3.484 + the computed value of overflow for the element. 3.485 + </p> 3.486 + 3.487 + <p> 3.488 + Styling an ''::nth-fragment()'' pseudo-element with the 'content' 3.489 + property has no effect; 3.490 + the computed value of 'content' for the fragment box 3.491 + remains the same as the computed value of content for the element. 3.492 + </p> 3.493 + 3.494 + <p> 3.495 + Specifying ''display: none'' for a <i>fragment box</i> causes 3.496 + the fragment box with that index not to be generated. 3.497 + However, in terms of the indices 3.498 + used for matching ''::nth-fragment()'' pseudo-elements 3.499 + of later fragment boxes, 3.500 + it still counts as though it was generated. 3.501 + However, since it is not generated, it does not contain any content. 3.502 + </p> 3.503 + 3.504 + <p class="issue"> 3.505 + Would it make more sense to forbid ''display:none''? 3.506 + Or perhaps to forbid 'display', 'position', 'float', 3.507 + and similar (in addition to 'overflow')? 3.508 + </p> 3.509 + 3.510 + <p> 3.511 + To match the model for other pseudo-elements 3.512 + where the pseudo-elements live inside their corresponding element, 3.513 + declarations in ''::nth-fragment()'' pseudo-elements override 3.514 + declarations in rules without the pseudo-element. 3.515 + The relative priority within such declarations is determined 3.516 + by normal cascading order (see [[!CSS21]]). 3.517 + </p> 3.518 + 3.519 + <p> 3.520 + Styles specified on ''::nth-fragment()'' pseudo-elements 3.521 + do affect inheritance to content within the <i>fragment box</i>. 3.522 + In other words, the content within the <i>fragment box</i> must 3.523 + inherit from the fragment box's style (i.e., the pseudo-element style) 3.524 + rather than directly from the element. 3.525 + This means that elements split between fragment boxes may 3.526 + have different styles for different parts of the element. 3.527 + </p> 3.528 + 3.529 + <p class="issue"> 3.530 + This inheritance rule allows specifying styles indirectly 3.531 + (by using explicit ''inherit'' or using default inheritance 3.532 + on properties that don't apply to '':first-letter'') 3.533 + that can't be specified directly 3.534 + (based on the rules in the next section). 3.535 + This is a problem. 3.536 + The restrictions that apply to styling inside fragments 3.537 + should also apply to inheritance from fragments. 3.538 + </p> 3.539 + 3.540 + <div class="example"> 3.541 + <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 3.542 +<style> 3.543 + .article { 3.544 + overflow: fragments; 3.545 + } 3.546 + .article::nth-fragment(1) { 3.547 + font-size: 1.5em; 3.548 + margin-bottom: 1em; 3.549 + height: 4em; 3.550 + } 3.551 + .article::nth-fragment(2) { 3.552 + margin-left: 5em; 3.553 + margin-right: 2em; 3.554 + } 3.555 +</style> 3.556 +<div class="article"> 3.557 + The <code>font-size</code> property<i>...</i> 3.558 +</div></pre></td><td> 3.559 + <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div> 3.560 + <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> 3.561 + </td></tr></table> 3.562 + </div> 3.563 + 3.564 +<h4 id="style-in-fragments">Styling inside fragments</h4> 3.565 + 3.566 + <p class="issue"> 3.567 + Should this apply to fragment overflow only, 3.568 + or also to paginated overflow, 3.569 + or even to pagination across pages? 3.570 + </p> 3.571 + 3.572 + <p> 3.573 + The ''::nth-fragment()'' pseudo-element 3.574 + can also be used to style 3.575 + content inside of a <i>fragment box</i>. 3.576 + Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements, 3.577 + the ''::nth-fragment()'' pseudo-element can be applied 3.578 + to parts of the selector other than the subject: 3.579 + in particular, it can match ancestors of the subject. 3.580 + However, the only CSS properties applied 3.581 + by rules with such selectors 3.582 + are those that apply 3.583 + to the ''::first-letter'' pseudo-element. 3.584 + </p> 3.585 + 3.586 + <p> 3.587 + To be more precise, 3.588 + when a rule's selector has ''::nth-fragment()'' pseudo-elements 3.589 + attached to parts of the selector other than the subject, 3.590 + the declarations in that rule apply to 3.591 + a fragment (or pseudo-element thereof) when: 3.592 + </p> 3.593 + <ol> 3.594 + <li> 3.595 + the declarations are for properties that apply to the 3.596 + ''::first-letter'' pseudo-element, 3.597 + </li> 3.598 + <li> 3.599 + the declarations would apply to 3.600 + that fragment (or pseudo-element thereof) 3.601 + had those ''::nth-fragment()'' pseudo-elements been removed, 3.602 + with a particular association between 3.603 + each sequence of simple selectors and the element it matched, 3.604 + and 3.605 + </li> 3.606 + <li> 3.607 + for each removed ''::nth-fragment()'' pseudo-element, 3.608 + the fragment lives within a <i>fragment box</i> 3.609 + of the element associated in that association 3.610 + with the selector that the pseudo-element was attached to, 3.611 + and whose index matches the pseudo-element. 3.612 + </li> 3.613 + </ol> 3.614 + 3.615 + <div class="example"> 3.616 + <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 3.617 +<style> 3.618 + .dark-columns { 3.619 + overflow: fragments; 3.620 + width: 6em; 3.621 + height: 10em; 3.622 + float: left; 3.623 + margin-right: 1em; 3.624 + font: medium/1.25 Times New 3.625 + Roman, Times, serif; 3.626 + } 3.627 + .dark-columns::nth-fragment(1) { 3.628 + background: aqua; color: black; 3.629 + } 3.630 + .dark-columns::nth-fragment(1) :link { 3.631 + color: blue; 3.632 + } 3.633 + .dark-columns::nth-fragment(1) :visited { 3.634 + color: purple; 3.635 + } 3.636 + .dark-columns::nth-fragment(2) { 3.637 + background: navy; color: white; 3.638 + } 3.639 + .dark-columns::nth-fragment(2) :link { 3.640 + color: aqua; 3.641 + } 3.642 + .dark-columns::nth-fragment(2) :visited { 3.643 + color: fuchsia; 3.644 + } 3.645 +</style> 3.646 +<div class="dark-columns"> 3.647 + <i>...</i> 3.648 +</div></pre></td><td> 3.649 + <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> 3.650 + <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> 3.651 + </td></tr></table> 3.652 + </div> 3.653 + 3.654 + 3.655 +<h3 id="max-lines">The 'max-lines' property</h3> 3.656 + 3.657 + <p> 3.658 + Authors may wish to style the opening lines of an element 3.659 + with different styles 3.660 + by putting those opening lines in a separate fragment. 3.661 + However, since it may be difficult to predict the exact height 3.662 + occupied by those lines 3.663 + in order to restrict the first fragment to that height, 3.664 + this specification introduces a 'max-lines' property 3.665 + that forces a fragment to break 3.666 + after a specified number of lines. 3.667 + This forces a break after the given number of lines 3.668 + contained within the element or its descendants, 3.669 + as long as those lines are in the same block formatting context. 3.670 + </p> 3.671 + 3.672 + <table class=propdef> 3.673 + <tr> 3.674 + <th>Name: 3.675 + <td><dfn>max-lines</dfn> 3.676 + <tr> 3.677 + <th><a href="#values">Value</a>: 3.678 + <td>none | <integer> 3.679 + <tr> 3.680 + <th>Initial: 3.681 + <td>none 3.682 + <tr> 3.683 + <th>Applies to: 3.684 + <td>fragment boxes 3.685 + <tr> 3.686 + <th>Inherited: 3.687 + <td>no 3.688 + <tr> 3.689 + <th>Animatable: 3.690 + <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a> 3.691 + <tr> 3.692 + <th>Percentages: 3.693 + <td>N/A 3.694 + <tr> 3.695 + <th>Media: 3.696 + <td>visual 3.697 + <tr> 3.698 + <th>Computed value: 3.699 + <td>specified value 3.700 + <tr> 3.701 + <th>Canonical order: 3.702 + <td><abbr title="follows order of property value definition">per grammar</abbr> 3.703 + </table> 3.704 + 3.705 + <dl> 3.706 + <dt>none 3.707 + <dd> 3.708 + <p> 3.709 + Breaks occur only as specified elsewhere. 3.710 + </p> 3.711 + </dd> 3.712 + 3.713 + <dt><integer> 3.714 + <dd> 3.715 + <p> 3.716 + In addition to any breaks specified elsewhere, 3.717 + a break is forced before any line that would exceed 3.718 + the given number of lines 3.719 + being placed inside the element 3.720 + (excluding lines that are in 3.721 + a different block formatting context from 3.722 + the block formatting context to which 3.723 + an unstyled child of the element would belong). 3.724 + </p> 3.725 + 3.726 + <p class="issue"> 3.727 + If there are multiple boundaries between this line 3.728 + and the previous, where exactly (in terms of element 3.729 + boundaries) is the break forced? 3.730 + </p> 3.731 + 3.732 + <p> 3.733 + Only positive integers are accepted. 3.734 + Zero or negative integers are a parse error. 3.735 + </p> 3.736 + </dd> 3.737 + </dl> 3.738 + 3.739 +<p class="issue">Should this apply to fragment overflow only, or also 3.740 +to pagination?</p> 3.741 + 3.742 + <div class="example"> 3.743 + <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 3.744 +<style> 3.745 + .article { 3.746 + overflow: fragments; 3.747 + } 3.748 + .article::first-letter { 3.749 + font-size: 2em; 3.750 + line-height: 0.9; 3.751 + } 3.752 + .article::nth-fragment(1) { 3.753 + font-size: 1.5em; 3.754 + max-lines: 3; 3.755 + } 3.756 + .article::nth-fragment(2) { 3.757 + column-count: 2; 3.758 + } 3.759 +</style> 3.760 +<div class="article"> 3.761 + <i>...</i> 3.762 +</div></pre></td><td> 3.763 + <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> 3.764 + <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> 3.765 + <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> 3.766 + </td></tr></table> 3.767 + </div> 3.768 + 3.769 +<h2 id="static-media">Overflow in static media</h2> 3.770 + 3.771 + <p class="issue"> 3.772 + This specification should define useful behavior 3.773 + for all values of 'overflow' 3.774 + in static media (such as print). 3.775 + Current implementation behavior is quite poor and 3.776 + produces unexpected results when authors have not considered 3.777 + what will happen when 3.778 + the content they produce for interactive media 3.779 + is printed. 3.780 + </p> 3.781 + 3.782 +<h2 id="conformance"> 3.783 +Conformance</h2> 3.784 + 3.785 +<h3 id="placement"> 3.786 +Module interactions</h3> 3.787 + 3.788 + <p>This module extends the 'overflow' 3.789 + feature defined in [[CSS21]] section 11.1.1. It defines additional 3.790 + overflow handling mechanisms that implementations must implement as 3.791 + described in this module in order to conform to this module.</p> 3.792 + 3.793 + <p>No properties in this module apply to the <code>::first-line</code> or 3.794 + <code>::first-letter</code> pseudo-elements.</p> 3.795 + 3.796 +<h3 id="values"> 3.797 +Values</h3> 3.798 + 3.799 + <p>This specification follows the 3.800 + <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 3.801 + definition conventions</a> from [[!CSS21]]. Value types not defined in 3.802 + this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. 3.803 + Other CSS modules may expand the definitions of these value types: for 3.804 + example [[CSS3COLOR]], when combined with this module, expands the 3.805 + definition of the <color> value type as used in this specification.</p> 3.806 + 3.807 + <p>In addition to the property-specific values listed in their definitions, 3.808 + all properties defined in this specification also accept the 3.809 + <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> 3.810 + keyword as their property value. For readability it has not been repeated 3.811 + explicitly. 3.812 + 3.813 + 3.814 +<h3 id="conventions"> 3.815 +Document conventions</h3> 3.816 + 3.817 + <p>Conformance requirements are expressed with a combination of 3.818 + descriptive assertions and RFC 2119 terminology. The key words “MUST”, 3.819 + “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 3.820 + “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 3.821 + document are to be interpreted as described in RFC 2119. 3.822 + However, for readability, these words do not appear in all uppercase 3.823 + letters in this specification. 3.824 + 3.825 + <p>All of the text of this specification is normative except sections 3.826 + explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 3.827 + 3.828 + <p>Examples in this specification are introduced with the words “for example” 3.829 + or are set apart from the normative text with <code>class="example"</code>, 3.830 + like this: 3.831 + 3.832 + <div class="example"> 3.833 + <p>This is an example of an informative example.</p> 3.834 + </div> 3.835 + 3.836 + <p>Informative notes begin with the word “Note” and are set apart from the 3.837 + normative text with <code>class="note"</code>, like this: 3.838 + 3.839 + <p class="note">Note, this is an informative note.</p> 3.840 + 3.841 +<h3 id="conformance-classes"> 3.842 +Conformance classes</h3> 3.843 + 3.844 + <p>Conformance to CSS Overflow Module Level 3 3.845 + is defined for three conformance classes: 3.846 + <dl> 3.847 + <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> 3.848 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 3.849 + style sheet</a>. 3.850 + <dt><dfn>renderer</dfn></dt> 3.851 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 3.852 + that interprets the semantics of a style sheet and renders 3.853 + documents that use them. 3.854 + <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 3.855 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 3.856 + that writes a style sheet. 3.857 + </dl> 3.858 + 3.859 + <p>A style sheet is conformant to CSS Overflow Module Level 3 3.860 + if all of its statements that use syntax defined in this module are valid 3.861 + according to the generic CSS grammar and the individual grammars of each 3.862 + feature defined in this module. 3.863 + 3.864 + <p>A renderer is conformant to CSS Overflow Module Level 3 3.865 + if, in addition to interpreting the style sheet as defined by the 3.866 + appropriate specifications, it supports all the features defined 3.867 + by CSS Overflow Module Level 3 by parsing them correctly 3.868 + and rendering the document accordingly. However, the inability of a 3.869 + UA to correctly render a document due to limitations of the device 3.870 + does not make the UA non-conformant. (For example, a UA is not 3.871 + required to render color on a monochrome monitor.) 3.872 + 3.873 + <p>An authoring tool is conformant to CSS Overflow Module Level 3 3.874 + if it writes style sheets that are syntactically correct according to the 3.875 + generic CSS grammar and the individual grammars of each feature in 3.876 + this module, and meet all other conformance requirements of style sheets 3.877 + as described in this module. 3.878 + 3.879 +<h3 id="partial"> 3.880 +Partial implementations</h3> 3.881 + 3.882 + <p>So that authors can exploit the forward-compatible parsing rules to 3.883 + assign fallback values, CSS renderers <strong>must</strong> 3.884 + treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 3.885 + as appropriate</a>) any at-rules, properties, property values, keywords, 3.886 + and other syntactic constructs for which they have no usable level of 3.887 + support. In particular, user agents <strong>must not</strong> selectively 3.888 + ignore unsupported component values and honor supported values in a single 3.889 + multi-value property declaration: if any value is considered invalid 3.890 + (as unsupported values must be), CSS requires that the entire declaration 3.891 + be ignored.</p> 3.892 + 3.893 +<h3 id="experimental"> 3.894 +Experimental implementations</h3> 3.895 + 3.896 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 3.897 + reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 3.898 + syntax</a> for proprietary and experimental extensions to CSS. 3.899 + 3.900 + <p>Prior to a specification reaching the Candidate Recommendation stage 3.901 + in the W3C process, all implementations of a CSS feature are considered 3.902 + experimental. The CSS Working Group recommends that implementations 3.903 + use a vendor-prefixed syntax for such features, including those in 3.904 + W3C Working Drafts. This avoids incompatibilities with future changes 3.905 + in the draft. 3.906 + </p> 3.907 + 3.908 +<h3 id="testing"> 3.909 +Non-experimental implementations</h3> 3.910 + 3.911 + <p>Once a specification reaches the Candidate Recommendation stage, 3.912 + non-experimental implementations are possible, and implementors should 3.913 + release an unprefixed implementation of any CR-level feature they 3.914 + can demonstrate to be correctly implemented according to spec. 3.915 + 3.916 + <p>To establish and maintain the interoperability of CSS across 3.917 + implementations, the CSS Working Group requests that non-experimental 3.918 + CSS renderers submit an implementation report (and, if necessary, the 3.919 + testcases used for that implementation report) to the W3C before 3.920 + releasing an unprefixed implementation of any CSS features. Testcases 3.921 + submitted to W3C are subject to review and correction by the CSS 3.922 + Working Group. 3.923 + 3.924 + <p>Further information on submitting testcases and implementation reports 3.925 + can be found from on the CSS Working Group's website at 3.926 + <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 3.927 + Questions should be directed to the 3.928 + <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 3.929 + mailing list. 3.930 + 3.931 +<h3 id="cr-exit-criteria"> 3.932 +CR exit criteria</h3> 3.933 + 3.934 + <p class=issue>[Change or remove the following CR exit criteria if 3.935 + the spec is not a module, but, e.g., a Note or a profile. This text was <a 3.936 + href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p> 3.937 + 3.938 + <p> 3.939 + For this specification to be advanced to Proposed Recommendation, 3.940 + there must be at least two independent, interoperable implementations 3.941 + of each feature. Each feature may be implemented by a different set of 3.942 + products, there is no requirement that all features be implemented by 3.943 + a single product. For the purposes of this criterion, we define the 3.944 + following terms: 3.945 + 3.946 + <dl> 3.947 + <dt>independent <dd>each implementation must be developed by a 3.948 + different party and cannot share, reuse, or derive from code 3.949 + used by another qualifying implementation. Sections of code that 3.950 + have no bearing on the implementation of this specification are 3.951 + exempt from this requirement. 3.952 + 3.953 + <dt>interoperable <dd>passing the respective test case(s) in the 3.954 + official CSS test suite, or, if the implementation is not a Web 3.955 + browser, an equivalent test. Every relevant test in the test 3.956 + suite should have an equivalent test created if such a user 3.957 + agent (UA) is to be used to claim interoperability. In addition 3.958 + if such a UA is to be used to claim interoperability, then there 3.959 + must one or more additional UAs which can also pass those 3.960 + equivalent tests in the same way for the purpose of 3.961 + interoperability. The equivalent tests must be made publicly 3.962 + available for the purposes of peer review. 3.963 + 3.964 + <dt>implementation <dd>a user agent which: 3.965 + 3.966 + <ol class=inline> 3.967 + <li>implements the specification. 3.968 + 3.969 + <li>is available to the general public. The implementation may 3.970 + be a shipping product or other publicly available version 3.971 + (i.e., beta version, preview release, or “nightly build”). 3.972 + Non-shipping product releases must have implemented the 3.973 + feature(s) for a period of at least one month in order to 3.974 + demonstrate stability. 3.975 + 3.976 + <li>is not experimental (i.e., a version specifically designed 3.977 + to pass the test suite and is not intended for normal usage 3.978 + going forward). 3.979 + </ol> 3.980 + </dl> 3.981 + 3.982 + <p>The specification will remain Candidate Recommendation for at least 3.983 + six months. 3.984 + 3.985 +<h2 class=no-num id="acknowledgments"> 3.986 +Acknowledgments</h2> 3.987 + 3.988 + <p> 3.989 + Thanks especially to the feedback from 3.990 + Rossen Atanassov, 3.991 + Bert Bos, 3.992 + Tantek Çelik, 3.993 + John Daggett, 3.994 + fantasai, 3.995 + Daniel Glazman, 3.996 + Vincent Hardy, 3.997 + Håkon Wium Lie, 3.998 + Peter Linss, 3.999 + Florian Rivoal, 3.1000 + Alan Stearns, 3.1001 + Steve Zilles, 3.1002 + and all the rest of the 3.1003 + <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community. 3.1004 + </p> 3.1005 + 3.1006 +<h2 class=no-num id="references"> 3.1007 +References</h2> 3.1008 + 3.1009 +<h3 class="no-num" id="normative-references"> 3.1010 +Normative references</h3> 3.1011 +<!--normative--> 3.1012 + 3.1013 +<h3 class="no-num" id="other-references"> 3.1014 +Other references</h3> 3.1015 +<!--informative--> 3.1016 + 3.1017 +<h2 class="no-num" id="index"> 3.1018 +Index</h2> 3.1019 +<!--index--> 3.1020 + 3.1021 +<h2 class="no-num" id="property-index"> 3.1022 +Property index</h2> 3.1023 +<!-- properties --> 3.1024 + 3.1025 +</body> 3.1026 +</html> 3.1027 +<!-- Keep this comment at the end of the file 3.1028 +Local variables: 3.1029 +mode: sgml 3.1030 +sgml-declaration:"~/SGML/HTML4.decl" 3.1031 +sgml-default-doctype-name:"html" 3.1032 +sgml-minimize-attributes:t 3.1033 +sgml-nofill-elements:("pre" "style" "br") 3.1034 +sgml-live-element-indicator:t 3.1035 +sgml-omittag:nil 3.1036 +sgml-shorttag:nil 3.1037 +sgml-namecase-general:t 3.1038 +sgml-general-insert-case:lower 3.1039 +sgml-always-quote-attributes:t 3.1040 +sgml-indent-step:nil 3.1041 +sgml-indent-data:t 3.1042 +sgml-parent-document:nil 3.1043 +sgml-exposed-tags:nil 3.1044 +sgml-local-catalogs:nil 3.1045 +sgml-local-ecat-files:nil 3.1046 +End: 3.1047 +--> 3.1048 +
4.1 --- a/css3-regions/Overview.html Fri Aug 17 23:46:15 2012 +0200 4.2 +++ b/css3-regions/Overview.html Fri Aug 17 23:51:31 2012 +0200 4.3 @@ -38,13 +38,13 @@ 4.4 4.5 <h1 id=css-regions-module>CSS Regions Module Level 3</h1> 4.6 4.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 August 2012</h2> 4.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 August 2012</h2> 4.9 4.10 <dl> 4.11 <dt>This version: 4.12 4.13 <dd><a 4.14 - href="http://www.w3.org/TR/2012/ED-css3-regions-20120811/">http://www.w3.org/csswg/css3-regions</a> 4.15 + href="http://www.w3.org/TR/2012/ED-css3-regions-20120816/">http://www.w3.org/csswg/css3-regions</a> 4.16 4.17 <dt>Latest version: 4.18 4.19 @@ -1763,7 +1763,7 @@ 4.20 href="#dom-named-flow"><code class=idl>NamedFlow</code></a> object 4.21 representation of a <a href="#named-flow0">named flow</a>. 4.22 4.23 - <p>An additional method and an additional attribute on the <a 4.24 + <p>An additional method on the <a 4.25 href="http://www.w3.org/TR/dom/#interface-document"><code 4.26 class=idl>Document</code></a> interface provide access to <a 4.27 href="#named-flow0">named flows</a>. 4.28 @@ -1771,19 +1771,19 @@ 4.29 <pre class=idl> 4.30 partial interface <a 4.31 href="http://www.w3.org/TR/dom/#interface-document">Document</a> { 4.32 - readonly attribute <a 4.33 + <a 4.34 href="#dom-named-flow-collection">NamedFlowCollection</a> <a 4.35 - href="#document-namedflows">namedFlows</a>; 4.36 + href="#document-getnamedflows">getNamedFlows()</a>; 4.37 }; 4.38 </pre> 4.39 4.40 - <p>The <dfn id=document-namedflows><code class=idl>namedFlows</code></dfn> 4.41 - attribute on the <a 4.42 + <p>The <dfn id=document-getnamedflows><code 4.43 + class=idl>getNamedFlows()</code></dfn> method on the <a 4.44 href="http://www.w3.org/TR/dom/#interface-document"><code 4.45 - class=idl>Document</code></a> interface returns the live list of all the 4.46 - current <a href="#named-flow0">named flows</a> in the document. 4.47 - 4.48 - <p>The <a href="#document-namedflows"><code class=idl>namedFlows</code></a> 4.49 + class=idl>Document</code></a> interface returns a static snapshot of all 4.50 + the current <a href="#named-flow0">named flows</a> in the document. 4.51 + 4.52 + <p>The <a href="#dom-named-flow"><code class=idl>namedFlows</code></a> 4.53 collection must include all <a href="#named-flow0">named flows</a> that 4.54 are currently in the <code>CREATED</code> state. The list must not include 4.55 <a href="#named-flow0">named flows</a> that are in the <code>NULL</code> 4.56 @@ -1800,8 +1800,7 @@ 4.57 <p>The <dfn id=dom-named-flow-collection><code 4.58 class=idl>NamedFlowCollection</code></dfn> interface provides a list of 4.59 current <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> 4.60 - instances in the document. The collection is live and methods operate on 4.61 - the underlying data, not a snapshot of the data. 4.62 + instances in the document. The collection is a snapshot of the data. 4.63 4.64 <pre class=idl> 4.65 interface NamedFlowCollection { 4.66 @@ -2036,7 +2035,9 @@ 4.67 chain, that means the <a href="#named-flow0">named flow</a> content is 4.68 further fitted in subsequent regions. In this last case, note that the <a 4.69 href="#named-flow0">named flow</a> fragment may be empty (for example if 4.70 - the region is too small to accommodate any content). 4.71 + the region is too small to accommodate any content). This value is 4.72 + returned if the <a href="#css-region">region</a> object is not (or no 4.73 + longer) a region. 4.74 4.75 <dt>‘<code class=property>empty</code>’ 4.76 4.77 @@ -2092,7 +2093,8 @@ 4.78 fragmented across region boundaries, the <a 4.79 href="http://dev.w3.org/csswg/cssom/#cssstyledeclaration">CSSStyleDeclaration</a> 4.80 returned must apply only to the fragment that flows through the <span>CSS 4.81 - Region</span>. 4.82 + Region</span>. The method returns null if the <a 4.83 + href="#css-region">region</a> object is not (or no longer) a region. 4.84 4.85 <div class=note> 4.86 <p>If the element is not contained in the <span>CSS Region</span> at all, 4.87 @@ -2110,14 +2112,7 @@ 4.88 class=property>flow-from</code></a>’ property on the corresponding 4.89 pseudo-element, element or other construct becomes ‘<code 4.90 class=property>none</code>’ but a script is still holding a reference to 4.91 - the <a href="#css-region"><code class=idl>Region</code></a> object. If a 4.92 - <a href="#css-region"><code class=idl>Region</code></a> instance is no 4.93 - longer a <a href="#css-region">region</a>, accessing its attributes or 4.94 - invoking its methods throws a <a 4.95 - href="http://www.w3.org/TR/dom/#exception-domexception"><code 4.96 - class=idl>DOMException</code></a> with the <a 4.97 - href="http://www.w3.org/TR/dom/#dom-domexception-invalid_access_err"><code 4.98 - class=idl>INVALID_ACCESS_ERR</code></a> error code. 4.99 + the <a href="#css-region"><code class=idl>Region</code></a> object. 4.100 4.101 <h3 id=region-style-rule-interface><span class=secno>6.3. </span>The 4.102 CSSRegionStyleRule interface</h3> 4.103 @@ -2818,6 +2813,10 @@ 4.104 3<sup>rd</sup> 2012</a> version</h3> 4.105 4.106 <ul> 4.107 + <li>Removed exceptions from the Region interface 4.108 + 4.109 + <li>Changed NamedFlowCollection from live to a static snapshot 4.110 + 4.111 <li>Changed NamedFlow to inherit from EventTarget 4.112 4.113 <li>Removed flowFrom from Region interface and changed method name to 4.114 @@ -2888,8 +2887,9 @@ 4.115 <li>Added a name property to the <a 4.116 href="#dom-named-flow"><code>NamedFlow</code></a> interface. Added a <a 4.117 href="#dom-named-flow-collection"><code>NamedFlowCollection</code></a> 4.118 - interface and added a <code>getNamedFlows</code> method on the 4.119 - <code>Document</code> interface, as per <a 4.120 + interface and added a <a 4.121 + href="#document-getnamedflows"><code>getNamedFlows</code></a> method on 4.122 + the <code>Document</code> interface, as per <a 4.123 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug 4.124 15828</a>. 4.125 4.126 @@ -3594,6 +3594,10 @@ 4.127 <li>getContent(), <a href="#dom-named-flow-get-content" 4.128 title="getContent()"><strong>6.1.</strong></a> 4.129 4.130 + <li><a href="#document-getnamedflows"><code 4.131 + class=idl>getNamedFlows()</code></a>, <a href="#document-getnamedflows" 4.132 + title="getNamedFlows()"><strong>6.1.</strong></a> 4.133 + 4.134 <li>getRegionFlowRanges, <a href="#dom-region-getregionflowranges" 4.135 title=getRegionFlowRanges><strong>6.2.</strong></a> 4.136 4.137 @@ -3633,10 +3637,6 @@ 4.138 href="#dom-named-flow-collection" 4.139 title=NamedFlowCollection><strong>6.1.</strong></a> 4.140 4.141 - <li><a href="#document-namedflows"><code class=idl>namedFlows</code></a>, 4.142 - <a href="#document-namedflows" title=namedFlows><strong>6.1.</strong></a> 4.143 - 4.144 - 4.145 <li><a href="#dom-named-flow-collection-named-item"><code 4.146 class=idl>namedItem(name)</code></a>, <a 4.147 href="#dom-named-flow-collection-named-item"
5.1 --- a/css3-regions/Overview.src.html Fri Aug 17 23:46:15 2012 +0200 5.2 +++ b/css3-regions/Overview.src.html Fri Aug 17 23:51:31 2012 +0200 5.3 @@ -1590,20 +1590,20 @@ 5.4 scripts to reference a <code class="idl">NamedFlow</code> object representation 5.5 of a <span>named flow</span>.</p> 5.6 5.7 - <p>An additional method and an additional attribute on the <a href= 5.8 + <p>An additional method on the <a href= 5.9 "http://www.w3.org/TR/dom/#interface-document"><code class= 5.10 "idl">Document</code></a> interface provide access to <span>named flows</span>.</p> 5.11 5.12 <pre class="idl"> 5.13 partial interface <a href= 5.14 "http://www.w3.org/TR/dom/#interface-document">Document</a> { 5.15 - readonly attribute <a href="#dom-named-flow-collection">NamedFlowCollection</a> <a href="#document-namedflows">namedFlows</a>; 5.16 + <a href="#dom-named-flow-collection">NamedFlowCollection</a> <a href="#document-getnamedflows">getNamedFlows()</a>; 5.17 }; 5.18 </pre> 5.19 5.20 - <p>The <dfn id="document-namedflows"><code class="idl">namedFlows</code></dfn> attribute on the <a href= 5.21 + <p>The <dfn id="document-getnamedflows"><code class="idl">getNamedFlows()</code></dfn> method on the <a href= 5.22 "http://www.w3.org/TR/dom/#interface-document"><code class= 5.23 - "idl">Document</code></a> interface returns the live list of all the current <span>named 5.24 + "idl">Document</code></a> interface returns a static snapshot of all the current <span>named 5.25 flows</span> in the document. </p> 5.26 5.27 <p>The <code class="idl">namedFlows</code> collection must include all <span>named flows</span> 5.28 @@ -1617,10 +1617,12 @@ 5.29 </ul> 5.30 5.31 5.32 - <p>The <dfn id="dom-named-flow-collection"><code class="idl">NamedFlowCollection</code></dfn> 5.33 - interface provides a list of current <code class="idl">NamedFlow</code> instances in the 5.34 - document. The collection is live and methods operate on the underlying data, not a snapshot of 5.35 - the data.</p> 5.36 + <p>The <dfn id="dom-named-flow-collection"><code class="idl">NamedFlowCollection</code></dfn> 5.37 + interface provides a list of current 5.38 + <code class="idl">NamedFlow</code> instances 5.39 + in the document. 5.40 + The collection is 5.41 + a snapshot of the data.</p> 5.42 5.43 <pre class="idl"> 5.44 interface NamedFlowCollection { 5.45 @@ -1810,15 +1812,23 @@ 5.46 5.47 <dt>'fit'</dt> 5.48 5.49 - <dd>The region's flow fragment content fits into the region's <a href= 5.50 - "http://www.w3.org/TR/CSS21/box.html#box-dimensions">content box</a>. 5.51 - If the region is the last one in the <span title= 5.52 - "region-chain">region chain</span>, it means that the content fits 5.53 - without overflowing. If the region is not the last one in the region 5.54 - chain, that means the <span>named flow</span> 5.55 - content is further fitted in subsequent regions. In this 5.56 - last case, note that the <span>named flow</span> fragment may be 5.57 - empty (for example if the region is too small to accommodate any content).</dd> 5.58 + <dd>The region's flow fragment content 5.59 + fits into the region's 5.60 + <a href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">content box</a>. 5.61 + If the region is the last one 5.62 + in the <span title="region-chain">region chain</span>, 5.63 + it means that the content 5.64 + fits without overflowing. 5.65 + If the region is not the last one 5.66 + in the region chain, 5.67 + that means the <span>named flow</span> content 5.68 + is further fitted in subsequent regions. 5.69 + In this last case, 5.70 + note that the <span>named flow</span> fragment may be empty 5.71 + (for example if the region is too small 5.72 + to accommodate any content). 5.73 + This value is returned if the <span>region</span> object 5.74 + is not (or no longer) a region.</dd> 5.75 5.76 <dt>'empty'</dt> 5.77 5.78 @@ -1881,7 +1891,10 @@ 5.79 If the element is fragmented across region boundaries, 5.80 the <a href="http://dev.w3.org/csswg/cssom/#cssstyledeclaration">CSSStyleDeclaration</a> returned must apply only 5.81 to the fragment that flows through 5.82 - the <span>CSS Region</span>.</p> 5.83 + the <span>CSS Region</span>. 5.84 + The method returns null 5.85 + if the <span>region</span> object 5.86 + is not (or no longer) a region.</p> 5.87 5.88 <div class="note"> 5.89 <p>If the element is not contained 5.90 @@ -1904,15 +1917,7 @@ 5.91 element or other construct 5.92 becomes 'none' 5.93 but a script is still holding 5.94 - a reference to the <code class="idl">Region</code> object. 5.95 - If a <code class="idl">Region</code> instance 5.96 - is no longer a <span>region</span>, 5.97 - accessing its attributes 5.98 - or invoking its methods throws a 5.99 - <a href="http://www.w3.org/TR/dom/#exception-domexception"><code class="idl">DOMException</code></a> 5.100 - with the 5.101 - <a href="http://www.w3.org/TR/dom/#dom-domexception-invalid_access_err"><code class="idl">INVALID_ACCESS_ERR</code></a> 5.102 - error code.</p> 5.103 + a reference to the <code class="idl">Region</code> object. 5.104 </div> 5.105 5.106 <h3 id="region-style-rule-interface">The CSSRegionStyleRule interface</h3> 5.107 @@ -2445,6 +2450,8 @@ 5.108 <h3 id="changes_from_May_03_2012">Changes from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120503/">May 3<sup>rd</sup> 2012</a> version</h3> 5.109 5.110 <ul> 5.111 + <li>Removed exceptions from the Region interface</li> 5.112 + <li>Changed NamedFlowCollection from live to a static snapshot</li> 5.113 <li>Changed NamedFlow to inherit from EventTarget</li> 5.114 <li>Removed flowFrom from Region interface and changed method name to getComputedRegionStyle().</li> 5.115 <li>Region interface is now a supplemental interface with the [NoInterfaceObject] extended attribute.</li>
6.1 --- a/css3-transforms/ChangeLog Fri Aug 17 23:46:15 2012 +0200 6.2 +++ b/css3-transforms/ChangeLog Fri Aug 17 23:51:31 2012 +0200 6.3 @@ -1,3 +1,7 @@ 6.4 +2012-08-16 dschulze@adobe.com 6.5 + Added issue to interpolation of rotate3d. 6.6 + Corrected typo. 6.7 + 6.8 2012-08-9 dschulze@adobe.com 6.9 Simplify transform interpolation uppen request of CSS WG. 6.10 rotate3d still gets decomposed as 4x4matrix for now.
7.1 --- a/css3-transforms/Overview.html Fri Aug 17 23:46:15 2012 +0200 7.2 +++ b/css3-transforms/Overview.html Fri Aug 17 23:51:31 2012 +0200 7.3 @@ -39,14 +39,14 @@ 7.4 7.5 <h1>CSS Transforms</h1> 7.6 7.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 August 2012</h2> 7.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 August 2012</h2> 7.9 7.10 <dl> 7.11 <dt>This version: 7.12 7.13 <dd> <a 7.14 - href="http://www.w3.org/TR/2012/ED-css3-transforms-20120809/">http://dev.w3.org/csswg/css3-transforms/</a> 7.15 - <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120809/--> 7.16 + href="http://www.w3.org/TR/2012/ED-css3-transforms-20120816/">http://dev.w3.org/csswg/css3-transforms/</a> 7.17 + <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120816/--> 7.18 7.19 <dt>Latest version: 7.20 7.21 @@ -2725,7 +2725,7 @@ 7.22 class=css>scale(<number>[, <number>])</code>. 7.23 7.24 <dt id=rotate3d-primitive> <code class=css>rotate3d(<number>, 7.25 - <number>, <number>) </code> 7.26 + <number>, <number>, <angle>) </code> 7.27 7.28 <dd> for <code class=css>rotate(<number>)</code>, <code 7.29 class=css>rotateX(<number>)</code>, <code 7.30 @@ -2828,7 +2828,9 @@ 7.31 converted into 4x4 matrices first and interpolated as defined in section 7.32 <a href="#matrix-interpolation">Interpolation of Matrices</a> afterwards. 7.33 7.34 - <p> ‘<code class=css>rotate3d</code>’</p> 7.35 + <p class=issue>This is the current behavior on browsers. The CSS WG is 7.36 + looking into specifying numerical interpolation for ‘<code 7.37 + class=css>rotate3d</code>’.</p> 7.38 <!-- ======================================================================================================= --> 7.39 7.40 <h2 id=matrix-interpolation><span class=secno>20. </span> Interpolation of
8.1 --- a/css3-transforms/Transforms.src.html Fri Aug 17 23:46:15 2012 +0200 8.2 +++ b/css3-transforms/Transforms.src.html Fri Aug 17 23:51:31 2012 +0200 8.3 @@ -2588,7 +2588,7 @@ 8.4 class="css">scale(<number>[, <number>])</code>. 8.5 </dd> 8.6 <dt id="rotate3d-primitive"> 8.7 - <code class="css">rotate3d(<number>, <number>, <number>) 8.8 + <code class="css">rotate3d(<number>, <number>, <number>, <angle>) 8.9 </dt> 8.10 <dd> 8.11 for <code class="css">rotate(<number>)</code>, <code 8.12 @@ -2700,6 +2700,9 @@ 8.13 href="#matrix-interpolation">Interpolation of Matrices</a> afterwards. 8.14 </p> 8.15 8.16 + <p class="issue">This is the current behavior on browsers. The CSS WG is looking into specifying 8.17 + numerical interpolation for ''rotate3d''.</p> 8.18 + 8.19 <!-- ======================================================================================================= --> 8.20 8.21 <h2 id="matrix-interpolation">
9.1 --- a/selectors4/Overview.html Fri Aug 17 23:46:15 2012 +0200 9.2 +++ b/selectors4/Overview.html Fri Aug 17 23:51:31 2012 +0200 9.3 @@ -19,14 +19,14 @@ 9.4 9.5 <h1 id=title>Selectors Level 4</h1> 9.6 9.7 - <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 21 August 9.8 + <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 17 August 9.9 2012</h2> 9.10 9.11 <dl> 9.12 <dt>This version: 9.13 9.14 - <dd><a href="http://www.w3.org/TR/2012/WD-selectors4-20120821/"> 9.15 - http://www.w3.org/TR/2012/WD-selectors4-20120821/</a> 9.16 + <dd><a href="http://www.w3.org/TR/2012/WD-selectors4-20120817/"> 9.17 + http://www.w3.org/TR/2012/WD-selectors4-20120817/</a> 9.18 9.19 <dt>Editor's draft: 9.20 9.21 @@ -476,17 +476,29 @@ 9.22 <p><em>This section is not normative.</em> 9.23 9.24 <p> A selector is a boolean predicate that takes an element in a tree 9.25 - structure and answers whether the element matches the selector or not. 9.26 - 9.27 - <p> These expressions can be used directly on an element to test whether it 9.28 - matches some criteria, such as in the <code>Element.matches()</code> 9.29 - function defined in <a href="#SELECTORS-API2" 9.30 - rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a>, or 9.31 - alternately, can be applied to an entire tree of elements to filter it 9.32 - into a set of elements that match the criteria, such as in the selector in 9.33 - a CSS style rule. 9.34 - 9.35 - <p>Selectors Levels 1, 2, and 3 are defined as the subsets of selector 9.36 + structure and tests whether the element matches the selector or not. 9.37 + 9.38 + <p> These expressions may be used for many things: 9.39 + 9.40 + <ul> 9.41 + <li> directly on an element to test whether it matches some criteria, such 9.42 + as in the <code>Element.matches()</code> function defined in <a 9.43 + href="#SELECTORS-API2" 9.44 + rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a> 9.45 + 9.46 + <li> applied to an entire tree of elements to filter it into a set of 9.47 + elements that match the criteria, such as in the 9.48 + <code>document.findAll()</code> function defined in <a 9.49 + href="#SELECTORS-API2" 9.50 + rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a> or the 9.51 + selector of a CSS style rule. 9.52 + 9.53 + <li> used "in reverse" to generate markup that would match a given 9.54 + selector, such as in <a href="http://haml.info/">HAML</a> or <a 9.55 + href="http://en.wikipedia.org/wiki/Zen_Coding">Zen Coding</a> 9.56 + </ul> 9.57 + 9.58 + <p> Selectors Levels 1, 2, and 3 are defined as the subsets of selector 9.59 functionality defined in the <a 9.60 href="http://www.w3.org/TR/REC-CSS1">CSS1</a>, <a 9.61 href="http://www.w3.org/TR/CSS21/">CSS2.1</a>, and <a 9.62 @@ -495,12 +507,12 @@ 9.63 9.64 <h3 id=placement><span class=secno>1.1. </span>Module Interactions</h3> 9.65 9.66 - <p>This module replaces the definitions for, and extends the set of 9.67 - selectors defined for CSS in <a href="#SELECT" 9.68 + <p>This module replaces the definitions of and extends the set of selectors 9.69 + defined for CSS in <a href="#SELECT" 9.70 rel=biblioentry>[SELECT]<!--{{SELECT}}--></a> and <a href="#CSS21" 9.71 rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>. 9.72 9.73 - <p>Pseudo-element selectors, which define abstract elements in a rendering 9.74 + <p> Pseudo-element selectors, which define abstract elements in a rendering 9.75 tree, are not part of this specification: their generic syntax is 9.76 described here, but, due to their close integration with the rendering 9.77 model and irrelevance to other uses such as DOM queries, they will be 9.78 @@ -1082,7 +1094,7 @@ 9.79 <td>1 9.80 9.81 <tr> 9.82 - <td><code>E > F</code> 9.83 + <td><code>E > F</code> 9.84 9.85 <td>an F element child of an E element 9.86 9.87 @@ -1120,7 +1132,7 @@ 9.88 <td>4 9.89 9.90 <tr> 9.91 - <td><code>E! > F</code> 9.92 + <td><code>E! > F</code> 9.93 9.94 <td>an E element parent of an F element 9.95 9.96 @@ -1132,6 +1144,7 @@ 9.97 9.98 <p>The meaning of each selector is derived from the table above by 9.99 prepending "matches" to the contents of each cell in the "Meaning" column. 9.100 + 9.101 9.102 <p class=note>Some Level 4 selectors (noted above as "3-UI") were 9.103 introduced in <a href="#CSS3UI" 9.104 @@ -1169,8 +1182,8 @@ 9.105 particular kind of relationship between the <a 9.106 href="#compound"><i>compound selectors</i></a> on either side. Combinators 9.107 in Selectors level 4 include: whitespace, "greater-than sign" 9.108 - (U+003E, <code>></code>), "plus sign" (U+002B, 9.109 - <code>+</code>) and "tilde" (U+007E, <code>~</code>). <a 9.110 + (U+003E, <code>></code>), "plus sign" (U+002B, <code>+</code>) 9.111 + and "tilde" (U+007E, <code>~</code>). <a 9.112 href="#whitespace">White space</a> may appear between a combinator and the 9.113 simple selectors around it. 9.114 9.115 @@ -1207,12 +1220,12 @@ 9.116 <p>For example, the following selector represents a list item 9.117 <code>LI</code> unique child of an ordered list <code>OL</code>: 9.118 9.119 - <pre>OL > LI:only-child</pre> 9.120 + <pre>OL > LI:only-child</pre> 9.121 9.122 <p>However the following one represents an ordered list <code>OL</code> 9.123 having a unique child, that child being a <code>LI</code>: 9.124 9.125 - <pre>!OL > LI:only-child</pre> 9.126 + <pre>!OL > LI:only-child</pre> 9.127 9.128 <p>The tree structures represented by these two selectors are the same, 9.129 but the subjects of the selectors are not. 9.130 @@ -1428,16 +1441,19 @@ 9.131 after the comma. 9.132 9.133 <div class=example> 9.134 - <p>CSS example:</p> 9.135 + <p>CSS example: 9.136 9.137 <p>In this example, we condense three rules with identical declarations 9.138 - into one. Thus,</p> 9.139 - 9.140 - <pre>h1 { font-family: sans-serif } 9.141 - h2 { font-family: sans-serif } 9.142 - h3 { font-family: sans-serif }</pre> 9.143 - 9.144 - <p>is equivalent to:</p> 9.145 + into one. Thus, 9.146 + 9.147 + <pre><!-- 9.148 + -->h1 { font-family: sans-serif } 9.149 +<!-- 9.150 + -->h2 { font-family: sans-serif } 9.151 +<!-- 9.152 + -->h3 { font-family: sans-serif }</pre> 9.153 + 9.154 + <p>is equivalent to: 9.155 9.156 <pre>h1, h2, h3 { font-family: sans-serif }</pre> 9.157 </div> 9.158 @@ -1450,19 +1466,22 @@ 9.159 invalidated. 9.160 9.161 <div class=example> 9.162 - <p>Invalid CSS example:</p> 9.163 - 9.164 - <pre>h1 { font-family: sans-serif } 9.165 - h2..foo { font-family: sans-serif } 9.166 - h3 { font-family: sans-serif }</pre> 9.167 - 9.168 - <p>is not equivalent to:</p> 9.169 + <p>Invalid CSS example: 9.170 + 9.171 + <pre><!-- 9.172 + -->h1 { font-family: sans-serif } 9.173 +<!-- 9.174 + -->h2..foo { font-family: sans-serif } 9.175 +<!-- 9.176 + -->h3 { font-family: sans-serif }</pre> 9.177 + 9.178 + <p>is not equivalent to: 9.179 9.180 <pre>h1, h2..foo, h3 { font-family: sans-serif }</pre> 9.181 9.182 <p>because the above selector (<code>h1, h2..foo, h3</code>) is entirely 9.183 invalid and the entire style rule is dropped. (When the selectors are not 9.184 - grouped, only the rule for <code>h2..foo</code> is dropped.)</p> 9.185 + grouped, only the rule for <code>h2..foo</code> is dropped.) 9.186 </div> 9.187 9.188 <h3 id=the-matches-pseudo><span class=secno>4.2. </span> The Matches-Any 9.189 @@ -1494,14 +1513,14 @@ 9.190 <p>For example, following selector matches any element that is being 9.191 hovered or focused, regardless of its namespace. In particular, it is not 9.192 limited to only matching elements in the default namespace that are being 9.193 - hovered or focused.</p> 9.194 + hovered or focused. 9.195 9.196 <pre>*|*:matches(:hover, :focus)</pre> 9.197 9.198 <p>The following selector, however, represents only hovered or focused 9.199 elements that are in the default namespace, because it uses an explicit 9.200 universal selector within the <a 9.201 - href="#matches-pseudo"><code>:matches()</code></a> notation:</p> 9.202 + href="#matches-pseudo"><code>:matches()</code></a> notation: 9.203 9.204 <pre>*|*:matches(*:hover, *:focus)</pre> 9.205 </div> 9.206 @@ -1531,16 +1550,16 @@ 9.207 9.208 <div class=example> 9.209 <p>For example, the following selector matches all <code>button</code> 9.210 - elements in an HTML document that are not disabled.</p> 9.211 + elements in an HTML document that are not disabled. 9.212 9.213 <pre>button:not([DISABLED])</pre> 9.214 9.215 - <p>The following selector represents all but <code>FOO</code> elements.</p> 9.216 + <p>The following selector represents all but <code>FOO</code> elements. 9.217 9.218 <pre>*:not(FOO)</pre> 9.219 9.220 <p>The following compound selector represents all HTML elements except 9.221 - links.</p> 9.222 + links. 9.223 9.224 <pre>html|*:not(:link):not(:visited)</pre> 9.225 </div> 9.226 @@ -1569,10 +1588,10 @@ 9.227 selector represents an instance of the element type in the document tree. 9.228 9.229 <div class=example> 9.230 - <p>Example:</p> 9.231 + <p>Example: 9.232 9.233 <p>The following selector represents an <code>h1</code> element in the 9.234 - document tree:</p> 9.235 + document tree: 9.236 9.237 <pre>h1</pre> 9.238 </div> 9.239 @@ -1638,7 +1657,7 @@ 9.240 </dl> 9.241 9.242 <div class=example> 9.243 - <p>CSS examples:</p> 9.244 + <p>CSS examples: 9.245 9.246 <pre> 9.247 @namespace foo url(http://www.example.com); 9.248 @@ -1650,19 +1669,19 @@ 9.249 9.250 <p>The first rule (not counting the <code>@namespace</code> at-rule) will 9.251 match only <code>h1</code> elements in the "http://www.example.com" 9.252 - namespace.</p> 9.253 + namespace. 9.254 9.255 <p>The second rule will match all elements in the "http://www.example.com" 9.256 - namespace.</p> 9.257 + namespace. 9.258 9.259 <p>The third rule will match only <code>h1</code> elements with no 9.260 - namespace.</p> 9.261 + namespace. 9.262 9.263 <p>The fourth rule will match <code>h1</code> elements in any namespace 9.264 - (including those without any namespace).</p> 9.265 + (including those without any namespace). 9.266 9.267 <p>The last rule is equivalent to the fourth rule because no default 9.268 - namespace has been defined.</p> 9.269 + namespace has been defined. 9.270 </div> 9.271 9.272 <h3 id=universal-selector><span class=secno>5.2. </span> Universal selector 9.273 @@ -1686,7 +1705,7 @@ 9.274 universal selector's presence implied. 9.275 9.276 <div class=example> 9.277 - <p>Examples:</p> 9.278 + <p>Examples: 9.279 9.280 <ul> 9.281 <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are 9.282 @@ -1789,16 +1808,16 @@ 9.283 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 9.284 9.285 <div class=example> 9.286 - <p>Examples:</p> 9.287 + <p>Examples: 9.288 9.289 <p>The following attribute selector represents an <code>h1</code> element 9.290 - that carries the <code>title</code> attribute, whatever its value:</p> 9.291 + that carries the <code>title</code> attribute, whatever its value: 9.292 9.293 <pre>h1[title]</pre> 9.294 9.295 <p>In the following example, the selector represents a <code>span</code> 9.296 element whose <code>class</code> attribute has exactly the value 9.297 - "example":</p> 9.298 + "example": 9.299 9.300 <pre>span[class="example"]</pre> 9.301 9.302 @@ -1806,7 +1825,7 @@ 9.303 attributes of an element, or several conditions on the same attribute. 9.304 Here, the selector represents a <code>span</code> element whose 9.305 <code>hello</code> attribute has exactly the value "Cleveland" and whose 9.306 - <code>goodbye</code> attribute has exactly the value "Columbus":</p> 9.307 + <code>goodbye</code> attribute has exactly the value "Columbus": 9.308 9.309 <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre> 9.310 9.311 @@ -1815,28 +1834,32 @@ 9.312 element with the value "copyright copyleft copyeditor" on a 9.313 <code>rel</code> attribute. The second selector would only match an 9.314 <code>a</code> element with an <code>href</code> attribute having the 9.315 - exact value "http://www.w3.org/".</p> 9.316 - 9.317 - <pre>a[rel~="copyright"] { ... } 9.318 - a[href="http://www.w3.org/"] { ... }</pre> 9.319 + exact value "http://www.w3.org/". 9.320 + 9.321 + <pre><!-- 9.322 + -->a[rel~="copyright"] { ... } 9.323 +<!-- 9.324 + -->a[href="http://www.w3.org/"] { ... }</pre> 9.325 9.326 <p>The following selector represents an <code>a</code> element whose 9.327 - <code>hreflang</code> attribute is exactly "fr".</p> 9.328 + <code>hreflang</code> attribute is exactly "fr". 9.329 9.330 <pre>a[hreflang=fr]</pre> 9.331 9.332 <p>The following selector represents an <code>a</code> element for which 9.333 the value of the <code>hreflang</code> attribute begins with "en", 9.334 - including "en", "en-US", and "en-scouse":</p> 9.335 + including "en", "en-US", and "en-scouse": 9.336 9.337 <pre>a[hreflang|="en"]</pre> 9.338 9.339 <p>The following selectors represent a <code>DIALOGUE</code> element 9.340 whenever it has one of two different values for an attribute 9.341 - <code>character</code>:</p> 9.342 - 9.343 - <pre>DIALOGUE[character=romeo] 9.344 - DIALOGUE[character=juliet]</pre> 9.345 + <code>character</code>: 9.346 + 9.347 + <pre><!-- 9.348 + -->DIALOGUE[character=romeo] 9.349 +<!-- 9.350 + -->DIALOGUE[character=juliet]</pre> 9.351 </div> 9.352 9.353 <h3 id=attribute-substrings><span class=secno>6.2. </span> Substring 9.354 @@ -1871,20 +1894,20 @@ 9.355 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 9.356 9.357 <div class=example> 9.358 - <p>Examples:</p> 9.359 + <p>Examples: 9.360 9.361 <p>The following selector represents an HTML <code>object</code>, 9.362 - referencing an image:</p> 9.363 + referencing an image: 9.364 9.365 <pre>object[type^="image/"]</pre> 9.366 9.367 <p>The following selector represents an HTML anchor <code>a</code> with an 9.368 - <code>href</code> attribute whose value ends with ".html".</p> 9.369 + <code>href</code> attribute whose value ends with ".html". 9.370 9.371 <pre>a[href$=".html"]</pre> 9.372 9.373 <p>The following selector represents an HTML paragraph with a 9.374 - <code>title</code> attribute whose value contains the substring "hello"</p> 9.375 + <code>title</code> attribute whose value contains the substring "hello" 9.376 9.377 <pre>p[title*="hello"]</pre> 9.378 </div> 9.379 @@ -1931,25 +1954,29 @@ 9.380 <a href="#conformance">invalid</a> selector. 9.381 9.382 <div class=example> 9.383 - <p>CSS examples:</p> 9.384 - 9.385 - <pre> 9.386 - @namespace foo "http://www.example.com"; 9.387 - [foo|att=val] { color: blue } 9.388 - [*|att] { color: yellow } 9.389 - [|att] { color: green } 9.390 - [att] { color: green }</pre> 9.391 + <p>CSS examples: 9.392 + 9.393 + <pre><!-- 9.394 + -->@namespace foo "http://www.example.com"; 9.395 +<!-- 9.396 + -->[foo|att=val] { color: blue } 9.397 +<!-- 9.398 + -->[*|att] { color: yellow } 9.399 +<!-- 9.400 + -->[|att] { color: green } 9.401 +<!-- 9.402 + -->[att] { color: green }</pre> 9.403 9.404 <p>The first rule will match only elements with the attribute 9.405 <code>att</code> in the "http://www.example.com" namespace with the value 9.406 - "val".</p> 9.407 + "val". 9.408 9.409 <p>The second rule will match only elements with the attribute 9.410 <code>att</code> regardless of the namespace of the attribute (including 9.411 - no namespace).</p> 9.412 + no namespace). 9.413 9.414 <p>The last two rules are equivalent and will match only elements with the 9.415 - attribute <code>att</code> where the attribute is not in a namespace.</p> 9.416 + attribute <code>att</code> where the attribute is not in a namespace. 9.417 </div> 9.418 9.419 <h3 id=def-values><span class=secno>6.5. </span> Default attribute values 9.420 @@ -1969,6 +1996,7 @@ 9.421 rel=biblioentry>[XML10]<!--{{XML10}}--></a> for definitions of these 9.422 subsets.) Depending on the UA, a default attribute value defined in the 9.423 external subset of the DTD might or might not appear in the document tree. 9.424 + 9.425 9.426 <p>A UA that recognizes an XML namespace may, but is not required to use 9.427 its knowledge of that namespace to treat default attribute values as if 9.428 @@ -1982,33 +2010,37 @@ 9.429 non-validating processors as defined by the XML specification. 9.430 9.431 <div class=example> 9.432 - <p>Example:</p> 9.433 + <p>Example: 9.434 9.435 <p>Consider an element <code>EXAMPLE</code> with an attribute 9.436 <code>radix</code> that has a default value of <code>"decimal"</code>. 9.437 - The DTD fragment might be</p> 9.438 + The DTD fragment might be 9.439 9.440 <pre 9.441 class=dtd-example><!ATTLIST EXAMPLE radix (decimal,octal) "decimal"></pre> 9.442 9.443 - <p>If the style sheet contains the rules</p> 9.444 - 9.445 - <pre>EXAMPLE[radix=decimal] { /*... default property settings ...*/ } 9.446 - EXAMPLE[radix=octal] { /*... other settings...*/ }</pre> 9.447 + <p>If the style sheet contains the rules 9.448 + 9.449 + <pre><!-- 9.450 + -->EXAMPLE[radix=decimal] { /*... default property settings ...*/ } 9.451 +<!-- 9.452 + -->EXAMPLE[radix=octal] { /*... other settings...*/ }</pre> 9.453 9.454 <p>the first rule might not match elements whose <code>radix</code> 9.455 attribute is set by default, i.e. not set explicitly. To catch all cases, 9.456 - the attribute selector for the default value must be dropped:</p> 9.457 - 9.458 - <pre>EXAMPLE { /*... default property settings ...*/ } 9.459 - EXAMPLE[radix=octal] { /*... other settings...*/ }</pre> 9.460 + the attribute selector for the default value must be dropped: 9.461 + 9.462 + <pre><!-- 9.463 + -->EXAMPLE { /*... default property settings ...*/ } 9.464 +<!-- 9.465 + -->EXAMPLE[radix=octal] { /*... other settings...*/ }</pre> 9.466 9.467 <p>Here, because the selector <code>EXAMPLE[radix=octal]</code> is more 9.468 specific than the type selector alone, the style declarations in the 9.469 second rule will override those in the first for elements that have a 9.470 <code>radix</code> attribute value of <code>"octal"</code>. Care has to 9.471 be taken that all property declarations that are to apply only to the 9.472 - default case are overridden in the non-default cases' style rules.</p> 9.473 + default case are overridden in the non-default cases' style rules. 9.474 </div> 9.475 9.476 <h3 id=class-html><span class=secno>6.6. </span> Class selectors</h3> 9.477 @@ -2027,38 +2059,38 @@ 9.478 <a href="#specificity">specificity</a>. 9.479 9.480 <div class=example> 9.481 - <p>CSS examples:</p> 9.482 + <p>CSS examples: 9.483 9.484 <p>We can assign style information to all elements with 9.485 - <code>class~="pastoral"</code> as follows:</p> 9.486 + <code>class~="pastoral"</code> as follows: 9.487 9.488 <pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre> 9.489 9.490 - <p>or just</p> 9.491 + <p>or just 9.492 9.493 <pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre> 9.494 9.495 <p>The following assigns style only to H1 elements with 9.496 - <code>class~="pastoral"</code>:</p> 9.497 + <code>class~="pastoral"</code>: 9.498 9.499 <pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre> 9.500 9.501 <p>Given these rules, the first <code>H1</code> instance below would not 9.502 - have green text, while the second would:</p> 9.503 + have green text, while the second would: 9.504 9.505 <pre> 9.506 - <H1>Not green</H1> 9.507 - <H1 class="pastoral">Very green</H1></pre> 9.508 + <H1>Not green</H1> 9.509 + <H1 class="pastoral">Very green</H1></pre> 9.510 9.511 <p>The following rule matches any <code>P</code> element whose 9.512 <code>class</code> attribute has been assigned a list of <a 9.513 href="#whitespace">whitespace</a>-separated values that includes both 9.514 - <code>pastoral</code> and <code>marine</code>:</p> 9.515 + <code>pastoral</code> and <code>marine</code>: 9.516 9.517 <pre>p.pastoral.marine { color: green }</pre> 9.518 9.519 <p>This rule matches when <code>class="pastoral blue aqua marine"</code> 9.520 - but does not match for <code>class="pastoral blue"</code>.</p> 9.521 + but does not match for <code>class="pastoral blue"</code>. 9.522 </div> 9.523 9.524 <p class=note><strong>Note:</strong> Because CSS gives considerable power 9.525 @@ -2101,20 +2133,20 @@ 9.526 hard-coded or ask the user. 9.527 9.528 <div class=example> 9.529 - <p>Examples:</p> 9.530 + <p>Examples: 9.531 9.532 <p>The following ID selector represents an <code>h1</code> element whose 9.533 - ID-typed attribute has the value "chapter1":</p> 9.534 + ID-typed attribute has the value "chapter1": 9.535 9.536 <pre>h1#chapter1</pre> 9.537 9.538 <p>The following ID selector represents any element whose ID-typed 9.539 - attribute has the value "chapter1":</p> 9.540 + attribute has the value "chapter1": 9.541 9.542 <pre>#chapter1</pre> 9.543 9.544 <p>The following selector represents any element whose ID-typed attribute 9.545 - has the value "z98y".</p> 9.546 + has the value "z98y". 9.547 9.548 <pre>*#z98y</pre> 9.549 </div> 9.550 @@ -2128,6 +2160,7 @@ 9.551 for that namespace). If a style sheet author knows or suspects that a UA 9.552 may not know what the ID of an element is, he should use normal attribute 9.553 selectors instead: <code>[name=p371]</code> instead of <code>#p371</code>. 9.554 + 9.555 9.556 <p>If an element has multiple ID attributes, all of them must be treated as 9.557 IDs for that element for the purposes of the ID selector. Such a situation 9.558 @@ -2170,10 +2203,10 @@ 9.559 <p>The two states are mutually exclusive. 9.560 9.561 <div class=example> 9.562 - <p>Example:</p> 9.563 + <p>Example: 9.564 9.565 <p>The following selector represents links carrying class 9.566 - <code>footnote</code> and already visited:</p> 9.567 + <code>footnote</code> and already visited: 9.568 9.569 <pre>.footnote:visited</pre> 9.570 </div> 9.571 @@ -2295,24 +2328,25 @@ 9.572 fragment identifier, then the document has no target element. 9.573 9.574 <div class=example> 9.575 - <p>Example:</p> 9.576 + <p>Example: 9.577 9.578 <pre>p.note:target</pre> 9.579 9.580 <p>This selector represents a <code>p</code> element of class 9.581 - <code>note</code> that is the target element of the referring URI.</p> 9.582 + <code>note</code> that is the target element of the referring URI. 9.583 </div> 9.584 9.585 <div class=example> 9.586 - <p>CSS example:</p> 9.587 + <p>CSS example: 9.588 9.589 <p>Here, the <a href="#target-pseudo"><code>:target</code></a> 9.590 pseudo-class is used to make the target element red and place an image 9.591 - before it, if there is one:</p> 9.592 - 9.593 - <pre> 9.594 - *:target { color : red } 9.595 - *:target::before { content : url(target.png) }</pre> 9.596 + before it, if there is one: 9.597 + 9.598 + <pre><!-- 9.599 + -->*:target { color : red } 9.600 +<!-- 9.601 + -->*:target::before { content : url(target.png) }</pre> 9.602 </div> 9.603 9.604 <h3 id=the-scope-pseudo><span class=secno>7.5. </span> The contextual 9.605 @@ -2350,20 +2384,26 @@ 9.606 several pseudo-classes at the same time. 9.607 9.608 <div class=example> 9.609 - <p>Examples:</p> 9.610 - 9.611 - <pre>a:link /* unvisited links */ 9.612 - a:visited /* visited links */ 9.613 - a:hover /* user hovers */ 9.614 - a:active /* active links */</pre> 9.615 - 9.616 - <p>An example of combining dynamic pseudo-classes:</p> 9.617 - 9.618 - <pre>a:focus 9.619 - a:focus:hover</pre> 9.620 + <p>Examples: 9.621 + 9.622 + <pre><!-- 9.623 + -->a:link /* unvisited links */ 9.624 +<!-- 9.625 + -->a:visited /* visited links */ 9.626 +<!-- 9.627 + -->a:hover /* user hovers */ 9.628 +<!-- 9.629 + -->a:active /* active links */</pre> 9.630 + 9.631 + <p>An example of combining dynamic pseudo-classes: 9.632 + 9.633 + <pre><!-- 9.634 + -->a:focus 9.635 +<!-- 9.636 + -->a:focus:hover</pre> 9.637 9.638 <p>The last selector matches <code>a</code> elements that are in the 9.639 - pseudo-class :focus and in the pseudo-class :hover.</p> 9.640 + pseudo-class :focus and in the pseudo-class :hover. 9.641 </div> 9.642 9.643 <h3 id=the-hover-pseudo><span class=secno>8.1. </span> The pointer hover 9.644 @@ -2540,10 +2580,12 @@ 9.645 <p>For example, the following rule will highlight whichever paragraph or 9.646 list item is being read aloud in a speech rendering of the document: 9.647 9.648 - <pre> 9.649 -<!-- -->:current(p, li, dt, dd) { 9.650 -<!-- --> background: yellow; 9.651 -<!-- -->}</pre> 9.652 + <pre><!-- 9.653 + -->:current(p, li, dt, dd) { 9.654 +<!-- 9.655 + --> background: yellow; 9.656 +<!-- 9.657 + -->}</pre> 9.658 </div> 9.659 9.660 <h3 id=the-past-pseudo><span class=secno>9.2. </span> The past-element 9.661 @@ -2651,16 +2693,20 @@ 9.662 Two-letter or three-letter language codes."</a> 9.663 9.664 <div class=example> 9.665 - <p>Examples:</p> 9.666 + <p>Examples: 9.667 9.668 <p>The two following selectors represent an HTML document that is in 9.669 Belgian French or German. The two next selectors represent <code>q</code> 9.670 - quotations in an arbitrary element in Belgian French or German.</p> 9.671 - 9.672 - <pre>html:lang(fr-be) 9.673 - html:lang(de) 9.674 - :lang(fr-be) > q 9.675 - :lang(de) > q</pre> 9.676 + quotations in an arbitrary element in Belgian French or German. 9.677 + 9.678 + <pre><!-- 9.679 + -->html:lang(fr-be) 9.680 +<!-- 9.681 + -->html:lang(de) 9.682 +<!-- 9.683 + -->:lang(fr-be) > q 9.684 +<!-- 9.685 + -->:lang(de) > q</pre> 9.686 </div> 9.687 9.688 <p class=note>One difference between <code>:lang(C)</code> and the ‘<code 9.689 @@ -2674,12 +2720,14 @@ 9.690 <p>In this HTML example, only the BODY matches <code>[lang|=fr]</code> 9.691 (because it has a LANG attribute) but both the BODY and the P match 9.692 <code>:lang(fr)</code> (because both are in French). The P does not match 9.693 - the <code>[lang|=fr]</code> because it does not have a LANG attribute.</p> 9.694 - 9.695 - <pre> 9.696 - <body lang=fr> 9.697 - <p>Je suis français.</p> 9.698 - </body></pre> 9.699 + the <code>[lang|=fr]</code> because it does not have a LANG attribute. 9.700 + 9.701 + <pre><!-- 9.702 + --><body lang=fr> 9.703 +<!-- 9.704 + --> <p>Je suis français.</p> 9.705 +<!-- 9.706 + --></body></pre> 9.707 </div> 9.708 9.709 <div class=example> 9.710 @@ -2975,24 +3023,38 @@ 9.711 <code>[0-9]+</code> and the rest of the tokenization is given by the <a 9.712 href="#lex">Lexical scanner</a> in section 10.2: 9.713 9.714 - <pre>nth 9.715 - : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? | 9.716 - ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S* 9.717 - ;</pre> 9.718 + <pre><!-- 9.719 + -->nth 9.720 +<!-- 9.721 + -->: S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? | 9.722 +<!-- 9.723 + --> ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S* 9.724 +<!-- 9.725 + -->;</pre> 9.726 9.727 <div class=example> 9.728 - <p>Examples:</p> 9.729 - 9.730 - <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */ 9.731 - tr:nth-child(odd) /* same */ 9.732 - tr:nth-child(2n+0) /* represents every even row of an HTML table */ 9.733 - tr:nth-child(even) /* same */ 9.734 - 9.735 - /* Alternate paragraph colours in CSS */ 9.736 - p:nth-child(4n+1) { color: navy; } 9.737 - p:nth-child(4n+2) { color: green; } 9.738 - p:nth-child(4n+3) { color: maroon; } 9.739 - p:nth-child(4n+4) { color: purple; }</pre> 9.740 + <p>Examples: 9.741 + 9.742 + <pre><!-- 9.743 + -->tr:nth-child(2n+1) /* represents every odd row of an HTML table */ 9.744 +<!-- 9.745 + -->tr:nth-child(odd) /* same */ 9.746 +<!-- 9.747 + -->tr:nth-child(2n+0) /* represents every even row of an HTML table */ 9.748 +<!-- 9.749 + -->tr:nth-child(even) /* same */ 9.750 +<!-- 9.751 + --> 9.752 +<!-- 9.753 + -->/* Alternate paragraph colours in CSS */ 9.754 +<!-- 9.755 + -->p:nth-child(4n+1) { color: navy; } 9.756 +<!-- 9.757 + -->p:nth-child(4n+2) { color: green; } 9.758 +<!-- 9.759 + -->p:nth-child(4n+3) { color: maroon; } 9.760 +<!-- 9.761 + -->p:nth-child(4n+4) { color: purple; }</pre> 9.762 </div> 9.763 9.764 <p>When the value <var>b</var> is preceded by a negative sign, the "+" 9.765 @@ -3000,12 +3062,14 @@ 9.766 the "-" character indicating the negative value of <var>b</var>). 9.767 9.768 <div class=example> 9.769 - <p>Examples:</p> 9.770 - 9.771 - <pre> 9.772 - :nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */ 9.773 - :nth-child(10n+9) /* Same */ 9.774 - :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre> 9.775 + <p>Examples: 9.776 + 9.777 + <pre><!-- 9.778 + -->:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */ 9.779 +<!-- 9.780 + -->:nth-child(10n+9) /* Same */ 9.781 +<!-- 9.782 + -->:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre> 9.783 </div> 9.784 9.785 <p>When <var>a</var>=0, the <var>a</var><code>n</code> part need not be 9.786 @@ -3016,25 +3080,32 @@ 9.787 <code>:nth-child(<var>b</var>)</code>. 9.788 9.789 <div class=example> 9.790 - <p>Examples:</p> 9.791 - 9.792 - <pre>foo:nth-child(0n+5) /* represents an element foo that is the 5th child 9.793 - of its parent element */ 9.794 - foo:nth-child(5) /* same */</pre> 9.795 + <p>Examples: 9.796 + 9.797 + <pre><!-- 9.798 + -->foo:nth-child(0n+5) /* represents an element foo that is the 5th child 9.799 +<!-- 9.800 + --> of its parent element */ 9.801 +<!-- 9.802 + -->foo:nth-child(5) /* same */</pre> 9.803 </div> 9.804 9.805 <p>When <var>a</var>=1, or <var>a</var>=-1, the <code>1</code> may be 9.806 omitted from the rule. 9.807 9.808 <div class=example> 9.809 - <p>Examples:</p> 9.810 - 9.811 - <p>The following selectors are therefore equivalent:</p> 9.812 - 9.813 - <pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */ 9.814 - bar:nth-child(n+0) /* same */ 9.815 - bar:nth-child(n) /* same */ 9.816 - bar /* same but lower specificity (0,0,1) */</pre> 9.817 + <p>Examples: 9.818 + 9.819 + <p>The following selectors are therefore equivalent: 9.820 + 9.821 + <pre><!-- 9.822 + -->bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */ 9.823 +<!-- 9.824 + -->bar:nth-child(n+0) /* same */ 9.825 +<!-- 9.826 + -->bar:nth-child(n) /* same */ 9.827 +<!-- 9.828 + -->bar /* same but lower specificity (0,0,1) */</pre> 9.829 </div> 9.830 9.831 <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In such 9.832 @@ -3042,10 +3113,12 @@ 9.833 the <var>a</var> part is already omitted. 9.834 9.835 <div class=example> 9.836 - <p>Examples:</p> 9.837 - 9.838 - <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */ 9.839 - tr:nth-child(2n) /* same */</pre> 9.840 + <p>Examples: 9.841 + 9.842 + <pre><!-- 9.843 + -->tr:nth-child(2n+0) /* represents every even row of an HTML table */ 9.844 +<!-- 9.845 + -->tr:nth-child(2n) /* same */</pre> 9.846 </div> 9.847 9.848 <p>Whitespace is permitted after the "(", before the ")", and on either 9.849 @@ -3053,22 +3126,25 @@ 9.850 <var>b</var> parts when both are present. 9.851 9.852 <div class=example> 9.853 - <p>Valid Examples with white space:</p> 9.854 - 9.855 - <pre> 9.856 - :nth-child( 3n + 1 ) 9.857 - :nth-child( +3n - 2 ) 9.858 - :nth-child( -n+ 6) 9.859 - :nth-child( +6 ) 9.860 - </pre> 9.861 - 9.862 - <p>Invalid Examples with white space:</p> 9.863 - 9.864 - <pre> 9.865 - :nth-child(3 n) 9.866 - :nth-child(+ 2n) 9.867 - :nth-child(+ 2) 9.868 - </pre> 9.869 + <p>Valid Examples with white space: 9.870 + 9.871 + <pre><!-- 9.872 + -->:nth-child( 3n + 1 ) 9.873 +<!-- 9.874 + -->:nth-child( +3n - 2 ) 9.875 +<!-- 9.876 + -->:nth-child( -n+ 6) 9.877 +<!-- 9.878 + -->:nth-child( +6 )</pre> 9.879 + 9.880 + <p>Invalid Examples with white space: 9.881 + 9.882 + <pre><!-- 9.883 + -->:nth-child(3 n) 9.884 +<!-- 9.885 + -->:nth-child(+ 2n) 9.886 +<!-- 9.887 + -->:nth-child(+ 2)</pre> 9.888 </div> 9.889 9.890 <p>If both <var>a</var> and <var>b</var> are equal to zero, the 9.891 @@ -3079,7 +3155,7 @@ 9.892 represent an element in the document tree. 9.893 9.894 <div class=example> 9.895 - <p>Example:</p> 9.896 + <p>Example: 9.897 9.898 <pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre> 9.899 </div> 9.900 @@ -3100,12 +3176,16 @@ 9.901 class=css><code>odd</code></code>’ values as arguments. 9.902 9.903 <div class=example> 9.904 - <p>Examples:</p> 9.905 - 9.906 - <pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */ 9.907 - 9.908 - foo:nth-last-child(odd) /* represents all odd foo elements in their parent element, 9.909 - counting from the last one */</pre> 9.910 + <p>Examples: 9.911 + 9.912 + <pre><!-- 9.913 + -->tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */ 9.914 +<!-- 9.915 + --> 9.916 +<!-- 9.917 + -->foo:nth-last-child(odd) /* represents all odd foo elements in their parent element, 9.918 +<!-- 9.919 + --> counting from the last one */</pre> 9.920 </div> 9.921 9.922 <h3 id=the-nth-of-type-pseudo><span class=secno>12.4. </span> <a 9.923 @@ -3123,12 +3203,14 @@ 9.924 class=css><code>odd</code></code>’ values. 9.925 9.926 <div class=example> 9.927 - <p>CSS example:</p> 9.928 - 9.929 - <p>This allows an author to alternate the position of floated images:</p> 9.930 - 9.931 - <pre>img:nth-of-type(2n+1) { float: right; } 9.932 - img:nth-of-type(2n) { float: left; }</pre> 9.933 + <p>CSS example: 9.934 + 9.935 + <p>This allows an author to alternate the position of floated images: 9.936 + 9.937 + <pre><!-- 9.938 + -->img:nth-of-type(2n+1) { float: right; } 9.939 +<!-- 9.940 + -->img:nth-of-type(2n) { float: left; }</pre> 9.941 </div> 9.942 9.943 <h3 id=the-nth-last-of-type-pseudo><span class=secno>12.5. </span> <a 9.944 @@ -3146,18 +3228,18 @@ 9.945 class=css><code>odd</code></code>’ values. 9.946 9.947 <div class=example> 9.948 - <p>Example:</p> 9.949 + <p>Example: 9.950 9.951 <p>To represent all <code>h2</code> children of an XHTML <code>body</code> 9.952 - except the first and last, one could use the following selector:</p> 9.953 - 9.954 - <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre> 9.955 + except the first and last, one could use the following selector: 9.956 + 9.957 + <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre> 9.958 9.959 <p>In this case, one could also use <a 9.960 href="#negation-pseudo"><code>:not()</code></a>, although the selector 9.961 - ends up being just as long:</p> 9.962 - 9.963 - <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre> 9.964 + ends up being just as long: 9.965 + 9.966 + <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre> 9.967 </div> 9.968 9.969 <h3 id=the-nth-match-pseudo><span class=secno>12.6. </span> <a 9.970 @@ -3204,34 +3286,42 @@ 9.971 element that is the first child of some other element. 9.972 9.973 <div class=example> 9.974 - <p>Examples:</p> 9.975 + <p>Examples: 9.976 9.977 <p>The following selector represents a <code>p</code> element that is the 9.978 - first child of a <code>div</code> element:</p> 9.979 - 9.980 - <pre>div > p:first-child</pre> 9.981 + first child of a <code>div</code> element: 9.982 + 9.983 + <pre>div > p:first-child</pre> 9.984 9.985 <p>This selector can represent the <code>p</code> inside the 9.986 - <code>div</code> of the following fragment:</p> 9.987 - 9.988 - <pre> 9.989 - <p> The last P before the note.</p> 9.990 - <div class="note"> 9.991 - <p> The first P inside the note.</p> 9.992 - </div></pre> 9.993 + <code>div</code> of the following fragment: 9.994 + 9.995 + <pre><!-- 9.996 + --><p> The last P before the note.</p> 9.997 +<!-- 9.998 + --><div class="note"> 9.999 +<!-- 9.1000 + --><p> The first P inside the note.</p> 9.1001 +<!-- 9.1002 + --></div></pre> 9.1003 but cannot represent the second <code>p</code> in the following fragment: 9.1004 - <pre> 9.1005 - <p> The last P before the note.</p> 9.1006 - <div class="note"> 9.1007 - <h2> Note </h2> 9.1008 - <p> The first P inside the note.</p> 9.1009 - </div></pre> 9.1010 - 9.1011 - <p>The following two selectors are usually equivalent:</p> 9.1012 - 9.1013 - <pre> 9.1014 - * > a:first-child /* a is first child of any element */ 9.1015 - a:first-child /* Same (assuming a is not the root element) */</pre> 9.1016 + <pre><!-- 9.1017 + --><p> The last P before the note.</p> 9.1018 +<!-- 9.1019 + --><div class="note"> 9.1020 +<!-- 9.1021 + --><h2> Note </h2> 9.1022 +<!-- 9.1023 + --><p> The first P inside the note.</p> 9.1024 +<!-- 9.1025 + --></div></pre> 9.1026 + 9.1027 + <p>The following two selectors are usually equivalent: 9.1028 + 9.1029 + <pre><!-- 9.1030 + -->* > a:first-child /* a is first child of any element */ 9.1031 +<!-- 9.1032 + -->a:first-child /* Same (assuming a is not the root element) */</pre> 9.1033 </div> 9.1034 9.1035 <h3 id=the-last-child-pseudo><span class=secno>12.9. </span> <a 9.1036 @@ -3242,12 +3332,12 @@ 9.1037 that is the last child of some other element. 9.1038 9.1039 <div class=example> 9.1040 - <p>Example:</p> 9.1041 + <p>Example: 9.1042 9.1043 <p>The following selector represents a list item <code>li</code> that is 9.1044 the last child of an ordered list <code>ol</code>. 9.1045 9.1046 - <pre>ol > li:last-child</pre> 9.1047 + <pre>ol > li:last-child</pre> 9.1048 </div> 9.1049 9.1050 <h3 id=the-first-of-type-pseudo><span class=secno>12.10. </span> <a 9.1051 @@ -3259,29 +3349,39 @@ 9.1052 its parent element. 9.1053 9.1054 <div class=example> 9.1055 - <p>Example:</p> 9.1056 + <p>Example: 9.1057 9.1058 <p>The following selector represents a definition title <code>dt</code> 9.1059 inside a definition list <code>dl</code>, this <code>dt</code> being the 9.1060 - first of its type in the list of children of its parent element.</p> 9.1061 + first of its type in the list of children of its parent element. 9.1062 9.1063 <pre>dl dt:first-of-type</pre> 9.1064 9.1065 <p>It is a valid description for the first two <code>dt</code> elements in 9.1066 - the following example but not for the third one:</p> 9.1067 - 9.1068 - <pre> 9.1069 - <dl> 9.1070 - <dt>gigogne</dt> 9.1071 - <dd> 9.1072 - <dl> 9.1073 - <dt>fusée</dt> 9.1074 - <dd>multistage rocket</dd> 9.1075 - <dt>table</dt> 9.1076 - <dd>nest of tables</dd> 9.1077 - </dl> 9.1078 - </dd> 9.1079 - </dl></pre> 9.1080 + the following example but not for the third one: 9.1081 + 9.1082 + <pre><!-- 9.1083 + --><dl> 9.1084 +<!-- 9.1085 + --><dt>gigogne</dt> 9.1086 +<!-- 9.1087 + --><dd> 9.1088 +<!-- 9.1089 + --><dl> 9.1090 +<!-- 9.1091 + --><dt>fusée</dt> 9.1092 +<!-- 9.1093 + --><dd>multistage rocket</dd> 9.1094 +<!-- 9.1095 + --><dt>table</dt> 9.1096 +<!-- 9.1097 + --><dd>nest of tables</dd> 9.1098 +<!-- 9.1099 + --></dl> 9.1100 +<!-- 9.1101 + --></dd> 9.1102 +<!-- 9.1103 + --></dl></pre> 9.1104 </div> 9.1105 9.1106 <h3 id=the-last-of-type-pseudo><span class=secno>12.11. </span> <a 9.1107 @@ -3293,12 +3393,12 @@ 9.1108 its parent element. 9.1109 9.1110 <div class=example> 9.1111 - <p>Example:</p> 9.1112 + <p>Example: 9.1113 9.1114 <p>The following selector represents the last data cell <code>td</code> of 9.1115 - a table row <code>tr</code>.</p> 9.1116 - 9.1117 - <pre>tr > td:last-of-type</pre> 9.1118 + a table row <code>tr</code>. 9.1119 + 9.1120 + <pre>tr > td:last-of-type</pre> 9.1121 </div> 9.1122 9.1123 <h3 id=the-only-child-pseudo><span class=secno>12.12. </span> <a 9.1124 @@ -3333,21 +3433,21 @@ 9.1125 considered empty or not. 9.1126 9.1127 <div class=example> 9.1128 - <p>Examples:</p> 9.1129 + <p>Examples: 9.1130 9.1131 <p><code>p:empty</code> is a valid representation of the following 9.1132 - fragment:</p> 9.1133 - 9.1134 - <pre><p></p></pre> 9.1135 + fragment: 9.1136 + 9.1137 + <pre><p></p></pre> 9.1138 9.1139 <p><code>foo:empty</code> is not a valid representation for the following 9.1140 - fragments:</p> 9.1141 - 9.1142 - <pre><foo>bar</foo></pre> 9.1143 - 9.1144 - <pre><foo><bar>bla</bar></foo></pre> 9.1145 - 9.1146 - <pre><foo>this is not <bar>:empty</bar></foo></pre> 9.1147 + fragments: 9.1148 + 9.1149 + <pre><foo>bar</foo></pre> 9.1150 + 9.1151 + <pre><foo><bar>bla</bar></foo></pre> 9.1152 + 9.1153 + <pre><foo>this is not <bar>:empty</bar></foo></pre> 9.1154 </div> 9.1155 9.1156 <h2 id=combinators><span class=secno>13. </span> Combinators</h2> 9.1157 @@ -3366,21 +3466,22 @@ 9.1158 arbitrary descendant of some ancestor element <code>A</code>. 9.1159 9.1160 <div class=example> 9.1161 - <p>Examples:</p> 9.1162 - 9.1163 - <p>For example, consider the following selector:</p> 9.1164 + <p>Examples: 9.1165 + 9.1166 + <p>For example, consider the following selector: 9.1167 9.1168 <pre>h1 em</pre> 9.1169 9.1170 <p>It represents an <code>em</code> element being the descendant of an 9.1171 <code>h1</code> element. It is a correct and valid, but partial, 9.1172 - description of the following fragment:</p> 9.1173 - 9.1174 - <pre> 9.1175 - <h1>This <span class="myclass">headline 9.1176 - is <em>very</em> important</span></h1></pre> 9.1177 - 9.1178 - <p>The following selector:</p> 9.1179 + description of the following fragment: 9.1180 + 9.1181 + <pre><!-- 9.1182 + --><h1>This <span class="myclass">headline 9.1183 +<!-- 9.1184 + -->is <em>very</em> important</span></h1></pre> 9.1185 + 9.1186 + <p>The following selector: 9.1187 9.1188 <pre>div * p</pre> 9.1189 9.1190 @@ -3389,12 +3490,12 @@ 9.1191 side of the "*" is not part of the universal selector; the whitespace is 9.1192 a combinator indicating that the <code>div</code> must be the ancestor of 9.1193 some element, and that that element must be an ancestor of the 9.1194 - <code>p</code>.</p> 9.1195 + <code>p</code>. 9.1196 9.1197 <p>The following selector, which combines descendant combinators and <a 9.1198 href="#attribute-selectors">attribute selectors</a>, represents an 9.1199 element that (1) has the <code>href</code> attribute set and (2) is 9.1200 - inside a <code>p</code> that is itself inside a <code>div</code>:</p> 9.1201 + inside a <code>p</code> that is itself inside a <code>div</code>: 9.1202 9.1203 <pre>div p *[href]</pre> 9.1204 </div> 9.1205 @@ -3403,27 +3504,27 @@ 9.1206 9.1207 <p>A <dfn id=child-combinator>child combinator</dfn> describes a childhood 9.1208 relationship between two elements. A child combinator is made of the 9.1209 - "greater-than sign" (U+003E, <code>></code>) character and 9.1210 + "greater-than sign" (U+003E, <code>></code>) character and 9.1211 separates two <a href="#compound"><i>compound selectors</i></a>. 9.1212 9.1213 <div class=example> 9.1214 - <p>Examples:</p> 9.1215 + <p>Examples: 9.1216 9.1217 <p>The following selector represents a <code>p</code> element that is 9.1218 - child of <code>body</code>:</p> 9.1219 - 9.1220 - <pre>body > p</pre> 9.1221 + child of <code>body</code>: 9.1222 + 9.1223 + <pre>body > p</pre> 9.1224 9.1225 <p>The following example combines descendant combinators and child 9.1226 - combinators.</p> 9.1227 - 9.1228 - <pre>div ol>li p</pre> 9.1229 + combinators. 9.1230 + 9.1231 + <pre>div ol>li p</pre> 9.1232 <!-- LEAVE THOSE SPACES OUT! see below --> 9.1233 <p>It represents a <code>p</code> element that is a descendant of an 9.1234 <code>li</code> element; the <code>li</code> element must be the child of 9.1235 an <code>ol</code> element; the <code>ol</code> element must be a 9.1236 descendant of a <code>div</code>. Notice that the optional white space 9.1237 - around the ">" combinator has been left out.</p> 9.1238 + around the ">" combinator has been left out. 9.1239 </div> 9.1240 9.1241 <p>For information on selecting the first child of an element, please see 9.1242 @@ -3444,17 +3545,17 @@ 9.1243 when considering the adjacency of elements. 9.1244 9.1245 <div class=example> 9.1246 - <p>Examples:</p> 9.1247 + <p>Examples: 9.1248 9.1249 <p>The following selector represents a <code>p</code> element immediately 9.1250 - following a <code>math</code> element:</p> 9.1251 + following a <code>math</code> element: 9.1252 9.1253 <pre>math + p</pre> 9.1254 9.1255 <p>The following selector is conceptually similar to the one in the 9.1256 previous example, except that it adds an attribute selector — it adds a 9.1257 constraint to the <code>h1</code> element, that it must have 9.1258 - <code>class="opener"</code>:</p> 9.1259 + <code>class="opener"</code>: 9.1260 9.1261 <pre>h1.opener + h2</pre> 9.1262 </div> 9.1263 @@ -3472,17 +3573,17 @@ 9.1264 the second one. 9.1265 9.1266 <div class=example> 9.1267 - <p>Example:</p> 9.1268 + <p>Example: 9.1269 9.1270 <pre>h1 ~ pre</pre> 9.1271 9.1272 <p>represents a <code>pre</code> element following an <code>h1</code>. It 9.1273 - is a correct and valid, but partial, description of:</p> 9.1274 + is a correct and valid, but partial, description of: 9.1275 9.1276 <pre> 9.1277 - <h1>Definition of the function a</h1> 9.1278 - <p>Function a(x) has to be applied to all figures in the table.</p> 9.1279 - <pre>function a(x) = 12x/13.5</pre></pre> 9.1280 + <h1>Definition of the function a</h1> 9.1281 + <p>Function a(x) has to be applied to all figures in the table.</p> 9.1282 + <pre>function a(x) = 12x/13.5</pre></pre> 9.1283 </div> 9.1284 9.1285 <h3 id=idref-combinators><span class=secno>13.5. </span> Reference 9.1286 @@ -3506,17 +3607,23 @@ 9.1287 selectors</a>. 9.1288 9.1289 <div class=example> 9.1290 - <p>The following example highlights an <code><input></code> element 9.1291 + <p>The following example highlights an <code><input></code> element 9.1292 when its <a 9.1293 - href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code><label></code></a> 9.1294 - is focused or hovered-over:</p> 9.1295 - 9.1296 - <pre>label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */ 9.1297 -<!-- -->label:matches(:hover, :focus):not([for]) input { /* association by containment */ 9.1298 -<!-- --> box-shadow: yellow 0 0 10px; }</pre> 9.1299 + href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code><label></code></a> 9.1300 + is focused or hovered-over: 9.1301 + 9.1302 + <pre><!-- 9.1303 + -->label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */ 9.1304 +<!-- 9.1305 + -->label:matches(:hover, :focus):not([for]) input { /* association by containment */ 9.1306 +<!-- 9.1307 + -->box-shadow: yellow 0 0 10px; 9.1308 +<!-- 9.1309 + -->}</pre> 9.1310 </div> 9.1311 9.1312 <p class=issue>This could also be implemented as a functional pseudo-class. 9.1313 + 9.1314 9.1315 <h2 id=column-selectors><span class=secno>14. </span> Grid-Structural 9.1316 Selectors</h2> 9.1317 @@ -3546,18 +3653,24 @@ 9.1318 represented by a selector indicating membership in any of those columns. 9.1319 9.1320 <div class=example> 9.1321 - <p>The following example makes cells C, E, and G yellow.</p> 9.1322 + <p>The following example makes cells C, E, and G yellow. 9.1323 9.1324 <pre>col.selected || td { background: yellow; }</pre> 9.1325 9.1326 - <pre> 9.1327 -<!-- --><table> 9.1328 -<!-- --> <col span="2"> 9.1329 -<!-- --> <col class="selected"> 9.1330 -<!-- --> <tr><td>A <td>B <td>C 9.1331 -<!-- --> <tr><td span="2">D <td>E 9.1332 -<!-- --> <tr><td>F <td span="2">G 9.1333 -<!-- --></table></pre> 9.1334 + <pre><!-- 9.1335 + --><table> 9.1336 +<!-- 9.1337 + --> <col span="2"> 9.1338 +<!-- 9.1339 + --> <col class="selected"> 9.1340 +<!-- 9.1341 + --> <tr><td>A <td>B <td>C 9.1342 +<!-- 9.1343 + --> <tr><td span="2">D <td>E 9.1344 +<!-- 9.1345 + --> <tr><td>F <td span="2">G 9.1346 +<!-- 9.1347 + --></table></pre> 9.1348 </div> 9.1349 9.1350 <h3 id=the-nth-column-pseudo><span class=secno>14.2. </span> <a 9.1351 @@ -3628,19 +3741,23 @@ 9.1352 base) gives the specificity. 9.1353 9.1354 <div class=example> 9.1355 - <p>Examples:</p> 9.1356 - 9.1357 - <pre> 9.1358 - * /* a=0 b=0 c=0 -> specificity = 0 */ 9.1359 - LI /* a=0 b=0 c=1 -> specificity = 1 */ 9.1360 - UL LI /* a=0 b=0 c=2 -> specificity = 2 */ 9.1361 - UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */ 9.1362 - H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ 9.1363 - UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ 9.1364 - LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ 9.1365 - #x34y /* a=1 b=0 c=0 -> specificity = 100 */ 9.1366 - #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */ 9.1367 - </pre> 9.1368 + <p>Examples: id="the-" <!-- 9.1369 + -->* /* a=0 b=0 c=0 -> specificity = 0 */ 9.1370 + <!-- 9.1371 + -->LI /* a=0 b=0 c=1 -> specificity = 1 */ <!-- 9.1372 + -->UL LI /* 9.1373 + a=0 b=0 c=2 -> specificity = 2 */ <!-- 9.1374 + -->UL OL+LI /* a=0 b=0 c=3 -> 9.1375 + specificity = 3 */ <!-- 9.1376 + -->H1 + *[REL=up] /* a=0 b=1 c=1 -> 9.1377 + specificity = 11 */ <!-- 9.1378 + -->UL OL LI.red /* a=0 b=1 c=3 -> 9.1379 + specificity = 13 */ <!-- 9.1380 + -->LI.red.level /* a=0 b=2 c=1 -> 9.1381 + specificity = 21 */ <!-- 9.1382 + -->#x34y /* a=1 b=0 c=0 -> specificity = 100 9.1383 + */ <!-- 9.1384 + -->#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */ 9.1385 </div> 9.1386 9.1387 <p class=note><strong>Note:</strong> Repeated occurrances of the same 9.1388 @@ -3677,81 +3794,82 @@ 9.1389 9.1390 <p>The productions are: 9.1391 9.1392 - <pre>selectors_group 9.1393 - : selector [ COMMA S* selector ]* 9.1394 - ; 9.1395 - 9.1396 - selector 9.1397 - : compound_selector [ combinator simple_selector_sequence ]* 9.1398 - ; 9.1399 - 9.1400 - combinator 9.1401 - /* combinators can be surrounded by whitespace */ 9.1402 - : PLUS S* | GREATER S* | TILDE S* | S+ 9.1403 - ; 9.1404 - 9.1405 - simple_selector_sequence 9.1406 - : [ type_selector | universal ] 9.1407 - [ HASH | class | attrib | pseudo | negation ]* 9.1408 - | [ HASH | class | attrib | pseudo | negation ]+ 9.1409 - ; 9.1410 - 9.1411 - type_selector 9.1412 - : [ namespace_prefix ]? element_name 9.1413 - ; 9.1414 - 9.1415 - namespace_prefix 9.1416 - : [ IDENT | '*' ]? '|' 9.1417 - ; 9.1418 - 9.1419 - element_name 9.1420 - : IDENT 9.1421 - ; 9.1422 - 9.1423 - universal 9.1424 - : [ namespace_prefix ]? '*' 9.1425 - ; 9.1426 - 9.1427 - class 9.1428 - : '.' IDENT 9.1429 - ; 9.1430 - 9.1431 - attrib 9.1432 - : '[' S* [ namespace_prefix ]? IDENT S* 9.1433 - [ [ PREFIXMATCH | 9.1434 - SUFFIXMATCH | 9.1435 - SUBSTRINGMATCH | 9.1436 - '=' | 9.1437 - INCLUDES | 9.1438 - DASHMATCH ] S* [ IDENT | STRING ] S* [IDENT S*]? 9.1439 - ]? ']' 9.1440 - ; 9.1441 - 9.1442 - pseudo 9.1443 - /* '::' starts a pseudo-element, ':' a pseudo-class */ 9.1444 - /* Exceptions: :first-line, :first-letter, :before and :after. */ 9.1445 - /* Note that pseudo-elements are restricted to one per selector and */ 9.1446 - /* occur only in the last compound_selector. */ 9.1447 - : ':' ':'? [ IDENT | functional_pseudo ] 9.1448 - ; 9.1449 - 9.1450 - functional_pseudo 9.1451 - : FUNCTION S* expression ')' 9.1452 - ; 9.1453 - 9.1454 - expression 9.1455 - /* In CSS3, the expressions are identifiers, strings, */ 9.1456 - /* or of the form "an+b" */ 9.1457 - : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+ 9.1458 - ; 9.1459 - 9.1460 - negation 9.1461 - : NOT S* negation_arg S* ')' 9.1462 - ; 9.1463 - 9.1464 - negation_arg 9.1465 - : type_selector | universal | HASH | class | attrib | pseudo 9.1466 - ;</pre> 9.1467 + <pre> 9.1468 + selectors_group 9.1469 + : selector [ COMMA S* selector ]* 9.1470 + ; 9.1471 + 9.1472 + selector 9.1473 + : compound_selector [ combinator simple_selector_sequence ]* 9.1474 + ; 9.1475 + 9.1476 + combinator 9.1477 + /* combinators can be surrounded by whitespace */ 9.1478 + : PLUS S* | GREATER S* | TILDE S* | S+ 9.1479 + ; 9.1480 + 9.1481 + simple_selector_sequence 9.1482 + : [ type_selector | universal ] 9.1483 + [ HASH | class | attrib | pseudo | negation ]* 9.1484 + | [ HASH | class | attrib | pseudo | negation ]+ 9.1485 + ; 9.1486 + 9.1487 + type_selector 9.1488 + : [ namespace_prefix ]? element_name 9.1489 + ; 9.1490 + 9.1491 + namespace_prefix 9.1492 + : [ IDENT | '*' ]? '|' 9.1493 + ; 9.1494 + 9.1495 + element_name 9.1496 + : IDENT 9.1497 + ; 9.1498 + 9.1499 + universal 9.1500 + : [ namespace_prefix ]? '*' 9.1501 + ; 9.1502 + 9.1503 + class 9.1504 + : '.' IDENT 9.1505 + ; 9.1506 + 9.1507 + attrib 9.1508 + : '[' S* [ namespace_prefix ]? IDENT S* 9.1509 + [ [ PREFIXMATCH | 9.1510 + SUFFIXMATCH | 9.1511 + SUBSTRINGMATCH | 9.1512 + '=' | 9.1513 + INCLUDES | 9.1514 + DASHMATCH ] S* [ IDENT | STRING ] S* [IDENT S*]? 9.1515 + ]? ']' 9.1516 + ; 9.1517 + 9.1518 + pseudo 9.1519 + /* '::' starts a pseudo-element, ':' a pseudo-class */ 9.1520 + /* Exceptions: :first-line, :first-letter, :before and :after. */ 9.1521 + /* Note that pseudo-elements are restricted to one per selector and */ 9.1522 + /* occur only in the last compound_selector. */ 9.1523 + : ':' ':'? [ IDENT | functional_pseudo ] 9.1524 + ; 9.1525 + 9.1526 + functional_pseudo 9.1527 + : FUNCTION S* expression ')' 9.1528 + ; 9.1529 + 9.1530 + expression 9.1531 + /* In CSS3, the expressions are identifiers, strings, */ 9.1532 + /* or of the form "an+b" */ 9.1533 + : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+ 9.1534 + ; 9.1535 + 9.1536 + negation 9.1537 + : NOT S* negation_arg S* ')' 9.1538 + ; 9.1539 + 9.1540 + negation_arg 9.1541 + : type_selector | universal | HASH | class | attrib | pseudo 9.1542 + ;</pre> 9.1543 9.1544 <h3 id=lex><span class=secno>16.2. </span> Lexical scanner</h3> 9.1545 9.1546 @@ -3765,62 +3883,116 @@ 9.1547 point in Unicode/ISO-10646. <a href="#UNICODE" 9.1548 rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a> 9.1549 9.1550 - <pre> 9.1551 - %option case-insensitive 9.1552 - 9.1553 - ident [-]?{nmstart}{nmchar}* 9.1554 - name {nmchar}+ 9.1555 - nmstart [_a-z]|{nonascii}|{escape} 9.1556 - nonascii [^\0-\177] 9.1557 - unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])? 9.1558 - escape {unicode}|\\[^\n\r\f0-9a-f] 9.1559 - nmchar [_a-z0-9-]|{nonascii}|{escape} 9.1560 - num [0-9]+|[0-9]*\.[0-9]+ 9.1561 - string {string1}|{string2} 9.1562 - string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\" 9.1563 - string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\' 9.1564 - invalid {invalid1}|{invalid2} 9.1565 - invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})* 9.1566 - invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})* 9.1567 - nl \n|\r\n|\r|\f 9.1568 - w [ \t\r\n\f]* 9.1569 - 9.1570 - D d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])? 9.1571 - E e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])? 9.1572 - N n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n 9.1573 - O o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o 9.1574 - T t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t 9.1575 - V v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v 9.1576 - 9.1577 - %% 9.1578 - 9.1579 - [ \t\r\n\f]+ return S; 9.1580 - 9.1581 - "~=" return INCLUDES; 9.1582 - "|=" return DASHMATCH; 9.1583 - "^=" return PREFIXMATCH; 9.1584 - "$=" return SUFFIXMATCH; 9.1585 - "*=" return SUBSTRINGMATCH; 9.1586 - {ident} return IDENT; 9.1587 - {string} return STRING; 9.1588 - {ident}"(" return FUNCTION; 9.1589 - {num} return NUMBER; 9.1590 - "#"{name} return HASH; 9.1591 - {w}"+" return PLUS; 9.1592 - {w}">" return GREATER; 9.1593 - {w}"," return COMMA; 9.1594 - {w}"~" return TILDE; 9.1595 - ":"{N}{O}{T}"(" return NOT; 9.1596 - @{ident} return ATKEYWORD; 9.1597 - {invalid} return INVALID; 9.1598 - {num}% return PERCENTAGE; 9.1599 - {num}{ident} return DIMENSION; 9.1600 - "<!--" return CDO; 9.1601 - "-->" return CDC; 9.1602 - 9.1603 - \/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */ 9.1604 - 9.1605 - . return *yytext;</pre> 9.1606 + <pre><!-- 9.1607 + -->%option case-insensitive 9.1608 +<!-- 9.1609 + --> 9.1610 +<!-- 9.1611 + -->ident [-]?{nmstart}{nmchar}* 9.1612 +<!-- 9.1613 + -->name {nmchar}+ 9.1614 +<!-- 9.1615 + -->nmstart [_a-z]|{nonascii}|{escape} 9.1616 +<!-- 9.1617 + -->nonascii [^\0-\177] 9.1618 +<!-- 9.1619 + -->unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])? 9.1620 +<!-- 9.1621 + -->escape {unicode}|\\[^\n\r\f0-9a-f] 9.1622 +<!-- 9.1623 + -->nmchar [_a-z0-9-]|{nonascii}|{escape} 9.1624 +<!-- 9.1625 + -->num [0-9]+|[0-9]*\.[0-9]+ 9.1626 +<!-- 9.1627 + -->string {string1}|{string2} 9.1628 +<!-- 9.1629 + -->string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\" 9.1630 +<!-- 9.1631 + -->string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\' 9.1632 +<!-- 9.1633 + -->invalid {invalid1}|{invalid2} 9.1634 +<!-- 9.1635 + -->invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})* 9.1636 +<!-- 9.1637 + -->invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})* 9.1638 +<!-- 9.1639 + -->nl \n|\r\n|\r|\f 9.1640 +<!-- 9.1641 + -->w [ \t\r\n\f]* 9.1642 +<!-- 9.1643 + --> 9.1644 +<!-- 9.1645 + -->D d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])? 9.1646 +<!-- 9.1647 + -->E e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])? 9.1648 +<!-- 9.1649 + -->N n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n 9.1650 +<!-- 9.1651 + -->O o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o 9.1652 +<!-- 9.1653 + -->T t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t 9.1654 +<!-- 9.1655 + -->V v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v 9.1656 +<!-- 9.1657 + --> 9.1658 +<!-- 9.1659 + -->%% 9.1660 +<!-- 9.1661 + --> 9.1662 +<!-- 9.1663 + -->[ \t\r\n\f]+ return S; 9.1664 +<!-- 9.1665 + --> 9.1666 +<!-- 9.1667 + -->"~=" return INCLUDES; 9.1668 +<!-- 9.1669 + -->"|=" return DASHMATCH; 9.1670 +<!-- 9.1671 + -->"^=" return PREFIXMATCH; 9.1672 +<!-- 9.1673 + -->"$=" return SUFFIXMATCH; 9.1674 +<!-- 9.1675 + -->"*=" return SUBSTRINGMATCH; 9.1676 +<!-- 9.1677 + -->{ident} return IDENT; 9.1678 +<!-- 9.1679 + -->{string} return STRING; 9.1680 +<!-- 9.1681 + -->{ident}"(" return FUNCTION; 9.1682 +<!-- 9.1683 + -->{num} return NUMBER; 9.1684 +<!-- 9.1685 + -->"#"{name} return HASH; 9.1686 +<!-- 9.1687 + -->{w}"+" return PLUS; 9.1688 +<!-- 9.1689 + -->{w}">" return GREATER; 9.1690 +<!-- 9.1691 + -->{w}"," return COMMA; 9.1692 +<!-- 9.1693 + -->{w}"~" return TILDE; 9.1694 +<!-- 9.1695 + -->":"{N}{O}{T}"(" return NOT; 9.1696 +<!-- 9.1697 + -->@{ident} return ATKEYWORD; 9.1698 +<!-- 9.1699 + -->{invalid} return INVALID; 9.1700 +<!-- 9.1701 + -->{num}% return PERCENTAGE; 9.1702 +<!-- 9.1703 + -->{num}{ident} return DIMENSION; 9.1704 +<!-- 9.1705 + -->"<!--" return CDO; 9.1706 +<!-- 9.1707 + -->"-->" return CDC; 9.1708 +<!-- 9.1709 + --> 9.1710 +<!-- 9.1711 + -->\/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */ 9.1712 +<!-- 9.1713 + --> 9.1714 +<!-- 9.1715 + -->. return *yytext;</pre> 9.1716 9.1717 <h2 id=profiling><span class=secno>17. </span> Profiles</h2> 9.1718 9.1719 @@ -3981,7 +4153,7 @@ 9.1720 <code>class="example"</code>, like this: 9.1721 9.1722 <div class=example> 9.1723 - <p>This is an example of an informative example.</p> 9.1724 + <p>This is an example of an informative example. 9.1725 </div> 9.1726 9.1727 <p>Informative notes begin with the word “Note” and are set apart from 9.1728 @@ -4054,16 +4226,16 @@ 9.1729 names. This avoids any incompatibilities with future changes in the draft. 9.1730 Once a specification reaches the Candidate Recommendation stage, 9.1731 implementors should implement the non-prefixed syntax for any feature they 9.1732 - consider to be correctly implemented according to spec.</p> 9.1733 - <!-- 9.1734 + consider to be correctly implemented according to spec. <!-- 9.1735 <h2 id="Tests">Tests</h2> 9.1736 9.1737 <p>This specification has <a 9.1738 href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test 9.1739 suite</a> allowing user agents to verify their basic conformance to 9.1740 the specification. This test suite does not pretend to be exhaustive 9.1741 - and does not cover all possible combined cases of Selectors.</p> 9.1742 + and does not cover all possible combined cases of Selectors. 9.1743 --> 9.1744 + 9.1745 9.1746 <h2 id=acknowledgements><span class=secno>19. </span> Acknowledgements</h2> 9.1747
10.1 --- a/selectors4/Overview.src.html Fri Aug 17 23:46:15 2012 +0200 10.2 +++ b/selectors4/Overview.src.html Fri Aug 17 23:51:31 2012 +0200 10.3 @@ -43,7 +43,7 @@ 10.4 10.5 <dt>Previous Editors: 10.6 <dd class="vcard"><a lang="tr" class="url fn" href="http://www.tantek.com/">Tantek Çelik</a> (Microsoft) 10.7 - <dd class="vcard"><span class="fn">Daniel Glazman</span> (Disruptive Innovations SARL)</dd> 10.8 + <dd class="vcard"><span class="fn">Daniel Glazman</span> (Disruptive Innovations SARL) 10.9 <dd class="vcard"><span class="fn">Ian Hickson</span> (Opera Softare ASA) 10.10 <dd class="vcard"><span class="fn">Peter Linss</span> (Netscape/AOL) 10.11 <dd class="vcard"><span class="fn">John Williams</span> (Quark, Inc.) 10.12 @@ -65,11 +65,11 @@ 10.13 performance-critical code. They are a core component of 10.14 <abbr title="Cascading Style Sheets">CSS</abbr> (Cascading 10.15 Style Sheets), which uses Selectors to bind style properties to 10.16 - elements in the document.</p> 10.17 + elements in the document. 10.18 10.19 <p>Selectors Level 4 describes the selectors that already exist in 10.20 [[!SELECT]], and further introduces new selectors for CSS and 10.21 - other languages that may need them.</p> 10.22 + other languages that may need them. 10.23 10.24 <h2 class="no-num no-toc" id="status">Status of this Document</h2> 10.25 10.26 @@ -100,49 +100,63 @@ 10.27 <p> 10.28 A selector is a boolean predicate 10.29 that takes an element in a tree structure 10.30 - and answers whether the element matches the selector or not. 10.31 + and tests whether the element matches the selector or not. 10.32 10.33 <p> 10.34 - These expressions can be used directly on an element to test whether it matches some criteria, 10.35 - such as in the <code>Element.matches()</code> function defined in [[SELECTORS-API2]], 10.36 - or alternately, 10.37 - can be applied to an entire tree of elements 10.38 - to filter it into a set of elements that match the criteria, 10.39 - such as in the selector in a CSS style rule. 10.40 - 10.41 - <p>Selectors Levels 1, 2, and 3 are defined as the subsets of selector 10.42 - functionality defined in the <a href="http://www.w3.org/TR/REC-CSS1">CSS1</a>, 10.43 - <a href="http://www.w3.org/TR/CSS21/">CSS2.1</a>, and 10.44 - <a href="http://www.w3.org/TR/css3-selectors/">Selectors Level 3</a> 10.45 - specifications, respectively. This module defines Selectors Level 4. 10.46 + These expressions may be used for many things: 10.47 + 10.48 + <ul> 10.49 + <li> 10.50 + directly on an element to test whether it matches some criteria, 10.51 + such as in the <code>Element.matches()</code> function defined in [[SELECTORS-API2]] 10.52 + 10.53 + <li> 10.54 + applied to an entire tree of elements 10.55 + to filter it into a set of elements that match the criteria, 10.56 + such as in the <code>document.findAll()</code> function defined in [[SELECTORS-API2]] 10.57 + or the selector of a CSS style rule. 10.58 + 10.59 + <li> 10.60 + used "in reverse" to generate markup that would match a given selector, 10.61 + such as in <a href="http://haml.info/">HAML</a> or <a href="http://en.wikipedia.org/wiki/Zen_Coding">Zen Coding</a> 10.62 + </ul> 10.63 + 10.64 + 10.65 + <p> 10.66 + Selectors Levels 1, 2, and 3 are defined as the subsets of selector 10.67 + functionality defined in the <a href="http://www.w3.org/TR/REC-CSS1">CSS1</a>, 10.68 + <a href="http://www.w3.org/TR/CSS21/">CSS2.1</a>, and 10.69 + <a href="http://www.w3.org/TR/css3-selectors/">Selectors Level 3</a> 10.70 + specifications, respectively. This module defines Selectors Level 4. 10.71 10.72 <h3 id="placement">Module Interactions</h3> 10.73 10.74 - <p>This module replaces the definitions for, and extends the set of 10.75 - selectors defined for CSS 10.76 - in [[SELECT]] and [[CSS21]]. 10.77 - 10.78 - <p>Pseudo-element selectors, which define abstract elements in a 10.79 - rendering tree, are not part of this specification: their generic syntax 10.80 - is described here, but, due to their close integration with the rendering 10.81 - model and irrelevance to other uses such as DOM queries, they will be 10.82 - defined in other modules. 10.83 + <p>This module replaces the definitions of 10.84 + and extends the set of selectors defined for CSS in [[SELECT]] and [[CSS21]]. 10.85 + 10.86 + <p> 10.87 + Pseudo-element selectors, 10.88 + which define abstract elements in a rendering tree, 10.89 + are not part of this specification: 10.90 + their generic syntax is described here, 10.91 + but, due to their close integration with the rendering model and irrelevance to other uses such as DOM queries, 10.92 + they will be defined in other modules. 10.93 10.94 <h2 id="overview"> 10.95 Selectors Overview</h2> 10.96 10.97 <p><em>This section is non-normative, as it merely summarizes the 10.98 - following sections.</em></p> 10.99 + following sections.</em> 10.100 10.101 <p>A Selector represents a structure. This structure can be used as a 10.102 condition (e.g. in a CSS rule) that determines which elements a 10.103 selector matches in the document tree, or as a flat description of the 10.104 - HTML or XML fragment corresponding to that structure.</p> 10.105 + HTML or XML fragment corresponding to that structure. 10.106 10.107 <p>Selectors may range from simple element names to rich contextual 10.108 - representations.</p> 10.109 - 10.110 - <p>The following table summarizes the Selector syntax:</p> 10.111 + representations. 10.112 + 10.113 + <p>The following table summarizes the Selector syntax: 10.114 10.115 <table class="data"> 10.116 <col class="pattern"> 10.117 @@ -470,7 +484,7 @@ 10.118 <td><a href="#descendant-combinators">Descendant combinator</a> 10.119 <td>1 10.120 <tr> 10.121 - <td><code>E > F</code> 10.122 + <td><code>E > F</code> 10.123 <td>an F element child of an E element 10.124 <td><a href="#child-combinators">Child combinator</a> 10.125 <td>2 10.126 @@ -490,7 +504,7 @@ 10.127 <td><a href="#idref-combinators">Reference combinator</a> 10.128 <td>4 10.129 <tr> 10.130 - <td><code>E! > F</code> 10.131 + <td><code>E! > F</code> 10.132 <td>an E element parent of an F element 10.133 <td><a href="#subject">Determining the subject of a selector</a> + 10.134 <a href="#child-combinators">Child combinator</a> 10.135 @@ -499,7 +513,7 @@ 10.136 10.137 <p>The meaning of each selector is derived from the table above by 10.138 prepending "matches" to the contents of each cell in the "Meaning" 10.139 - column.</p> 10.140 + column. 10.141 10.142 <p class="note">Some Level 4 selectors (noted above as "3-UI") were 10.143 introduced in [[CSS3UI]]. 10.144 @@ -536,13 +550,13 @@ 10.145 <p>A <dfn>combinator</dfn> is punctuation that represents a particular 10.146 kind of relationship between the <i>compound selectors</i> on either side. 10.147 Combinators in Selectors level 4 include: whitespace, "greater-than 10.148 - sign" (U+003E, <code>></code>), "plus sign" (U+002B, 10.149 + sign" (U+003E, <code>></code>), "plus sign" (U+002B, 10.150 <code>+</code>) and "tilde" (U+007E, <code>~</code>). 10.151 <a href="#whitespace">White space</a> may appear between a combinator 10.152 - and the simple selectors around it.</p> 10.153 + and the simple selectors around it. 10.154 10.155 <p>An empty selector, containing no <i>compound selector</i>, is an 10.156 - <a href="#invalid">invalid selector</a>.</p> 10.157 + <a href="#invalid">invalid selector</a>. 10.158 10.159 <h3 id="subject"> 10.160 Determining the Subject of a Selector</h3> 10.161 @@ -573,10 +587,10 @@ 10.162 <div class="example"> 10.163 <p>For example, the following selector represents a list item <code>LI</code> 10.164 unique child of an ordered list <code>OL</code>: 10.165 - <pre>OL > LI:only-child</pre> 10.166 + <pre>OL > LI:only-child</pre> 10.167 <p>However the following one represents an ordered list <code>OL</code> 10.168 having a unique child, that child being a <code>LI</code>: 10.169 - <pre>!OL > LI:only-child</pre> 10.170 + <pre>!OL > LI:only-child</pre> 10.171 <p>The tree structures represented by these two selectors are the same, 10.172 but the subjects of the selectors are not. 10.173 </div> 10.174 @@ -627,13 +641,13 @@ 10.175 10.176 <p>The <dfn>pseudo-class</dfn> concept is introduced to permit selection based on 10.177 information that lies outside of the document tree or that cannot be 10.178 - expressed using the other simple selectors.</p> 10.179 + expressed using the other simple selectors. 10.180 10.181 <p>A <i>pseudo-class</i> always consists of a "colon" 10.182 (<code>:</code>) followed by the name of the <i>pseudo-class</i> and, for 10.183 functional pseudo-classes, by a value between parentheses. 10.184 White space is optionally allowed between the parentheses and the 10.185 - argument, but not between the pseudo-class name and the parentheses.</p> 10.186 + argument, but not between the pseudo-class name and the parentheses. 10.187 10.188 <p><i>Pseudo-classes</i> are allowed in all <i>compound selectors</i> contained in a selector. 10.189 <i>Pseudo-classes</i> are allowed anywhere in a <i>compound selector</i> 10.190 @@ -675,7 +689,7 @@ 10.191 for <i>pseudo-elements</i> introduced in CSS levels 1 and 2 10.192 (namely, <code>:first-line</code>, <code>:first-letter</code>, 10.193 <code>:before</code> and <code>:after</code>). 10.194 - This compatibility notation is not allowed any other <i>pseudo-elements</i>.</p> 10.195 + This compatibility notation is not allowed any other <i>pseudo-elements</i>. 10.196 10.197 <p>Only one <i>pseudo-element</i> may appear per selector, 10.198 and only if the subject of the selector is the last <i>compound selector</i> in the selector. 10.199 @@ -683,7 +697,7 @@ 10.200 that represents the <a href="#subject">subjects</a> of the selector. 10.201 10.202 <p class="note">A future version of this specification may allow 10.203 - multiple pseudo-elements per selector.</p> 10.204 + multiple pseudo-elements per selector. 10.205 10.206 <p>Syntactically, a <i>pseudo-element</i> may be followed 10.207 by any combination of the <a href="#useraction-pseudos">user action pseudo-classes</a>. 10.208 @@ -711,7 +725,7 @@ 10.209 selectors depends on the document language. For example, in HTML, 10.210 element names are case-insensitive, but in XML, they are 10.211 case-sensitive. Case sensitivity of namespace prefixes is defined in 10.212 - [[!CSS3NAMESPACE]].</p> 10.213 + [[!CSS3NAMESPACE]]. 10.214 10.215 <p><dfn id="whitespace">White space</dfn> in Selectors consists of the 10.216 characters SPACE (U+0020), TAB (U+0009), LINE FEED (U+000A), 10.217 @@ -721,7 +735,7 @@ 10.218 10.219 <p>Characters in Selectors can be escaped with a backslash according 10.220 to the same <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">escaping 10.221 - rules</a> as CSS. [[!CSS21]].</p> 10.222 + rules</a> as CSS. [[!CSS21]]. 10.223 10.224 <h3 id="namespaces"> 10.225 Namespaces</h3> 10.226 @@ -732,7 +746,7 @@ 10.227 not specify a namespace prefix declaration mechanism, then no prefixes 10.228 are declared. In CSS, namespace prefixes are declared with the 10.229 <a href="http://www.w3.org/TR/css3-namespace/#declaration"><code>@namespace</code></a> 10.230 - rule. [[!CSS3NAMESPACE]]</p> 10.231 + rule. [[!CSS3NAMESPACE]] 10.232 10.233 <h3 id="invalid"> 10.234 Invalid Selectors and Error Handling</h3> 10.235 @@ -742,16 +756,16 @@ 10.236 10.237 <p>User agents must observe the rules for handling parsing errors: 10.238 <ul> 10.239 - <li>a simple selector containing an <a href="#namespaces">undeclared namespace prefix</a> is invalid</li> 10.240 + <li>a simple selector containing an <a href="#namespaces">undeclared namespace prefix</a> is invalid 10.241 <li>a selector containing an invalid simple selector, an invalid combinator 10.242 - or an invalid token is invalid. </li> 10.243 - <li>a selector list containing an invalid selector is invalid.</li> 10.244 + or an invalid token is invalid. 10.245 + <li>a selector list containing an invalid selector is invalid. 10.246 </ul> 10.247 10.248 <p>An invalid selector represents nothing. 10.249 10.250 <p class="issue">It's been <a href="http://lists.w3.org/Archives/Public/www-style/2010Nov/0203.html">requested</a> 10.251 - that the last rule be dropped in favor of Media Queries-style error-handling.</p> 10.252 + that the last rule be dropped in favor of Media Queries-style error-handling. 10.253 10.254 10.255 10.256 @@ -766,17 +780,18 @@ 10.257 <dfn>selector list</dfn>. 10.258 (A comma is U+002C.) For example, in CSS when several selectors share 10.259 the same declarations, they may be grouped into a comma-separated 10.260 - list. White space may appear before and/or after the comma.</p> 10.261 + list. White space may appear before and/or after the comma. 10.262 10.263 <div class="example"> 10.264 - <p>CSS example:</p> 10.265 - <p>In this example, we condense three rules with identical 10.266 - declarations into one. Thus,</p> 10.267 - <pre>h1 { font-family: sans-serif } 10.268 - h2 { font-family: sans-serif } 10.269 - h3 { font-family: sans-serif }</pre> 10.270 - <p>is equivalent to:</p> 10.271 - <pre>h1, h2, h3 { font-family: sans-serif }</pre> 10.272 + <p>CSS example: 10.273 + <p>In this example, we condense three rules with identical 10.274 + declarations into one. Thus, 10.275 + <pre><!-- 10.276 + -->h1 { font-family: sans-serif }
<!-- 10.277 + -->h2 { font-family: sans-serif }
<!-- 10.278 + -->h3 { font-family: sans-serif }</pre> 10.279 + <p>is equivalent to: 10.280 + <pre>h1, h2, h3 { font-family: sans-serif }</pre> 10.281 </div> 10.282 10.283 <p><strong>Warning</strong>: the equivalence is true in this example 10.284 @@ -784,19 +799,20 @@ 10.285 selectors were invalid, the entire group of selectors would be 10.286 invalid. This would invalidate the rule for all three heading 10.287 elements, whereas in the former case only one of the three individual 10.288 - heading rules would be invalidated.</p> 10.289 + heading rules would be invalidated. 10.290 10.291 <div class="example"> 10.292 - <p>Invalid CSS example:</p> 10.293 - <pre>h1 { font-family: sans-serif } 10.294 - h2..foo { font-family: sans-serif } 10.295 - h3 { font-family: sans-serif }</pre> 10.296 - <p>is not equivalent to:</p> 10.297 - <pre>h1, h2..foo, h3 { font-family: sans-serif }</pre> 10.298 - <p>because the above selector (<code>h1, h2..foo, h3</code>) 10.299 - is entirely invalid and the entire style rule is dropped. (When 10.300 - the selectors are not grouped, only the rule for <code>h2..foo</code> 10.301 - is dropped.)</p> 10.302 + <p>Invalid CSS example: 10.303 + <pre><!-- 10.304 + -->h1 { font-family: sans-serif }
<!-- 10.305 + -->h2..foo { font-family: sans-serif }
<!-- 10.306 + -->h3 { font-family: sans-serif }</pre> 10.307 + <p>is not equivalent to: 10.308 + <pre>h1, h2..foo, h3 { font-family: sans-serif }</pre> 10.309 + <p>because the above selector (<code>h1, h2..foo, h3</code>) 10.310 + is entirely invalid and the entire style rule is dropped. (When 10.311 + the selectors are not grouped, only the rule for <code>h2..foo</code> 10.312 + is dropped.) 10.313 </div> 10.314 10.315 <h3 id="the-matches-pseudo"> 10.316 @@ -811,24 +827,24 @@ 10.317 <a href="#combinator">combinators</a> are not allowed. Additionally, 10.318 <code>:matches()</code> may not be nested within itself or within 10.319 <code>:not()</code>: <code>:matches(:matches(...))</code> and 10.320 - <code>:not(:matches(...))</code> are invalid.</p> 10.321 + <code>:not(:matches(...))</code> are invalid. 10.322 10.323 <p>Pseudo-elements cannot be represented by the matches-any pseudo-class; 10.324 they are not valid within <code>:matches()</code>. 10.325 10.326 <p>Default namespace declarations do not affect the subject of any selector 10.327 within a matches-any pseudo-class unless the argument is an explicit 10.328 - universal selector or a type selector.</p> 10.329 + universal selector or a type selector. 10.330 10.331 <div class="example"> 10.332 <p>For example, following selector matches any element that is being 10.333 hovered or focused, regardless of its namespace. In particular, it 10.334 is not limited to only matching elements in the default namespace 10.335 - that are being hovered or focused.</p> 10.336 + that are being hovered or focused. 10.337 <pre>*|*:matches(:hover, :focus)</pre> 10.338 <p>The following selector, however, represents only hovered or focused 10.339 elements that are in the default namespace, because it uses an explicit 10.340 - universal selector within the <code>:matches()</code> notation:</p> 10.341 + universal selector within the <code>:matches()</code> notation: 10.342 <pre>*|*:matches(*:hover, *:focus)</pre> 10.343 </div> 10.344 10.345 @@ -855,26 +871,26 @@ 10.346 10.347 <div class="example"> 10.348 <p>For example, the following selector matches all <code>button</code> 10.349 - elements in an HTML document that are not disabled.</p> 10.350 + elements in an HTML document that are not disabled. 10.351 <pre>button:not([DISABLED])</pre> 10.352 <p>The following selector represents all but <code>FOO</code> 10.353 - elements.</p> 10.354 + elements. 10.355 <pre>*:not(FOO)</pre> 10.356 <p>The following compound selector represents all HTML elements 10.357 - except links.</p> 10.358 + except links. 10.359 <pre>html|*:not(:link):not(:visited)</pre> 10.360 </div> 10.361 10.362 <p>Default namespace declarations do not affect the subject of any selector 10.363 within a negation pseudo-class unless the argument is an explicit universal 10.364 selector or a type selector. (See <a href="#matches"><code>:matches()</code></a> 10.365 - for examples.</p> 10.366 + for examples. 10.367 10.368 <p class="note"><strong>Note</strong>: the :not() pseudo allows 10.369 useless selectors to be written. For instance <code>:not(*|*)</code>, 10.370 which represents no element at all, or <code>foo:not(bar)</code>, 10.371 which is equivalent to <code>foo</code> but with a higher 10.372 - specificity.</p> 10.373 + specificity. 10.374 10.375 <h2 id="elemental-selectors"> 10.376 Elemental selectors</h2> 10.377 @@ -886,11 +902,11 @@ 10.378 element type written using the syntax of 10.379 <a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified 10.380 names</a> [[!CSS3NAMESPACE]]. A type selector represents 10.381 - an instance of the element type in the document tree. </p> 10.382 + an instance of the element type in the document tree. 10.383 10.384 <div class="example"> 10.385 - <p>Example:</p> 10.386 - <p>The following selector represents an <code>h1</code> element in the document tree:</p> 10.387 + <p>Example: 10.388 + <p>The following selector represents an <code>h1</code> element in the document tree: 10.389 <pre>h1</pre> 10.390 </div> 10.391 10.392 @@ -901,26 +917,26 @@ 10.393 prefix that has been previously <a href="#nsdecl">declared</a> may be 10.394 prepended to the element name separated by the namespace separator 10.395 "vertical bar" (U+007C, <code>|</code>). (See, e.g., [[XML-NAMES]] for the use of namespaces in 10.396 - XML.)</p> 10.397 + XML.) 10.398 10.399 <p>The namespace component may be left empty (no prefix before the 10.400 namespace separator) to indicate that the selector is only to 10.401 - represent elements with no namespace.</p> 10.402 + represent elements with no namespace. 10.403 10.404 <p>An asterisk may be used for the namespace prefix, indicating that 10.405 the selector represents elements in any namespace (including elements 10.406 - with no namespace).</p> 10.407 + with no namespace). 10.408 10.409 <p>Element type selectors that have no namespace component (no 10.410 namespace separator) represent elements without regard to the 10.411 element's namespace (equivalent to "<code>*|</code>") unless a default 10.412 namespace has been <a href="#nsdecl">declared</a> for namespaced selectors (e.g. in CSS, in 10.413 the style sheet). If a default namespace has been declared, such 10.414 - selectors will represent only elements in the default namespace.</p> 10.415 + selectors will represent only elements in the default namespace. 10.416 10.417 <p>A type selector containing a namespace prefix that has not been 10.418 previously <a href="#nsdecl">declared</a> for namespaced selectors is 10.419 - an <a href="#conformance">invalid</a> selector.</p> 10.420 + an <a href="#conformance">invalid</a> selector. 10.421 10.422 <p>In a namespace-aware client, the name part of element type 10.423 selectors (the part after the namespace separator, if it is present) 10.424 @@ -928,26 +944,26 @@ 10.425 href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local part</a> 10.426 of the element's <a 10.427 href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified 10.428 - name</a>.</p> 10.429 - 10.430 - <p>In summary:</p> 10.431 + name</a>. 10.432 + 10.433 + <p>In summary: 10.434 10.435 <dl> 10.436 - <dt><code>ns|E</code></dt> 10.437 - <dd>elements with name E in namespace ns</dd> 10.438 - <dt><code>*|E</code></dt> 10.439 + <dt><code>ns|E</code> 10.440 + <dd>elements with name E in namespace ns 10.441 + <dt><code>*|E</code> 10.442 <dd>elements with name E in any namespace, including those without a 10.443 - namespace</dd> 10.444 - <dt><code>|E</code></dt> 10.445 - <dd>elements with name E without a namespace</dd> 10.446 - <dt><code>E</code></dt> 10.447 + namespace 10.448 + <dt><code>|E</code> 10.449 + <dd>elements with name E without a namespace 10.450 + <dt><code>E</code> 10.451 <dd>if no default namespace has been <a href="#nsdecl">declared</a> for selectors, this is 10.452 equivalent to *|E. Otherwise it is equivalent to ns|E where ns is 10.453 - the default namespace.</dd> 10.454 + the default namespace. 10.455 </dl> 10.456 10.457 <div class="example"> 10.458 - <p>CSS examples:</p> 10.459 + <p>CSS examples: 10.460 10.461 <pre> 10.462 @namespace foo url(http://www.example.com); 10.463 @@ -959,19 +975,19 @@ 10.464 10.465 <p>The first rule (not counting the <code>@namespace</code> at-rule) 10.466 will match only <code>h1</code> elements in the 10.467 - "http://www.example.com" namespace.</p> 10.468 + "http://www.example.com" namespace. 10.469 10.470 <p>The second rule will match all elements in the 10.471 - "http://www.example.com" namespace.</p> 10.472 + "http://www.example.com" namespace. 10.473 10.474 <p>The third rule will match only <code>h1</code> elements with 10.475 - no namespace.</p> 10.476 + no namespace. 10.477 10.478 <p>The fourth rule will match <code>h1</code> elements in any 10.479 - namespace (including those without any namespace).</p> 10.480 + namespace (including those without any namespace). 10.481 10.482 <p>The last rule is equivalent to the fourth rule because no default 10.483 - namespace has been defined.</p> 10.484 + namespace has been defined. 10.485 10.486 </div> 10.487 10.488 @@ -986,19 +1002,19 @@ 10.489 namespace (including those without a namespace) if no default 10.490 namespace has been specified for selectors. If a default namespace has 10.491 been specified, see <a href="#univnmsp">Universal selector and 10.492 - Namespaces</a> below.</p> 10.493 + Namespaces</a> below. 10.494 10.495 <p>If a universal selector represented by <code>*</code> (i.e. without a 10.496 namespace prefix) is not the only component of a <i>compound selector</i> 10.497 or is immediately followed by a <i>pseudo-element</i>, then the <code>*</code> may 10.498 - be omitted and the universal selector's presence implied.</p> 10.499 + be omitted and the universal selector's presence implied. 10.500 10.501 <div class="example"> 10.502 - <p>Examples:</p> 10.503 + <p>Examples: 10.504 <ul> 10.505 - <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are equivalent,</li> 10.506 - <li><code>*.warning</code> and <code>.warning</code> are equivalent,</li> 10.507 - <li><code>*#myid</code> and <code>#myid</code> are equivalent.</li> 10.508 + <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are equivalent, 10.509 + <li><code>*.warning</code> and <code>.warning</code> are equivalent, 10.510 + <li><code>*#myid</code> and <code>#myid</code> are equivalent. 10.511 </ul> 10.512 </div> 10.513 10.514 @@ -1008,29 +1024,29 @@ 10.515 <code style="white-space: nowrap">div :first-child</code> 10.516 and <code style="white-space: nowrap">div:first-child</code>. 10.517 Here, <code style="white-space: nowrap">div *:first-child</code> 10.518 - is more readable.</p> 10.519 + is more readable. 10.520 10.521 <h4 id="univnmsp"> 10.522 Universal selector and namespaces</h4> 10.523 10.524 <p>The universal selector allows an optional namespace component. It 10.525 - is used as follows:</p> 10.526 + is used as follows: 10.527 10.528 <dl> 10.529 - <dt><code>ns|*</code></dt> 10.530 - <dd>all elements in namespace ns</dd> 10.531 - <dt><code>*|*</code></dt> 10.532 - <dd>all elements</dd> 10.533 - <dt><code>|*</code></dt> 10.534 - <dd>all elements without a namespace</dd> 10.535 - <dt><code>*</code></dt> 10.536 + <dt><code>ns|*</code> 10.537 + <dd>all elements in namespace ns 10.538 + <dt><code>*|*</code> 10.539 + <dd>all elements 10.540 + <dt><code>|*</code> 10.541 + <dd>all elements without a namespace 10.542 + <dt><code>*</code> 10.543 <dd>if no default namespace has been specified, this is equivalent to *|*. 10.544 - Otherwise it is equivalent to ns|* where ns is the default namespace.</dd> 10.545 + Otherwise it is equivalent to ns|* where ns is the default namespace. 10.546 </dl> 10.547 10.548 <p>A universal selector containing a namespace prefix that has not 10.549 been previously <a href="#nsdecl">declared</a> is an <a 10.550 - href="#conformance">invalid</a> selector.</p> 10.551 + href="#conformance">invalid</a> selector. 10.552 10.553 10.554 <h2 id="attribute-selectors"> 10.555 @@ -1040,7 +1056,7 @@ 10.556 a selector is used as an expression to match against an element, 10.557 an <dfn>attribute selector</dfn> must be considered to match an element if that 10.558 element has an attribute that matches the attribute represented by the 10.559 - attribute selector.</p> 10.560 + attribute selector. 10.561 10.562 <p class="issue">Add comma-separated syntax for 10.563 <a href="http://lists.w3.org/Archives/Public/www-style/2011Mar/0215.html">multiple-value matching</a>? 10.564 @@ -1049,22 +1065,22 @@ 10.565 <h3 id="attribute-representation"> 10.566 Attribute presence and value selectors</h3> 10.567 10.568 - <p>CSS2 introduced four attribute selectors:</p> 10.569 + <p>CSS2 introduced four attribute selectors: 10.570 10.571 <dl> 10.572 <dt><code>[att]</code> 10.573 <dd>Represents an element with the <code>att</code> attribute, whatever the value of 10.574 - the attribute.</dd> 10.575 - <dt><code>[att=val]</code></dt> 10.576 + the attribute. 10.577 + <dt><code>[att=val]</code> 10.578 <dd>Represents an element with the <code>att</code> attribute whose value is exactly 10.579 - "val".</dd> 10.580 - <dt><code>[att~=val]</code></dt> 10.581 + "val". 10.582 + <dt><code>[att~=val]</code> 10.583 <dd>Represents an element with the <code>att</code> attribute whose value is a <a 10.584 href="#whitespace">whitespace</a>-separated list of words, one of 10.585 which is exactly "val". If "val" contains whitespace, it will never 10.586 represent anything (since the words are <em>separated</em> by 10.587 spaces). Also if "val" is the empty string, it will never represent 10.588 - anything.</dd> 10.589 + anything. 10.590 <dt><code>[att|=val]</code> 10.591 <dd>Represents an element with the <code>att</code> attribute, its 10.592 value either being exactly "val" or beginning with "val" immediately 10.593 @@ -1073,7 +1089,7 @@ 10.594 on the <code>a</code> element in HTML) as described in BCP 47 ([[BCP47]]) or its successor. For 10.595 <code>lang</code> (or <code>xml:lang</code>) language subcode 10.596 matching, please see <a href="#lang-pseudo">the <code>:lang</code> 10.597 - pseudo-class</a>.</dd> 10.598 + pseudo-class</a>. 10.599 </dl> 10.600 10.601 <p>Attribute values must be CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a> 10.602 @@ -1081,17 +1097,17 @@ 10.603 10.604 <div class="example"> 10.605 10.606 - <p>Examples:</p> 10.607 + <p>Examples: 10.608 10.609 <p>The following attribute selector represents an <code>h1</code> 10.610 element that carries the <code>title</code> attribute, whatever its 10.611 - value:</p> 10.612 + value: 10.613 10.614 <pre>h1[title]</pre> 10.615 10.616 <p>In the following example, the selector represents a 10.617 <code>span</code> element whose <code>class</code> attribute has 10.618 - exactly the value "example":</p> 10.619 + exactly the value "example": 10.620 10.621 <pre>span[class="example"]</pre> 10.622 10.623 @@ -1100,7 +1116,7 @@ 10.624 attribute. Here, the selector represents a <code>span</code> element 10.625 whose <code>hello</code> attribute has exactly the value "Cleveland" 10.626 and whose <code>goodbye</code> attribute has exactly the value 10.627 - "Columbus":</p> 10.628 + "Columbus": 10.629 10.630 <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre> 10.631 10.632 @@ -1109,28 +1125,30 @@ 10.633 <code>a</code> element with the value "copyright copyleft 10.634 copyeditor" on a <code>rel</code> attribute. The second selector 10.635 would only match an <code>a</code> element with an <code>href</code> 10.636 - attribute having the exact value "http://www.w3.org/".</p> 10.637 - 10.638 - <pre>a[rel~="copyright"] { ... } 10.639 - a[href="http://www.w3.org/"] { ... }</pre> 10.640 + attribute having the exact value "http://www.w3.org/". 10.641 + 10.642 + <pre><!-- 10.643 + -->a[rel~="copyright"] { ... }
<!-- 10.644 + -->a[href="http://www.w3.org/"] { ... }</pre> 10.645 10.646 <p>The following selector represents an <code>a</code> element 10.647 - whose <code>hreflang</code> attribute is exactly "fr".</p> 10.648 + whose <code>hreflang</code> attribute is exactly "fr". 10.649 10.650 <pre>a[hreflang=fr]</pre> 10.651 10.652 <p>The following selector represents an <code>a</code> element for 10.653 which the value of the <code>hreflang</code> attribute begins with 10.654 - "en", including "en", "en-US", and "en-scouse":</p> 10.655 + "en", including "en", "en-US", and "en-scouse": 10.656 10.657 <pre>a[hreflang|="en"]</pre> 10.658 10.659 <p>The following selectors represent a <code>DIALOGUE</code> element 10.660 whenever it has one of two different values for an attribute 10.661 - <code>character</code>:</p> 10.662 - 10.663 - <pre>DIALOGUE[character=romeo] 10.664 - DIALOGUE[character=juliet]</pre> 10.665 + <code>character</code>: 10.666 + 10.667 + <pre><!-- 10.668 + -->DIALOGUE[character=romeo]
<!-- 10.669 + -->DIALOGUE[character=juliet]</pre> 10.670 10.671 </div> 10.672 10.673 @@ -1138,36 +1156,36 @@ 10.674 Substring matching attribute selectors</h3> 10.675 10.676 <p>Three additional attribute selectors are provided for matching 10.677 - substrings in the value of an attribute:</p> 10.678 + substrings in the value of an attribute: 10.679 10.680 <dl> 10.681 - <dt><code>[att^=val]</code></dt> 10.682 + <dt><code>[att^=val]</code> 10.683 <dd>Represents an element with the <code>att</code> attribute whose value begins 10.684 with the prefix "val". If "val" is the empty string then the selector does not 10.685 - represent anything.</dd> 10.686 + represent anything. 10.687 <dt><code>[att$=val]</code> 10.688 <dd>Represents an element with the <code>att</code> attribute whose value ends with 10.689 the suffix "val". If "val" is the empty string then the selector does not represent 10.690 - anything.</dd> 10.691 + anything. 10.692 <dt><code>[att*=val]</code> 10.693 <dd>Represents an element with the <code>att</code> attribute whose value contains 10.694 at least one instance of the substring "val". If "val" is the empty string then 10.695 - the selector does not represent anything.</dd> 10.696 + the selector does not represent anything. 10.697 </dl> 10.698 10.699 <p>Attribute values must be CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a> 10.700 or <a href="http://www.w3.org/TR/CSS21/syndata.html#strings">strings</a>. [[!CSS21]] 10.701 10.702 <div class="example"> 10.703 - <p>Examples:</p> 10.704 + <p>Examples: 10.705 <p>The following selector represents an HTML <code>object</code>, referencing an 10.706 - image:</p> 10.707 + image: 10.708 <pre>object[type^="image/"]</pre> 10.709 <p>The following selector represents an HTML anchor <code>a</code> with an 10.710 - <code>href</code> attribute whose value ends with ".html".</p> 10.711 + <code>href</code> attribute whose value ends with ".html". 10.712 <pre>a[href$=".html"]</pre> 10.713 <p>The following selector represents an HTML paragraph with a <code>title</code> 10.714 - attribute whose value contains the substring "hello"</p> 10.715 + attribute whose value contains the substring "hello" 10.716 <pre>p[title*="hello"]</pre> 10.717 </div> 10.718 10.719 @@ -1211,28 +1229,28 @@ 10.720 10.721 <p>An attribute selector with an attribute name containing a namespace 10.722 prefix that has not been previously <a href="#nsdecl">declared</a> is 10.723 - an <a href="#conformance">invalid</a> selector.</p> 10.724 + an <a href="#conformance">invalid</a> selector. 10.725 10.726 <div class="example"> 10.727 - <p>CSS examples:</p> 10.728 - <pre> 10.729 - @namespace foo "http://www.example.com"; 10.730 - [foo|att=val] { color: blue } 10.731 - [*|att] { color: yellow } 10.732 - [|att] { color: green } 10.733 - [att] { color: green }</pre> 10.734 + <p>CSS examples: 10.735 + <pre><!-- 10.736 + -->@namespace foo "http://www.example.com";
<!-- 10.737 + -->[foo|att=val] { color: blue }
<!-- 10.738 + -->[*|att] { color: yellow }
<!-- 10.739 + -->[|att] { color: green }
<!-- 10.740 + -->[att] { color: green }</pre> 10.741 10.742 <p>The first rule will match only elements with the attribute 10.743 <code>att</code> in the "http://www.example.com" namespace with the 10.744 - value "val".</p> 10.745 + value "val". 10.746 10.747 <p>The second rule will match only elements with the attribute 10.748 <code>att</code> regardless of the namespace of the attribute 10.749 - (including no namespace).</p> 10.750 + (including no namespace). 10.751 10.752 <p>The last two rules are equivalent and will match only elements 10.753 with the attribute <code>att</code> where the attribute is not 10.754 - in a namespace.</p> 10.755 + in a namespace. 10.756 10.757 </div> 10.758 10.759 @@ -1244,51 +1262,52 @@ 10.760 In some document formats default attribute values can be defined in a DTD or 10.761 elsewhere, but these can only be selected by attribute selectors if they 10.762 appear in the document tree. Selectors should be designed so that they 10.763 - work whether or not the default values are included in the document tree.</p> 10.764 + work whether or not the default values are included in the document tree. 10.765 10.766 <p>For example, a XML UA may, but is <em>not</em> required to read an "external 10.767 subset" of the DTD but <em>is</em> required to look for default 10.768 attribute values in the document's "internal subset." (See, e.g., [[XML10]] for definitions of these subsets.) Depending 10.769 on the UA, a default attribute value defined in the external subset of the 10.770 - DTD might or might not appear in the document tree.</p> 10.771 + DTD might or might not appear in the document tree. 10.772 10.773 <p>A UA that recognizes an XML namespace may, but is not required to use its 10.774 knowledge of that namespace to treat default attribute values as if 10.775 they were present in the document. (For example, an XHTML UA is not 10.776 required to use its built-in knowledge of the XHTML DTD. See, e.g., [[XML-NAMES]] for details on namespaces in XML 10.777 - 1.0.)</p> 10.778 + 1.0.) 10.779 10.780 <p class="note"><strong>Note:</strong> Typically, implementations 10.781 choose to ignore external subsets. This corresponds to the behaviour 10.782 - of non-validating processors as defined by the XML specification.</p> 10.783 + of non-validating processors as defined by the XML specification. 10.784 10.785 <div class="example"> 10.786 - <p>Example:</p> 10.787 - 10.788 - <p>Consider an element <code>EXAMPLE</code> with an attribute <code>radix</code> 10.789 - that has a default value of <code>"decimal"</code>. The DTD fragment might be</p> 10.790 - 10.791 - <pre class="dtd-example"><!ATTLIST EXAMPLE radix (decimal,octal) "decimal"></pre> 10.792 - 10.793 - <p>If the style sheet contains the rules</p> 10.794 - 10.795 - <pre>EXAMPLE[radix=decimal] { /*... default property settings ...*/ } 10.796 - EXAMPLE[radix=octal] { /*... other settings...*/ }</pre> 10.797 - 10.798 - <p>the first rule might not match elements whose <code>radix</code> attribute is 10.799 - set by default, i.e. not set explicitly. To catch all cases, the 10.800 - attribute selector for the default value must be dropped:</p> 10.801 - 10.802 - <pre>EXAMPLE { /*... default property settings ...*/ } 10.803 - EXAMPLE[radix=octal] { /*... other settings...*/ }</pre> 10.804 - 10.805 - <p>Here, because the selector <code>EXAMPLE[radix=octal]</code> is 10.806 - more specific than the type selector alone, the style declarations in 10.807 - the second rule will override those in the first for elements that 10.808 - have a <code>radix</code> attribute value of <code>"octal"</code>. Care has to be taken that 10.809 - all property declarations that are to apply only to the default case 10.810 - are overridden in the non-default cases' style rules.</p> 10.811 - 10.812 + <p>Example: 10.813 + 10.814 + <p>Consider an element <code>EXAMPLE</code> with an attribute <code>radix</code> 10.815 + that has a default value of <code>"decimal"</code>. The DTD fragment might be 10.816 + 10.817 + <pre class="dtd-example"><!ATTLIST EXAMPLE radix (decimal,octal) "decimal"></pre> 10.818 + 10.819 + <p>If the style sheet contains the rules 10.820 + 10.821 + <pre><!-- 10.822 + -->EXAMPLE[radix=decimal] { /*... default property settings ...*/ }
<!-- 10.823 + -->EXAMPLE[radix=octal] { /*... other settings...*/ }</pre> 10.824 + 10.825 + <p>the first rule might not match elements whose <code>radix</code> attribute is 10.826 + set by default, i.e. not set explicitly. To catch all cases, the 10.827 + attribute selector for the default value must be dropped: 10.828 + 10.829 + <pre><!-- 10.830 + -->EXAMPLE { /*... default property settings ...*/ }
<!-- 10.831 + -->EXAMPLE[radix=octal] { /*... other settings...*/ }</pre> 10.832 + 10.833 + <p>Here, because the selector <code>EXAMPLE[radix=octal]</code> is 10.834 + more specific than the type selector alone, the style declarations in 10.835 + the second rule will override those in the first for elements that 10.836 + have a <code>radix</code> attribute value of <code>"octal"</code>. Care has to be taken that 10.837 + all property declarations that are to apply only to the default case 10.838 + are overridden in the non-default cases' style rules. 10.839 </div> 10.840 10.841 <h3 id="class-html"> 10.842 @@ -1305,39 +1324,39 @@ 10.843 except that it has a higher <a href="#specificity">specificity</a>. 10.844 10.845 <div class="example"> 10.846 - <p>CSS examples:</p> 10.847 + <p>CSS examples: 10.848 10.849 <p>We can assign style information to all elements with 10.850 - <code>class~="pastoral"</code> as follows:</p> 10.851 + <code>class~="pastoral"</code> as follows: 10.852 10.853 <pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre> 10.854 10.855 - <p>or just</p> 10.856 + <p>or just 10.857 10.858 <pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre> 10.859 10.860 <p>The following assigns style only to H1 elements with 10.861 - <code>class~="pastoral"</code>:</p> 10.862 + <code>class~="pastoral"</code>: 10.863 10.864 <pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre> 10.865 10.866 <p>Given these rules, the first <code>H1</code> instance below would not have 10.867 - green text, while the second would:</p> 10.868 + green text, while the second would: 10.869 10.870 <pre> 10.871 - <H1>Not green</H1> 10.872 - <H1 class="pastoral">Very green</H1></pre> 10.873 + <H1>Not green</H1> 10.874 + <H1 class="pastoral">Very green</H1></pre> 10.875 10.876 <p>The following rule matches any <code>P</code> element whose <code>class</code> 10.877 attribute has been assigned a list of <a 10.878 href="#whitespace">whitespace</a>-separated values that includes both 10.879 - <code>pastoral</code> and <code>marine</code>:</p> 10.880 + <code>pastoral</code> and <code>marine</code>: 10.881 10.882 <pre>p.pastoral.marine { color: green }</pre> 10.883 10.884 <p>This rule matches when <code>class="pastoral blue aqua 10.885 marine"</code> but does not match for <code>class="pastoral 10.886 - blue"</code>.</p> 10.887 + blue"</code>. 10.888 10.889 </div> 10.890 10.891 @@ -1349,14 +1368,14 @@ 10.892 information through the "class" attribute. Authors should avoid this 10.893 practice since the structural elements of a document language often 10.894 have recognized and accepted meanings and author-defined classes may 10.895 - not.</p> 10.896 + not. 10.897 10.898 <p class="note"><strong>Note:</strong> If an element has multiple 10.899 class attributes, their values must be concatenated with spaces 10.900 between the values before searching for the class. As of this time the 10.901 working group is not aware of any manner in which this situation can 10.902 be reached, however, so this behavior is explicitly non-normative in 10.903 - this specification.</p> 10.904 + this specification. 10.905 10.906 <h3 id="id-selectors"> 10.907 ID selectors</h3> 10.908 @@ -1368,7 +1387,7 @@ 10.909 document language, an ID typed attribute can be used to uniquely 10.910 identify its element. In HTML all ID attributes are named "id"; XML 10.911 applications may name ID attributes differently, but the same 10.912 - restriction applies.</p> 10.913 + restriction applies. 10.914 10.915 <p>An ID-typed attribute of a document language allows authors to 10.916 assign an identifier to one element instance in the document tree. An 10.917 @@ -1376,22 +1395,22 @@ 10.918 <code>#</code>) immediately followed by the ID value, which must be an 10.919 CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a>. 10.920 An ID selector represents an element instance that has an 10.921 - identifier that matches the identifier in the ID selector.</p> 10.922 + identifier that matches the identifier in the ID selector. 10.923 10.924 <p>Selectors does not specify how a UA knows the ID-typed attribute of 10.925 an element. The UA may, e.g., read a document's DTD, have the 10.926 information hard-coded or ask the user. 10.927 10.928 <div class="example"> 10.929 - <p>Examples:</p> 10.930 + <p>Examples: 10.931 <p>The following ID selector represents an <code>h1</code> element 10.932 - whose ID-typed attribute has the value "chapter1":</p> 10.933 + whose ID-typed attribute has the value "chapter1": 10.934 <pre>h1#chapter1</pre> 10.935 <p>The following ID selector represents any element whose ID-typed 10.936 - attribute has the value "chapter1":</p> 10.937 + attribute has the value "chapter1": 10.938 <pre>#chapter1</pre> 10.939 <p>The following selector represents any element whose ID-typed 10.940 - attribute has the value "z98y".</p> 10.941 + attribute has the value "z98y". 10.942 <pre>*#z98y</pre> 10.943 </div> 10.944 10.945 @@ -1403,12 +1422,12 @@ 10.946 attribute for that namespace). If a style sheet author knows or 10.947 suspects that a UA may not know what the ID of an element is, he 10.948 should use normal attribute selectors instead: 10.949 - <code>[name=p371]</code> instead of <code>#p371</code>.</p> 10.950 + <code>[name=p371]</code> instead of <code>#p371</code>. 10.951 10.952 <p>If an element has multiple ID attributes, all of them must be 10.953 treated as IDs for that element for the purposes of the ID 10.954 selector. Such a situation could be reached using mixtures of xml:id, 10.955 - DOM3 Core, XML DTDs, and namespace-specific knowledge.</p> 10.956 + DOM3 Core, XML DTDs, and namespace-specific knowledge. 10.957 10.958 <h2 id="location"> 10.959 Location Pseudo-classes</h2> 10.960 @@ -1427,26 +1446,26 @@ 10.961 <p>User agents commonly display unvisited links differently from 10.962 previously visited ones. Selectors 10.963 provides the pseudo-classes <dfn id='link-pseudo'>:link</dfn> and 10.964 - <dfn id='visited-pseudo'>:visited</dfn> to distinguish them:</p> 10.965 + <dfn id='visited-pseudo'>:visited</dfn> to distinguish them: 10.966 10.967 <ul> 10.968 <li>The <code>:link</code> pseudo-class applies to links that have 10.969 - not yet been visited.</li> 10.970 + not yet been visited. 10.971 <li>The <code>:visited</code> pseudo-class applies once the link has 10.972 - been visited by the user. </li> 10.973 + been visited by the user. 10.974 </ul> 10.975 10.976 <p>After some amount of time, user agents may choose to return a 10.977 - visited link to the (unvisited) ':link' state.</p> 10.978 - 10.979 - <p>The two states are mutually exclusive.</p> 10.980 + visited link to the (unvisited) ':link' state. 10.981 + 10.982 + <p>The two states are mutually exclusive. 10.983 10.984 <div class="example"> 10.985 10.986 - <p>Example:</p> 10.987 + <p>Example: 10.988 10.989 <p>The following selector represents links carrying class 10.990 - <code>footnote</code> and already visited:</p> 10.991 + <code>footnote</code> and already visited: 10.992 10.993 <pre>.footnote:visited</pre> 10.994 10.995 @@ -1458,7 +1477,7 @@ 10.996 10.997 <p>UAs may therefore treat all links as unvisited links, or implement 10.998 other measures to preserve the user's privacy while rendering visited 10.999 - and unvisited links differently.</p> 10.1000 + and unvisited links differently. 10.1001 10.1002 10.1003 <h3 id="the-local-pseudo"> 10.1004 @@ -1497,7 +1516,7 @@ 10.1005 <code>:local-link(<var>n</var>)</code>. 10.1006 10.1007 <p class="issue">Is there such a thing as IRL? Because we do want this 10.1008 - to work for internationalized URLs, just not URNs.</p> 10.1009 + to work for internationalized URLs, just not URNs. 10.1010 10.1011 <div class="example"> 10.1012 <p>So, given the links: 10.1013 @@ -1537,34 +1556,34 @@ 10.1014 10.1015 <p>Some URIs refer to a location within a resource. This kind of URI 10.1016 ends with a "number sign" (#) followed by an anchor 10.1017 - identifier (called the fragment identifier).</p> 10.1018 + identifier (called the fragment identifier). 10.1019 10.1020 <p>URIs with fragment identifiers link to a certain element within the 10.1021 document, known as the target element. For instance, here is a URI 10.1022 pointing to an anchor named <code>section_2</code> in an HTML 10.1023 - document:</p> 10.1024 + document: 10.1025 10.1026 <pre>http://example.com/html/top.html#section_2</pre> 10.1027 10.1028 <p>A target element can be represented by the <dfn id='target-pseudo'>:target</dfn> 10.1029 pseudo-class. If the document's URI has no fragment identifier, then 10.1030 - the document has no target element.</p> 10.1031 + the document has no target element. 10.1032 10.1033 <div class="example"> 10.1034 - <p>Example:</p> 10.1035 - <pre>p.note:target</pre> 10.1036 - <p>This selector represents a <code>p</code> element of class 10.1037 - <code>note</code> that is the target element of the referring 10.1038 - URI.</p> 10.1039 + <p>Example: 10.1040 + <pre>p.note:target</pre> 10.1041 + <p>This selector represents a <code>p</code> element of class 10.1042 + <code>note</code> that is the target element of the referring 10.1043 + URI. 10.1044 </div> 10.1045 10.1046 <div class="example"> 10.1047 - <p>CSS example:</p> 10.1048 - <p>Here, the <code>:target</code> pseudo-class is used to make the 10.1049 - target element red and place an image before it, if there is one:</p> 10.1050 - <pre> 10.1051 - *:target { color : red } 10.1052 - *:target::before { content : url(target.png) }</pre> 10.1053 + <p>CSS example: 10.1054 + <p>Here, the <code>:target</code> pseudo-class is used to make the 10.1055 + target element red and place an image before it, if there is one: 10.1056 + <pre><!-- 10.1057 + -->*:target { color : red }
<!-- 10.1058 + -->*:target::before { content : url(target.png) }</pre> 10.1059 </div> 10.1060 10.1061 10.1062 @@ -1591,22 +1610,24 @@ 10.1063 10.1064 <p>Interactive user agents sometimes change the rendering in response 10.1065 to user actions. Selectors provides three pseudo-classes for the 10.1066 - selection of an element the user is acting on.</p> 10.1067 + selection of an element the user is acting on. 10.1068 10.1069 <p>These pseudo-classes are not mutually exclusive. An element may 10.1070 - match several pseudo-classes at the same time.</p> 10.1071 + match several pseudo-classes at the same time. 10.1072 10.1073 <div class="example"> 10.1074 - <p>Examples:</p> 10.1075 - <pre>a:link /* unvisited links */ 10.1076 - a:visited /* visited links */ 10.1077 - a:hover /* user hovers */ 10.1078 - a:active /* active links */</pre> 10.1079 - <p>An example of combining dynamic pseudo-classes:</p> 10.1080 - <pre>a:focus 10.1081 - a:focus:hover</pre> 10.1082 + <p>Examples: 10.1083 + <pre><!-- 10.1084 + -->a:link /* unvisited links */
<!-- 10.1085 + -->a:visited /* visited links */
<!-- 10.1086 + -->a:hover /* user hovers */
<!-- 10.1087 + -->a:active /* active links */</pre> 10.1088 + <p>An example of combining dynamic pseudo-classes: 10.1089 + <pre><!-- 10.1090 + -->a:focus
<!-- 10.1091 + -->a:focus:hover</pre> 10.1092 <p>The last selector matches <code>a</code> elements that are in 10.1093 - the pseudo-class :focus and in the pseudo-class :hover.</p> 10.1094 + the pseudo-class :focus and in the pseudo-class :hover. 10.1095 </div> 10.1096 10.1097 <h3 id="the-hover-pseudo"> 10.1098 @@ -1630,7 +1651,7 @@ 10.1099 <p class="note"><strong>Note:</strong> Since the ':hover' state can apply to 10.1100 an element because its child is designated by a pointing device, then it is 10.1101 possible for ':hover' to apply to an element that is not underneath 10.1102 - the pointing device.</p> 10.1103 + the pointing device. 10.1104 10.1105 <p>The <code>:hover</code> pseudo-class can apply to any pseudo-element. 10.1106 10.1107 @@ -1645,13 +1666,13 @@ 10.1108 button), and any aliases thereof. 10.1109 10.1110 <p>There may be document language or implementation specific limits on 10.1111 - which elements can become <code>:active</code>.</p> 10.1112 + which elements can become <code>:active</code>. 10.1113 10.1114 <p>Selectors doesn't define if the parent of an element that is 10.1115 - ':active' is also in that state.</p> 10.1116 + ':active' is also in that state. 10.1117 10.1118 <p class="note"><strong>Note:</strong> An element can be both 10.1119 - ':visited' and ':active' (or ':link' and ':active').</p> 10.1120 + ':visited' and ':active' (or ':link' and ':active'). 10.1121 10.1122 <h3 id="the-focus-pseudo"> 10.1123 The input focus pseudo-class <code>:focus</code></h3> 10.1124 @@ -1661,7 +1682,7 @@ 10.1125 input). 10.1126 10.1127 <p>There may be document language or implementation specific limits on 10.1128 - which elements can acquire <code>:focus</code>.</p> 10.1129 + which elements can acquire <code>:focus</code>. 10.1130 10.1131 <h3 id="drag-pseudos"> 10.1132 The drag-and-drop pseudo-classes</h3> 10.1133 @@ -1690,7 +1711,7 @@ 10.1134 <pre>:valid-drop-target { box-shadow: 0 0 5px yellow; }</pre> 10.1135 <p>Meanwhile the '':active-drop-target'' pseudo-class can be used 10.1136 to designate the drop-zone that will receive the dragged item when dropped. 10.1137 - <pre>:active-drop-target { outline: solid red; }</pre> 10.1138 + <pre>:active-drop-target { outline: solid red; }</pre> 10.1139 </div> 10.1140 10.1141 <div class="issue"> 10.1142 @@ -1733,10 +1754,10 @@ 10.1143 <div class="example"> 10.1144 <p>For example, the following rule will highlight whichever paragraph 10.1145 or list item is being read aloud in a speech rendering of the document: 10.1146 - <pre> 10.1147 -<!-- -->:current(p, li, dt, dd) { 10.1148 -<!-- --> background: yellow; 10.1149 -<!-- -->}</pre> 10.1150 + <pre><!-- 10.1151 + -->:current(p, li, dt, dd) {
<!-- 10.1152 + --> background: yellow;
<!-- 10.1153 + -->}</pre> 10.1154 </div> 10.1155 10.1156 <h3 id="the-past-pseudo"> 10.1157 @@ -1824,32 +1845,33 @@ 10.1158 operation per [[RFC4647]] <cite>Matching of Language Tags</cite> (section 3.3.2). 10.1159 The matching is performed case-insensitively within the ASCII range. 10.1160 The language identifier does not need to be a valid language code to 10.1161 - perform this comparison.</p> 10.1162 + perform this comparison. 10.1163 10.1164 <p class="note"><strong>Note:</strong> It is recommended that 10.1165 documents and protocols indicate language using codes from BCP 47 [[BCP47]] 10.1166 or its successor, and by means of <code>xml:lang</code> attributes in the 10.1167 case of XML-based documents [[XML10]]. See <a 10.1168 href="http://www.w3.org/International/questions/qa-lang-2or3.html"> 10.1169 - "FAQ: Two-letter or three-letter language codes."</a></p> 10.1170 + "FAQ: Two-letter or three-letter language codes."</a> 10.1171 10.1172 <div class="example"> 10.1173 - <p>Examples:</p> 10.1174 + <p>Examples: 10.1175 <p>The two following selectors represent an HTML document that is in 10.1176 Belgian French or German. The two next selectors represent 10.1177 <code>q</code> quotations in an arbitrary element in Belgian French 10.1178 - or German.</p> 10.1179 - <pre>html:lang(fr-be) 10.1180 - html:lang(de) 10.1181 - :lang(fr-be) > q 10.1182 - :lang(de) > q</pre> 10.1183 + or German. 10.1184 + <pre><!-- 10.1185 + -->html:lang(fr-be)
<!-- 10.1186 + -->html:lang(de)
<!-- 10.1187 + -->:lang(fr-be) > q
<!-- 10.1188 + -->:lang(de) > q</pre> 10.1189 </div> 10.1190 10.1191 <p class="note">One difference between <code>:lang(C)</code> and the ''|='' operator 10.1192 is that the ''|='' operator only performs a comparison against a given 10.1193 attribute on the element, while the <code>:lang(C)</code> pseudo-class 10.1194 uses the UAs knowledge of the document's semantics to perform the 10.1195 - comparison.</p> 10.1196 + comparison. 10.1197 10.1198 <div class=example> 10.1199 10.1200 @@ -1857,11 +1879,11 @@ 10.1201 <code>[lang|=fr]</code> (because it has a LANG attribute) but both 10.1202 the BODY and the P match <code>:lang(fr)</code> (because both are in 10.1203 French). The P does not match the <code>[lang|=fr]</code> because it 10.1204 - does not have a LANG attribute.</p> 10.1205 - <pre> 10.1206 - <body lang=fr> 10.1207 - <p>Je suis français.</p> 10.1208 - </body></pre> 10.1209 + does not have a LANG attribute. 10.1210 + <pre><!-- 10.1211 + --><body lang=fr>
<!-- 10.1212 + --> <p>Je suis français.</p>
<!-- 10.1213 + --></body></pre> 10.1214 </div> 10.1215 10.1216 <div class=example> 10.1217 @@ -1879,7 +1901,7 @@ 10.1218 at the beginning. 10.1219 </div> 10.1220 10.1221 - <p class="note">Wildcard language matching is new in Level 4.</p> 10.1222 + <p class="note">Wildcard language matching is new in Level 4. 10.1223 10.1224 <h2 id="ui-states-pseudos"> 10.1225 The UI states pseudo-classes</h2> 10.1226 @@ -1889,21 +1911,21 @@ 10.1227 10.1228 <p>The <dfn id='enabled-pseudo'>:enabled</dfn> pseudo-class represents user interface elements 10.1229 that are in an enabled state; such elements have a corresponding disabled 10.1230 - state.</p> 10.1231 + state. 10.1232 10.1233 <p>Conversely, the <dfn id='disabled-pseudo'>:disabled</dfn> pseudo-class represents user 10.1234 interface elements that are in a disabled state; such elements have a 10.1235 - corresponding enabled state.</p> 10.1236 + corresponding enabled state. 10.1237 10.1238 <p>What constitutes an enabled state, a disabled state, and a user interface 10.1239 element is host-language-dependent. In a typical document most elements will be 10.1240 - neither <code>:enabled</code> nor <code>:disabled</code>.</p> 10.1241 + neither <code>:enabled</code> nor <code>:disabled</code>. 10.1242 10.1243 <p class="note"><strong>Note:</strong> CSS properties that might affect a user’s ability 10.1244 to interact with a given user interface element do not affect whether it 10.1245 matches <code>:enabled</code> or <code>:disabled</code>; e.g., the 10.1246 <code>display</code> and <code>visibility</code> properties have no effect 10.1247 - on the enabled/disabled state of an element.</p> 10.1248 + on the enabled/disabled state of an element. 10.1249 10.1250 <h3 id="the-checked-pseudo"> 10.1251 The selected-option pseudo-class <code>:checked</code></h3> 10.1252 @@ -1940,7 +1962,7 @@ 10.1253 <p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code> 10.1254 applies to all media. Components of a radio-group initialized with no 10.1255 pre-selected choice, for example, would be <code>:indeterminate</code> 10.1256 - even in a static display.</p> 10.1257 + even in a static display. 10.1258 10.1259 <h3 id="the-default-pseudo"> 10.1260 The default option pseudo-class <code>:default</code></h3> 10.1261 @@ -2114,36 +2136,38 @@ 10.1262 and the rest of the tokenization is given by the 10.1263 <a href="#lex">Lexical scanner</a> in section 10.2: 10.1264 10.1265 - <pre>nth 10.1266 - : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? | 10.1267 - ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S* 10.1268 - ;</pre> 10.1269 + <pre><!-- 10.1270 + -->nth
<!-- 10.1271 + -->: S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
<!-- 10.1272 + --> ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
<!-- 10.1273 + -->;</pre> 10.1274 10.1275 <div class="example"> 10.1276 - <p>Examples:</p> 10.1277 - <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */ 10.1278 - tr:nth-child(odd) /* same */ 10.1279 - tr:nth-child(2n+0) /* represents every even row of an HTML table */ 10.1280 - tr:nth-child(even) /* same */ 10.1281 - 10.1282 - /* Alternate paragraph colours in CSS */ 10.1283 - p:nth-child(4n+1) { color: navy; } 10.1284 - p:nth-child(4n+2) { color: green; } 10.1285 - p:nth-child(4n+3) { color: maroon; } 10.1286 - p:nth-child(4n+4) { color: purple; }</pre> 10.1287 + <p>Examples: 10.1288 + <pre><!-- 10.1289 + -->tr:nth-child(2n+1) /* represents every odd row of an HTML table */
<!-- 10.1290 + -->tr:nth-child(odd) /* same */
<!-- 10.1291 + -->tr:nth-child(2n+0) /* represents every even row of an HTML table */
<!-- 10.1292 + -->tr:nth-child(even) /* same */
<!-- 10.1293 + -->
<!-- 10.1294 + -->/* Alternate paragraph colours in CSS */
<!-- 10.1295 + -->p:nth-child(4n+1) { color: navy; }
<!-- 10.1296 + -->p:nth-child(4n+2) { color: green; }
<!-- 10.1297 + -->p:nth-child(4n+3) { color: maroon; }
<!-- 10.1298 + -->p:nth-child(4n+4) { color: purple; }</pre> 10.1299 </div> 10.1300 10.1301 <p>When the value <var>b</var> is preceded by a negative sign, 10.1302 the "+" character in the expression must be removed (it is 10.1303 effectively replaced by the "-" character indicating the negative 10.1304 - value of <var>b</var>).</p> 10.1305 + value of <var>b</var>). 10.1306 10.1307 <div class="example"> 10.1308 - <p>Examples:</p> 10.1309 - <pre> 10.1310 - :nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */ 10.1311 - :nth-child(10n+9) /* Same */ 10.1312 - :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre> 10.1313 + <p>Examples: 10.1314 + <pre><!-- 10.1315 + -->:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
<!-- 10.1316 + -->:nth-child(10n+9) /* Same */
<!-- 10.1317 + -->:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre> 10.1318 </div> 10.1319 10.1320 <p>When <var>a</var>=0, the <var>a</var><code>n</code> part need not be 10.1321 @@ -2153,32 +2177,35 @@ 10.1322 In this case the syntax simplifies to <code>:nth-child(<var>b</var>)</code>. 10.1323 10.1324 <div class="example"> 10.1325 - <p>Examples:</p> 10.1326 - <pre>foo:nth-child(0n+5) /* represents an element foo that is the 5th child 10.1327 - of its parent element */ 10.1328 - foo:nth-child(5) /* same */</pre> 10.1329 + <p>Examples: 10.1330 + <pre><!-- 10.1331 + -->foo:nth-child(0n+5) /* represents an element foo that is the 5th child
<!-- 10.1332 + --> of its parent element */
<!-- 10.1333 + -->foo:nth-child(5) /* same */</pre> 10.1334 </div> 10.1335 10.1336 <p>When <var>a</var>=1, or <var>a</var>=-1, the <code>1</code> may be 10.1337 omitted from the rule. 10.1338 10.1339 <div class="example"> 10.1340 - <p>Examples:</p> 10.1341 - <p>The following selectors are therefore equivalent:</p> 10.1342 - <pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */ 10.1343 - bar:nth-child(n+0) /* same */ 10.1344 - bar:nth-child(n) /* same */ 10.1345 - bar /* same but lower specificity (0,0,1) */</pre> 10.1346 + <p>Examples: 10.1347 + <p>The following selectors are therefore equivalent: 10.1348 + <pre><!-- 10.1349 + -->bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */
<!-- 10.1350 + -->bar:nth-child(n+0) /* same */
<!-- 10.1351 + -->bar:nth-child(n) /* same */
<!-- 10.1352 + -->bar /* same but lower specificity (0,0,1) */</pre> 10.1353 </div> 10.1354 10.1355 <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In 10.1356 such a case, the +<var>b</var> (or -<var>b</var>) part may be omitted 10.1357 - unless the <var>a</var> part is already omitted.</p> 10.1358 + unless the <var>a</var> part is already omitted. 10.1359 10.1360 <div class="example"> 10.1361 - <p>Examples:</p> 10.1362 - <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */ 10.1363 - tr:nth-child(2n) /* same */</pre> 10.1364 + <p>Examples: 10.1365 + <pre><!-- 10.1366 + -->tr:nth-child(2n+0) /* represents every even row of an HTML table */
<!-- 10.1367 + -->tr:nth-child(2n) /* same */</pre> 10.1368 </div> 10.1369 10.1370 <p>Whitespace is permitted after the "(", before the ")", and on either 10.1371 @@ -2186,31 +2213,29 @@ 10.1372 <var>b</var> parts when both are present. 10.1373 10.1374 <div class="example"> 10.1375 - <p>Valid Examples with white space:</p> 10.1376 - <pre> 10.1377 - :nth-child( 3n + 1 ) 10.1378 - :nth-child( +3n - 2 ) 10.1379 - :nth-child( -n+ 6) 10.1380 - :nth-child( +6 ) 10.1381 - </pre> 10.1382 - <p>Invalid Examples with white space:</p> 10.1383 - <pre> 10.1384 - :nth-child(3 n) 10.1385 - :nth-child(+ 2n) 10.1386 - :nth-child(+ 2) 10.1387 - </pre> 10.1388 + <p>Valid Examples with white space: 10.1389 + <pre><!-- 10.1390 + -->:nth-child( 3n + 1 )
<!-- 10.1391 + -->:nth-child( +3n - 2 )
<!-- 10.1392 + -->:nth-child( -n+ 6)
<!-- 10.1393 + -->:nth-child( +6 )</pre> 10.1394 + <p>Invalid Examples with white space: 10.1395 + <pre><!-- 10.1396 + -->:nth-child(3 n)
<!-- 10.1397 + -->:nth-child(+ 2n)
<!-- 10.1398 + -->:nth-child(+ 2)</pre> 10.1399 </div> 10.1400 10.1401 <p>If both <var>a</var> and <var>b</var> are equal to zero, the 10.1402 - pseudo-class represents no element in the document tree.</p> 10.1403 + pseudo-class represents no element in the document tree. 10.1404 10.1405 <p>The value <var>a</var> can be negative, but only the positive 10.1406 values of <var>a</var><code>n</code>+<var>b</var>, for 10.1407 <code>n</code>≥0, may represent an element in the document 10.1408 - tree.</p> 10.1409 + tree. 10.1410 10.1411 <div class="example"> 10.1412 - <p>Example:</p> 10.1413 + <p>Example: 10.1414 <pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre> 10.1415 </div> 10.1416 10.1417 @@ -2229,11 +2254,12 @@ 10.1418 10.1419 10.1420 <div class="example"> 10.1421 - <p>Examples:</p> 10.1422 - <pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */ 10.1423 - 10.1424 - foo:nth-last-child(odd) /* represents all odd foo elements in their parent element, 10.1425 - counting from the last one */</pre> 10.1426 + <p>Examples: 10.1427 + <pre><!-- 10.1428 + -->tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */
<!-- 10.1429 + -->
<!-- 10.1430 + -->foo:nth-last-child(odd) /* represents all odd foo elements in their parent element,
<!-- 10.1431 + --> counting from the last one */</pre> 10.1432 </div> 10.1433 10.1434 10.1435 @@ -2251,10 +2277,11 @@ 10.1436 10.1437 10.1438 <div class="example"> 10.1439 - <p>CSS example:</p> 10.1440 - <p>This allows an author to alternate the position of floated images:</p> 10.1441 - <pre>img:nth-of-type(2n+1) { float: right; } 10.1442 - img:nth-of-type(2n) { float: left; }</pre> 10.1443 + <p>CSS example: 10.1444 + <p>This allows an author to alternate the position of floated images: 10.1445 + <pre><!-- 10.1446 + -->img:nth-of-type(2n+1) { float: right; }
<!-- 10.1447 + -->img:nth-of-type(2n) { float: left; }</pre> 10.1448 </div> 10.1449 10.1450 10.1451 @@ -2272,14 +2299,14 @@ 10.1452 10.1453 10.1454 <div class="example"> 10.1455 - <p>Example:</p> 10.1456 + <p>Example: 10.1457 <p>To represent all <code>h2</code> children of an XHTML 10.1458 <code>body</code> except the first and last, one could use the 10.1459 - following selector:</p> 10.1460 - <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre> 10.1461 + following selector: 10.1462 + <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre> 10.1463 <p>In this case, one could also use <code>:not()</code>, although the 10.1464 - selector ends up being just as long:</p> 10.1465 - <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre> 10.1466 + selector ends up being just as long: 10.1467 + <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre> 10.1468 </div> 10.1469 10.1470 <h3 id="the-nth-match-pseudo"> 10.1471 @@ -2319,28 +2346,28 @@ 10.1472 represents an element that is the first child of some other element. 10.1473 10.1474 <div class="example"> 10.1475 - <p>Examples:</p> 10.1476 + <p>Examples: 10.1477 <p>The following selector represents a <code>p</code> element that is 10.1478 - the first child of a <code>div</code> element:</p> 10.1479 - <pre>div > p:first-child</pre> 10.1480 + the first child of a <code>div</code> element: 10.1481 + <pre>div > p:first-child</pre> 10.1482 <p>This selector can represent the <code>p</code> inside the 10.1483 - <code>div</code> of the following fragment:</p> 10.1484 - <pre> 10.1485 - <p> The last P before the note.</p> 10.1486 - <div class="note"> 10.1487 - <p> The first P inside the note.</p> 10.1488 - </div></pre>but cannot represent the second <code>p</code> in the following 10.1489 - fragment: 10.1490 - <pre> 10.1491 - <p> The last P before the note.</p> 10.1492 - <div class="note"> 10.1493 - <h2> Note </h2> 10.1494 - <p> The first P inside the note.</p> 10.1495 - </div></pre> 10.1496 - <p>The following two selectors are usually equivalent:</p> 10.1497 - <pre> 10.1498 - * > a:first-child /* a is first child of any element */ 10.1499 - a:first-child /* Same (assuming a is not the root element) */</pre> 10.1500 + <code>div</code> of the following fragment: 10.1501 + <pre><!-- 10.1502 + --><p> The last P before the note.</p>
<!-- 10.1503 + --><div class="note">
<!-- 10.1504 + --><p> The first P inside the note.</p>
<!-- 10.1505 + --></div></pre> 10.1506 + but cannot represent the second <code>p</code> in the following fragment: 10.1507 + <pre><!-- 10.1508 + --><p> The last P before the note.</p>
<!-- 10.1509 + --><div class="note">
<!-- 10.1510 + --><h2> Note </h2>
<!-- 10.1511 + --><p> The first P inside the note.</p>
<!-- 10.1512 + --></div></pre> 10.1513 + <p>The following two selectors are usually equivalent: 10.1514 + <pre><!-- 10.1515 + -->* > a:first-child /* a is first child of any element */
<!-- 10.1516 + -->a:first-child /* Same (assuming a is not the root element) */</pre> 10.1517 </div> 10.1518 10.1519 <h3 id="the-last-child-pseudo"> 10.1520 @@ -2350,10 +2377,10 @@ 10.1521 represents an element that is the last child of some other element. 10.1522 10.1523 <div class="example"> 10.1524 - <p>Example:</p> 10.1525 + <p>Example: 10.1526 <p>The following selector represents a list item <code>li</code> that 10.1527 is the last child of an ordered list <code>ol</code>. 10.1528 - <pre>ol > li:last-child</pre> 10.1529 + <pre>ol > li:last-child</pre> 10.1530 </div> 10.1531 10.1532 <h3 id="the-first-of-type-pseudo"> 10.1533 @@ -2364,26 +2391,26 @@ 10.1534 children of its parent element. 10.1535 10.1536 <div class="example"> 10.1537 - <p>Example:</p> 10.1538 - <p>The following selector represents a definition title 10.1539 - <code>dt</code> inside a definition list <code>dl</code>, this 10.1540 - <code>dt</code> being the first of its type in the list of children of 10.1541 - its parent element.</p> 10.1542 - <pre>dl dt:first-of-type</pre> 10.1543 - <p>It is a valid description for the first two <code>dt</code> 10.1544 - elements in the following example but not for the third one:</p> 10.1545 - <pre> 10.1546 - <dl> 10.1547 - <dt>gigogne</dt> 10.1548 - <dd> 10.1549 - <dl> 10.1550 - <dt>fusée</dt> 10.1551 - <dd>multistage rocket</dd> 10.1552 - <dt>table</dt> 10.1553 - <dd>nest of tables</dd> 10.1554 - </dl> 10.1555 - </dd> 10.1556 - </dl></pre> 10.1557 + <p>Example: 10.1558 + <p>The following selector represents a definition title 10.1559 + <code>dt</code> inside a definition list <code>dl</code>, this 10.1560 + <code>dt</code> being the first of its type in the list of children of 10.1561 + its parent element. 10.1562 + <pre>dl dt:first-of-type</pre> 10.1563 + <p>It is a valid description for the first two <code>dt</code> 10.1564 + elements in the following example but not for the third one: 10.1565 + <pre><!-- 10.1566 + --><dl>
<!-- 10.1567 + --><dt>gigogne</dt>
<!-- 10.1568 + --><dd>
<!-- 10.1569 + --><dl>
<!-- 10.1570 + --><dt>fusée</dt>
<!-- 10.1571 + --><dd>multistage rocket</dd>
<!-- 10.1572 + --><dt>table</dt>
<!-- 10.1573 + --><dd>nest of tables</dd>
<!-- 10.1574 + --></dl>
<!-- 10.1575 + --></dd>
<!-- 10.1576 + --></dl></pre> 10.1577 </div> 10.1578 10.1579 <h3 id="the-last-of-type-pseudo"> 10.1580 @@ -2392,13 +2419,13 @@ 10.1581 <p>Same as <code>:nth-last-of-type(1)</code>. The 10.1582 <dfn id='last-of-type-pseudo'>:last-of-type</dfn> pseudo-class represents an element that is 10.1583 the last sibling of its type in the list of children of its parent 10.1584 - element.</p> 10.1585 + element. 10.1586 10.1587 <div class="example"> 10.1588 - <p>Example:</p> 10.1589 + <p>Example: 10.1590 <p>The following selector represents the last data cell 10.1591 - <code>td</code> of a table row <code>tr</code>.</p> 10.1592 - <pre>tr > td:last-of-type</pre> 10.1593 + <code>td</code> of a table row <code>tr</code>. 10.1594 + <pre>tr > td:last-of-type</pre> 10.1595 </div> 10.1596 10.1597 <h3 id="the-only-child-pseudo"> 10.1598 @@ -2409,7 +2436,7 @@ 10.1599 element has no other element children. Same as 10.1600 <code>:first-child:last-child</code> or 10.1601 <code>:nth-child(1):nth-last-child(1)</code>, but with a lower 10.1602 - specificity.</p> 10.1603 + specificity. 10.1604 10.1605 <h3 id="the-only-of-type-pseudo"> 10.1606 <code>:only-of-type</code> pseudo-class</h3> 10.1607 @@ -2419,7 +2446,7 @@ 10.1608 element has no other element children with the same expanded element 10.1609 name. Same as <code>:first-of-type:last-of-type</code> or 10.1610 <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower 10.1611 - specificity.</p> 10.1612 + specificity. 10.1613 10.1614 10.1615 <h3 id="the-empty-pseudo"> 10.1616 @@ -2431,17 +2458,17 @@ 10.1617 nodes, and entity references) whose data has a non-zero length must be 10.1618 considered as affecting emptiness; 10.1619 comments, processing instructions, and other nodes must not affect whether 10.1620 - an element is considered empty or not.</p> 10.1621 + an element is considered empty or not. 10.1622 10.1623 <div class="example"> 10.1624 - <p>Examples:</p> 10.1625 - <p><code>p:empty</code> is a valid representation of the following fragment:</p> 10.1626 - <pre><p></p></pre> 10.1627 + <p>Examples: 10.1628 + <p><code>p:empty</code> is a valid representation of the following fragment: 10.1629 + <pre><p></p></pre> 10.1630 <p><code>foo:empty</code> is not a valid representation for the 10.1631 - following fragments:</p> 10.1632 - <pre><foo>bar</foo></pre> 10.1633 - <pre><foo><bar>bla</bar></foo></pre> 10.1634 - <pre><foo>this is not <bar>:empty</bar></foo></pre> 10.1635 + following fragments: 10.1636 + <pre><foo>bar</foo></pre> 10.1637 + <pre><foo><bar>bla</bar></foo></pre> 10.1638 + <pre><foo>this is not <bar>:empty</bar></foo></pre> 10.1639 </div> 10.1640 10.1641 <h2 id="combinators"> 10.1642 @@ -2460,28 +2487,28 @@ 10.1643 arbitrary descendant of some ancestor element <code>A</code>. 10.1644 10.1645 <div class="example"> 10.1646 - <p>Examples:</p> 10.1647 - <p>For example, consider the following selector:</p> 10.1648 - <pre>h1 em</pre> 10.1649 - <p>It represents an <code>em</code> element being the descendant of 10.1650 - an <code>h1</code> element. It is a correct and valid, but partial, 10.1651 - description of the following fragment:</p> 10.1652 - <pre> 10.1653 - <h1>This <span class="myclass">headline 10.1654 - is <em>very</em> important</span></h1></pre> 10.1655 - <p>The following selector:</p> 10.1656 - <pre>div * p</pre> 10.1657 - <p>represents a <code>p</code> element that is a grandchild or later 10.1658 - descendant of a <code>div</code> element. Note the whitespace on 10.1659 - either side of the "*" is not part of the universal selector; the 10.1660 - whitespace is a combinator indicating that the <code>div</code> must be the 10.1661 - ancestor of some element, and that that element must be an ancestor 10.1662 - of the <code>p</code>.</p> 10.1663 - <p>The following selector, which combines descendant combinators and 10.1664 - <a href="#attribute-selectors">attribute selectors</a>, represents an 10.1665 - element that (1) has the <code>href</code> attribute set and (2) is 10.1666 - inside a <code>p</code> that is itself inside a <code>div</code>:</p> 10.1667 - <pre>div p *[href]</pre> 10.1668 + <p>Examples: 10.1669 + <p>For example, consider the following selector: 10.1670 + <pre>h1 em</pre> 10.1671 + <p>It represents an <code>em</code> element being the descendant of 10.1672 + an <code>h1</code> element. It is a correct and valid, but partial, 10.1673 + description of the following fragment: 10.1674 + <pre><!-- 10.1675 + --><h1>This <span class="myclass">headline
<!-- 10.1676 + -->is <em>very</em> important</span></h1></pre> 10.1677 + <p>The following selector: 10.1678 + <pre>div * p</pre> 10.1679 + <p>represents a <code>p</code> element that is a grandchild or later 10.1680 + descendant of a <code>div</code> element. Note the whitespace on 10.1681 + either side of the "*" is not part of the universal selector; the 10.1682 + whitespace is a combinator indicating that the <code>div</code> must be the 10.1683 + ancestor of some element, and that that element must be an ancestor 10.1684 + of the <code>p</code>. 10.1685 + <p>The following selector, which combines descendant combinators and 10.1686 + <a href="#attribute-selectors">attribute selectors</a>, represents an 10.1687 + element that (1) has the <code>href</code> attribute set and (2) is 10.1688 + inside a <code>p</code> that is itself inside a <code>div</code>: 10.1689 + <pre>div p *[href]</pre> 10.1690 </div> 10.1691 10.1692 <h3 id="child-combinators"> 10.1693 @@ -2489,29 +2516,29 @@ 10.1694 10.1695 <p>A <dfn>child combinator</dfn> describes a childhood relationship 10.1696 between two elements. A child combinator is made of the 10.1697 - "greater-than sign" (U+003E, <code>></code>) character and 10.1698 + "greater-than sign" (U+003E, <code>></code>) character and 10.1699 separates two <i>compound selectors</i>. 10.1700 10.1701 10.1702 <div class="example"> 10.1703 - <p>Examples:</p> 10.1704 + <p>Examples: 10.1705 <p>The following selector represents a <code>p</code> element that is 10.1706 - child of <code>body</code>:</p> 10.1707 - <pre>body > p</pre> 10.1708 + child of <code>body</code>: 10.1709 + <pre>body > p</pre> 10.1710 <p>The following example combines descendant combinators and child 10.1711 - combinators.</p> 10.1712 - <pre>div ol>li p</pre><!-- LEAVE THOSE SPACES OUT! see below --> 10.1713 + combinators. 10.1714 + <pre>div ol>li p</pre><!-- LEAVE THOSE SPACES OUT! see below --> 10.1715 <p>It represents a <code>p</code> element that is a descendant of an 10.1716 <code>li</code> element; the <code>li</code> element must be the 10.1717 child of an <code>ol</code> element; the <code>ol</code> element must 10.1718 be a descendant of a <code>div</code>. Notice that the optional white 10.1719 - space around the ">" combinator has been left out.</p> 10.1720 + space around the ">" combinator has been left out. 10.1721 </div> 10.1722 10.1723 <p>For information on selecting the first child of an element, please 10.1724 see the section on the <code><a 10.1725 href="#structural-pseudos">:first-child</a></code> pseudo-class 10.1726 - above.</p> 10.1727 + above. 10.1728 10.1729 <h3 id="adjacent-sibling-combinators"> 10.1730 Next-sibling combinator</h3> 10.1731 @@ -2527,14 +2554,14 @@ 10.1732 are ignored when considering the adjacency of elements. 10.1733 10.1734 <div class="example"> 10.1735 - <p>Examples:</p> 10.1736 + <p>Examples: 10.1737 <p>The following selector represents a <code>p</code> element 10.1738 - immediately following a <code>math</code> element:</p> 10.1739 + immediately following a <code>math</code> element: 10.1740 <pre>math + p</pre> 10.1741 <p>The following selector is conceptually similar to the one in the 10.1742 previous example, except that it adds an attribute selector — it 10.1743 adds a constraint to the <code>h1</code> element, that it must have 10.1744 - <code>class="opener"</code>:</p> 10.1745 + <code>class="opener"</code>: 10.1746 <pre>h1.opener + h2</pre> 10.1747 </div> 10.1748 10.1749 @@ -2547,17 +2574,17 @@ 10.1750 The elements represented by the two <i>compound selectors</i> share 10.1751 the same parent in the document tree and the element represented by 10.1752 the first compound selector precedes (not necessarily immediately) the element 10.1753 - represented by the second one.</p> 10.1754 + represented by the second one. 10.1755 10.1756 <div class="example"> 10.1757 - <p>Example:</p> 10.1758 + <p>Example: 10.1759 <pre>h1 ~ pre</pre> 10.1760 <p>represents a <code>pre</code> element following an <code>h1</code>. It 10.1761 - is a correct and valid, but partial, description of:</p> 10.1762 + is a correct and valid, but partial, description of: 10.1763 <pre> 10.1764 - <h1>Definition of the function a</h1> 10.1765 - <p>Function a(x) has to be applied to all figures in the table.</p> 10.1766 - <pre>function a(x) = 12x/13.5</pre></pre> 10.1767 + <h1>Definition of the function a</h1> 10.1768 + <p>Function a(x) has to be applied to all figures in the table.</p> 10.1769 + <pre>function a(x) = 12x/13.5</pre></pre> 10.1770 </div> 10.1771 10.1772 <h3 id="idref-combinators"> 10.1773 @@ -2579,16 +2606,18 @@ 10.1774 Attribute matching for reference combinators follow the same rules as for <a href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">attribute selectors</a>. 10.1775 10.1776 <div class="example"> 10.1777 - <p>The following example highlights an <code><input></code> element 10.1778 + <p>The following example highlights an <code><input></code> element 10.1779 when its 10.1780 - <a href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code><label></code></a> 10.1781 - is focused or hovered-over:</p> 10.1782 - <pre>label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */ 10.1783 -<!-- -->label:matches(:hover, :focus):not([for]) input { /* association by containment */ 10.1784 -<!-- --> box-shadow: yellow 0 0 10px; }</pre> 10.1785 + <a href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code><label></code></a> 10.1786 + is focused or hovered-over: 10.1787 + <pre><!-- 10.1788 + -->label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */
<!-- 10.1789 + -->label:matches(:hover, :focus):not([for]) input { /* association by containment */
<!-- 10.1790 + -->box-shadow: yellow 0 0 10px; 
<!-- 10.1791 + -->}</pre> 10.1792 </div> 10.1793 10.1794 - <p class="issue">This could also be implemented as a functional pseudo-class.</p> 10.1795 + <p class="issue">This could also be implemented as a functional pseudo-class. 10.1796 10.1797 <h2 id="column-selectors"> 10.1798 Grid-Structural Selectors</h2> 10.1799 @@ -2618,16 +2647,16 @@ 10.1800 it is represented by a selector indicating membership in any of those columns. 10.1801 10.1802 <div class="example"> 10.1803 - <p>The following example makes cells C, E, and G yellow.</p> 10.1804 + <p>The following example makes cells C, E, and G yellow. 10.1805 <pre>col.selected || td { background: yellow; }</pre> 10.1806 - <pre> 10.1807 -<!-- --><table> 10.1808 -<!-- --> <col span="2"> 10.1809 -<!-- --> <col class="selected"> 10.1810 -<!-- --> <tr><td>A <td>B <td>C 10.1811 -<!-- --> <tr><td span="2">D <td>E 10.1812 -<!-- --> <tr><td>F <td span="2">G 10.1813 -<!-- --></table></pre> 10.1814 + <pre><!-- 10.1815 + --><table>
<!-- 10.1816 + --> <col span="2">
<!-- 10.1817 + --> <col class="selected">
<!-- 10.1818 + --> <tr><td>A <td>B <td>C
<!-- 10.1819 + --> <tr><td span="2">D <td>E
<!-- 10.1820 + --> <tr><td>F <td span="2">G
<!-- 10.1821 + --></table></pre> 10.1822 </div> 10.1823 10.1824 <h3 id="the-nth-column-pseudo"> 10.1825 @@ -2670,13 +2699,13 @@ 10.1826 <h2 id="specificity"> 10.1827 Calculating a selector's specificity</h2> 10.1828 10.1829 - <p>A selector's specificity is calculated as follows:</p> 10.1830 + <p>A selector's specificity is calculated as follows: 10.1831 10.1832 <ul> 10.1833 - <li>count the number of ID selectors in the selector (= a)</li> 10.1834 - <li>count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)</li> 10.1835 - <li>count the number of type selectors and pseudo-elements in the selector (= c)</li> 10.1836 - <li>ignore the universal selector</li> 10.1837 + <li>count the number of ID selectors in the selector (= a) 10.1838 + <li>count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b) 10.1839 + <li>count the number of type selectors and pseudo-elements in the selector (= c) 10.1840 + <li>ignore the universal selector 10.1841 </ul> 10.1842 10.1843 <p>The specificity of a <a href="#negation">negation</a> or 10.1844 @@ -2688,34 +2717,34 @@ 10.1845 specificity, if possible. See <a href="http://lists.w3.org/Archives/Public/www-style/2010Sep/0534.html">dbaron's message</a>. 10.1846 10.1847 <p>Concatenating the three numbers a-b-c (in a number system with a 10.1848 - large base) gives the specificity.</p> 10.1849 + large base) gives the specificity. 10.1850 10.1851 <div class="example"> 10.1852 - <p>Examples:</p> 10.1853 - <pre> 10.1854 - * /* a=0 b=0 c=0 -> specificity = 0 */ 10.1855 - LI /* a=0 b=0 c=1 -> specificity = 1 */ 10.1856 - UL LI /* a=0 b=0 c=2 -> specificity = 2 */ 10.1857 - UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */ 10.1858 - H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ 10.1859 - UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ 10.1860 - LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ 10.1861 - #x34y /* a=1 b=0 c=0 -> specificity = 100 */ 10.1862 - #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */ 10.1863 - </pre> 10.1864 + <p>Examples: 10.1865 + id="the-"
<!-- 10.1866 + -->* /* a=0 b=0 c=0 -> specificity = 0 */
<!-- 10.1867 + -->LI /* a=0 b=0 c=1 -> specificity = 1 */
<!-- 10.1868 + -->UL LI /* a=0 b=0 c=2 -> specificity = 2 */
<!-- 10.1869 + -->UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
<!-- 10.1870 + -->H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
<!-- 10.1871 + -->UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
<!-- 10.1872 + -->LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
<!-- 10.1873 + -->#x34y /* a=1 b=0 c=0 -> specificity = 100 */
<!-- 10.1874 + -->#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */ 10.1875 + </pre> 10.1876 </div> 10.1877 10.1878 <p class="note"><strong>Note:</strong> Repeated occurrances of the 10.1879 - same simple selector are allowed and do increase specificity.</p> 10.1880 + same simple selector are allowed and do increase specificity. 10.1881 10.1882 <p class="note"><strong>Note:</strong> the specificity of the styles 10.1883 specified in an HTML <code>style</code> attribute is described in CSS 10.1884 - 2.1. [[!CSS21]].</p> 10.1885 + 2.1. [[!CSS21]]. 10.1886 10.1887 <h2 id="formal-syntax"> 10.1888 Formal Syntax</h2> 10.1889 10.1890 -<p class="issue">This section needs to be updated.</p> 10.1891 +<p class="issue">This section needs to be updated. 10.1892 10.1893 <h3 id="grammar"> 10.1894 Grammar</h3> 10.1895 @@ -2725,93 +2754,94 @@ 10.1896 it directly, since it doesn't express the parsing conventions). The 10.1897 format of the productions is optimized for human consumption and some 10.1898 shorthand notations beyond Yacc (see [[!YACC]]) 10.1899 - are used:</p> 10.1900 + are used: 10.1901 10.1902 <ul> 10.1903 <li><b>*</b>: 0 or more 10.1904 <li><b>+</b>: 1 or more 10.1905 <li><b>?</b>: 0 or 1 10.1906 <li><b>|</b>: separates alternatives 10.1907 - <li><b>[ ]</b>: grouping </li> 10.1908 + <li><b>[ ]</b>: grouping 10.1909 </ul> 10.1910 10.1911 - <p>The productions are:</p> 10.1912 - 10.1913 - <pre>selectors_group 10.1914 - : selector [ COMMA S* selector ]* 10.1915 - ; 10.1916 - 10.1917 - selector 10.1918 - : compound_selector [ combinator simple_selector_sequence ]* 10.1919 - ; 10.1920 - 10.1921 - combinator 10.1922 - /* combinators can be surrounded by whitespace */ 10.1923 - : PLUS S* | GREATER S* | TILDE S* | S+ 10.1924 - ; 10.1925 - 10.1926 - simple_selector_sequence 10.1927 - : [ type_selector | universal ] 10.1928 - [ HASH | class | attrib | pseudo | negation ]* 10.1929 - | [ HASH | class | attrib | pseudo | negation ]+ 10.1930 - ; 10.1931 - 10.1932 - type_selector 10.1933 - : [ namespace_prefix ]? element_name 10.1934 - ; 10.1935 - 10.1936 - namespace_prefix 10.1937 - : [ IDENT | '*' ]? '|' 10.1938 - ; 10.1939 - 10.1940 - element_name 10.1941 - : IDENT 10.1942 - ; 10.1943 - 10.1944 - universal 10.1945 - : [ namespace_prefix ]? '*' 10.1946 - ; 10.1947 - 10.1948 - class 10.1949 - : '.' IDENT 10.1950 - ; 10.1951 - 10.1952 - attrib 10.1953 - : '[' S* [ namespace_prefix ]? IDENT S* 10.1954 - [ [ PREFIXMATCH | 10.1955 - SUFFIXMATCH | 10.1956 - SUBSTRINGMATCH | 10.1957 - '=' | 10.1958 - INCLUDES | 10.1959 - DASHMATCH ] S* [ IDENT | STRING ] S* [IDENT S*]? 10.1960 - ]? ']' 10.1961 - ; 10.1962 - 10.1963 - pseudo 10.1964 - /* '::' starts a pseudo-element, ':' a pseudo-class */ 10.1965 - /* Exceptions: :first-line, :first-letter, :before and :after. */ 10.1966 - /* Note that pseudo-elements are restricted to one per selector and */ 10.1967 - /* occur only in the last compound_selector. */ 10.1968 - : ':' ':'? [ IDENT | functional_pseudo ] 10.1969 - ; 10.1970 - 10.1971 - functional_pseudo 10.1972 - : FUNCTION S* expression ')' 10.1973 - ; 10.1974 - 10.1975 - expression 10.1976 - /* In CSS3, the expressions are identifiers, strings, */ 10.1977 - /* or of the form "an+b" */ 10.1978 - : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+ 10.1979 - ; 10.1980 - 10.1981 - negation 10.1982 - : NOT S* negation_arg S* ')' 10.1983 - ; 10.1984 - 10.1985 - negation_arg 10.1986 - : type_selector | universal | HASH | class | attrib | pseudo 10.1987 - ;</pre> 10.1988 + <p>The productions are: 10.1989 + 10.1990 + <pre> 10.1991 + selectors_group 10.1992 + : selector [ COMMA S* selector ]* 10.1993 + ; 10.1994 + 10.1995 + selector 10.1996 + : compound_selector [ combinator simple_selector_sequence ]* 10.1997 + ; 10.1998 + 10.1999 + combinator 10.2000 + /* combinators can be surrounded by whitespace */ 10.2001 + : PLUS S* | GREATER S* | TILDE S* | S+ 10.2002 + ; 10.2003 + 10.2004 + simple_selector_sequence 10.2005 + : [ type_selector | universal ] 10.2006 + [ HASH | class | attrib | pseudo | negation ]* 10.2007 + | [ HASH | class | attrib | pseudo | negation ]+ 10.2008 + ; 10.2009 + 10.2010 + type_selector 10.2011 + : [ namespace_prefix ]? element_name 10.2012 + ; 10.2013 + 10.2014 + namespace_prefix 10.2015 + : [ IDENT | '*' ]? '|' 10.2016 + ; 10.2017 + 10.2018 + element_name 10.2019 + : IDENT 10.2020 + ; 10.2021 + 10.2022 + universal 10.2023 + : [ namespace_prefix ]? '*' 10.2024 + ; 10.2025 + 10.2026 + class 10.2027 + : '.' IDENT 10.2028 + ; 10.2029 + 10.2030 + attrib 10.2031 + : '[' S* [ namespace_prefix ]? IDENT S* 10.2032 + [ [ PREFIXMATCH | 10.2033 + SUFFIXMATCH | 10.2034 + SUBSTRINGMATCH | 10.2035 + '=' | 10.2036 + INCLUDES | 10.2037 + DASHMATCH ] S* [ IDENT | STRING ] S* [IDENT S*]? 10.2038 + ]? ']' 10.2039 + ; 10.2040 + 10.2041 + pseudo 10.2042 + /* '::' starts a pseudo-element, ':' a pseudo-class */ 10.2043 + /* Exceptions: :first-line, :first-letter, :before and :after. */ 10.2044 + /* Note that pseudo-elements are restricted to one per selector and */ 10.2045 + /* occur only in the last compound_selector. */ 10.2046 + : ':' ':'? [ IDENT | functional_pseudo ] 10.2047 + ; 10.2048 + 10.2049 + functional_pseudo 10.2050 + : FUNCTION S* expression ')' 10.2051 + ; 10.2052 + 10.2053 + expression 10.2054 + /* In CSS3, the expressions are identifiers, strings, */ 10.2055 + /* or of the form "an+b" */ 10.2056 + : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+ 10.2057 + ; 10.2058 + 10.2059 + negation 10.2060 + : NOT S* negation_arg S* ')' 10.2061 + ; 10.2062 + 10.2063 + negation_arg 10.2064 + : type_selector | universal | HASH | class | attrib | pseudo 10.2065 + ;</pre> 10.2066 10.2067 10.2068 <h3 id="lex"> 10.2069 @@ -2819,76 +2849,76 @@ 10.2070 10.2071 <p>The following is the tokenizer, written in Flex (see 10.2072 [[!FLEX]]) notation. The tokenizer is 10.2073 - case-insensitive.</p> 10.2074 + case-insensitive. 10.2075 10.2076 <p>The two occurrences of "\377" represent the highest character 10.2077 number that current versions of Flex can deal with (decimal 255). They 10.2078 should be read as "\4177777" (decimal 1114111), which is the highest 10.2079 - possible code point in Unicode/ISO-10646. [[!UNICODE]]</p> 10.2080 - 10.2081 - <pre> 10.2082 - %option case-insensitive 10.2083 - 10.2084 - ident [-]?{nmstart}{nmchar}* 10.2085 - name {nmchar}+ 10.2086 - nmstart [_a-z]|{nonascii}|{escape} 10.2087 - nonascii [^\0-\177] 10.2088 - unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])? 10.2089 - escape {unicode}|\\[^\n\r\f0-9a-f] 10.2090 - nmchar [_a-z0-9-]|{nonascii}|{escape} 10.2091 - num [0-9]+|[0-9]*\.[0-9]+ 10.2092 - string {string1}|{string2} 10.2093 - string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\" 10.2094 - string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\' 10.2095 - invalid {invalid1}|{invalid2} 10.2096 - invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})* 10.2097 - invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})* 10.2098 - nl \n|\r\n|\r|\f 10.2099 - w [ \t\r\n\f]* 10.2100 - 10.2101 - D d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])? 10.2102 - E e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])? 10.2103 - N n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n 10.2104 - O o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o 10.2105 - T t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t 10.2106 - V v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v 10.2107 - 10.2108 - %% 10.2109 - 10.2110 - [ \t\r\n\f]+ return S; 10.2111 - 10.2112 - "~=" return INCLUDES; 10.2113 - "|=" return DASHMATCH; 10.2114 - "^=" return PREFIXMATCH; 10.2115 - "$=" return SUFFIXMATCH; 10.2116 - "*=" return SUBSTRINGMATCH; 10.2117 - {ident} return IDENT; 10.2118 - {string} return STRING; 10.2119 - {ident}"(" return FUNCTION; 10.2120 - {num} return NUMBER; 10.2121 - "#"{name} return HASH; 10.2122 - {w}"+" return PLUS; 10.2123 - {w}">" return GREATER; 10.2124 - {w}"," return COMMA; 10.2125 - {w}"~" return TILDE; 10.2126 - ":"{N}{O}{T}"(" return NOT; 10.2127 - @{ident} return ATKEYWORD; 10.2128 - {invalid} return INVALID; 10.2129 - {num}% return PERCENTAGE; 10.2130 - {num}{ident} return DIMENSION; 10.2131 - "<!--" return CDO; 10.2132 - "-->" return CDC; 10.2133 - 10.2134 - \/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */ 10.2135 - 10.2136 - . return *yytext;</pre> 10.2137 + possible code point in Unicode/ISO-10646. [[!UNICODE]] 10.2138 + 10.2139 + <pre><!-- 10.2140 + -->%option case-insensitive
<!-- 10.2141 + -->
<!-- 10.2142 + -->ident [-]?{nmstart}{nmchar}*
<!-- 10.2143 + -->name {nmchar}+
<!-- 10.2144 + -->nmstart [_a-z]|{nonascii}|{escape}
<!-- 10.2145 + -->nonascii [^\0-\177]
<!-- 10.2146 + -->unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
<!-- 10.2147 + -->escape {unicode}|\\[^\n\r\f0-9a-f]
<!-- 10.2148 + -->nmchar [_a-z0-9-]|{nonascii}|{escape}
<!-- 10.2149 + -->num [0-9]+|[0-9]*\.[0-9]+
<!-- 10.2150 + -->string {string1}|{string2}
<!-- 10.2151 + -->string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
<!-- 10.2152 + -->string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
<!-- 10.2153 + -->invalid {invalid1}|{invalid2}
<!-- 10.2154 + -->invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
<!-- 10.2155 + -->invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
<!-- 10.2156 + -->nl \n|\r\n|\r|\f
<!-- 10.2157 + -->w [ \t\r\n\f]*
<!-- 10.2158 + -->
<!-- 10.2159 + -->D d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])?
<!-- 10.2160 + -->E e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])?
<!-- 10.2161 + -->N n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n
<!-- 10.2162 + -->O o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o
<!-- 10.2163 + -->T t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t
<!-- 10.2164 + -->V v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v
<!-- 10.2165 + -->
<!-- 10.2166 + -->%%
<!-- 10.2167 + -->
<!-- 10.2168 + -->[ \t\r\n\f]+ return S;
<!-- 10.2169 + -->
<!-- 10.2170 + -->"~=" return INCLUDES;
<!-- 10.2171 + -->"|=" return DASHMATCH;
<!-- 10.2172 + -->"^=" return PREFIXMATCH;
<!-- 10.2173 + -->"$=" return SUFFIXMATCH;
<!-- 10.2174 + -->"*=" return SUBSTRINGMATCH;
<!-- 10.2175 + -->{ident} return IDENT;
<!-- 10.2176 + -->{string} return STRING;
<!-- 10.2177 + -->{ident}"(" return FUNCTION;
<!-- 10.2178 + -->{num} return NUMBER;
<!-- 10.2179 + -->"#"{name} return HASH;
<!-- 10.2180 + -->{w}"+" return PLUS;
<!-- 10.2181 + -->{w}">" return GREATER;
<!-- 10.2182 + -->{w}"," return COMMA;
<!-- 10.2183 + -->{w}"~" return TILDE;
<!-- 10.2184 + -->":"{N}{O}{T}"(" return NOT;
<!-- 10.2185 + -->@{ident} return ATKEYWORD;
<!-- 10.2186 + -->{invalid} return INVALID;
<!-- 10.2187 + -->{num}% return PERCENTAGE;
<!-- 10.2188 + -->{num}{ident} return DIMENSION;
<!-- 10.2189 + -->"<!--" return CDO;
<!-- 10.2190 + -->"-->" return CDC;
<!-- 10.2191 + -->
<!-- 10.2192 + -->\/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */
<!-- 10.2193 + -->
<!-- 10.2194 + -->. return *yytext;</pre> 10.2195 10.2196 <h2 id="profiling"> 10.2197 Profiles</h2> 10.2198 10.2199 <p>Each specification using Selectors must define the subset of 10.2200 Selectors it allows and excludes, and describe the local meaning of 10.2201 - all the components of that subset.</p> 10.2202 + all the components of that subset. 10.2203 10.2204 <h3 id="css-profiles"> 10.2205 CSS Profiles</h3> 10.2206 @@ -2936,7 +2966,7 @@ 10.2207 :active, :hover, :focus, :lang() and :first-child pseudo-classes 10.2208 <br>descendant combinator<br>child combinator<br>adjacent-sibling 10.2209 combinator<br>::first-line and ::first-letter pseudo-elements<br>::before 10.2210 - and ::after pseudo-elements</td></tr> 10.2211 + and ::after pseudo-elements 10.2212 <tr> 10.2213 <th>Excludes 10.2214 <td>namespaces, case-insensitive attribute selectors 10.2215 @@ -2948,7 +2978,7 @@ 10.2216 <h3 id="stts-profile"> 10.2217 STTS Profiles</h3> 10.2218 10.2219 - <p><em>This section is non-normative.</em></p> 10.2220 + <p><em>This section is non-normative.</em> 10.2221 10.2222 <p>Selectors can be used in STTS 3 in two different manners: 10.2223 <ol> 10.2224 @@ -2961,13 +2991,13 @@ 10.2225 <caption>STTS3 Selectors Profile</caption> 10.2226 <tr> 10.2227 <th>Specification</th> 10.2228 - <td><a href="http://www.w3.org/TR/NOTE-STTS3">STTS 3</a></td> 10.2229 - </tr> 10.2230 + <td><a href="http://www.w3.org/TR/NOTE-STTS3">STTS 3</a> 10.2231 + 10.2232 <tr> 10.2233 <th>Accepts</th> 10.2234 <td>type selectors<br>universal selectors<br>attribute selectors<br>class 10.2235 selectors<br>ID selectors<br>level 3 structural pseudo-classes<br> 10.2236 - all combinators except reference combinator<br>namespaces</td></tr> 10.2237 + all combinators except reference combinator<br>namespaces 10.2238 <tr> 10.2239 <th>Excludes 10.2240 <td>namespaces, case-insensitive attribute selectors 10.2241 @@ -2991,20 +3021,20 @@ 10.2242 letters in this specification. 10.2243 10.2244 <p>All of the text of this specification is normative except sections 10.2245 - explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> 10.2246 + explicitly marked as non-normative, examples, and notes. [[!RFC2119]] 10.2247 10.2248 <p>Examples in this specification are introduced with the words “for example” 10.2249 or are set apart from the normative text with <code>class="example"</code>, 10.2250 like this: 10.2251 10.2252 <div class="example"> 10.2253 - <p>This is an example of an informative example.</p> 10.2254 + <p>This is an example of an informative example. 10.2255 </div> 10.2256 10.2257 <p>Informative notes begin with the word “Note” and are set apart from the 10.2258 normative text with <code>class="note"</code>, like this: 10.2259 10.2260 - <p class="note">Note, this is an informative note.</p> 10.2261 + <p class="note">Note, this is an informative note. 10.2262 10.2263 <h3 id="conformance-classes"> 10.2264 Conformance Classes</h3> 10.2265 @@ -3014,10 +3044,10 @@ 10.2266 <dl> 10.2267 <dt><dfn title="selector instance!!as conformance class">selector instance</dfn> 10.2268 <dd>A written selector. 10.2269 - <dt><dfn>interpreter</dfn></dt> 10.2270 + <dt><dfn>interpreter</dfn> 10.2271 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 10.2272 that interprets the semantics of a selector. 10.2273 - <dt><dfn id="authoring-tool">authoring tool</dfn></dt> 10.2274 + <dt><dfn id="authoring-tool">authoring tool</dfn> 10.2275 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 10.2276 that writes a style sheet. 10.2277 </dl> 10.2278 @@ -3043,7 +3073,7 @@ 10.2279 10.2280 <p>Specifications reusing Selectors must define how to handle invalid 10.2281 selectors. (In the case of CSS, the entire rule in which the selector is 10.2282 - used is effectively dropped.)</p> 10.2283 + used is effectively dropped.) 10.2284 10.2285 <h3 id="partial"> 10.2286 Partial Implementations</h3> 10.2287 @@ -3051,7 +3081,7 @@ 10.2288 <p>So that authors can exploit the forward-compatible parsing rules to 10.2289 trigger fallback behavior, UAs <strong>must</strong> 10.2290 treat as <a href="#invalid">invalid</a> any selectors for which they have 10.2291 - no usable level of support.</p> 10.2292 + no usable level of support. 10.2293 10.2294 <h3 id="experimental"> 10.2295 Experimental Implementations</h3> 10.2296 @@ -3064,7 +3094,7 @@ 10.2297 avoids any incompatibilities with future changes in the draft. Once a 10.2298 specification reaches the Candidate Recommendation stage, implementors 10.2299 should implement the non-prefixed syntax for any feature they consider to 10.2300 - be correctly implemented according to spec.</p> 10.2301 + be correctly implemented according to spec. 10.2302 10.2303 <!-- 10.2304 <h2 id="Tests">Tests</h2> 10.2305 @@ -3073,7 +3103,7 @@ 10.2306 href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test 10.2307 suite</a> allowing user agents to verify their basic conformance to 10.2308 the specification. This test suite does not pretend to be exhaustive 10.2309 - and does not cover all possible combined cases of Selectors.</p> 10.2310 + and does not cover all possible combined cases of Selectors. 10.2311 --> 10.2312 10.2313 <h2 id="acknowledgements">